基于微信开发者工具实现的习题生成小程序的应用

[19]小程序全局配置在小程序根目录下的app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。通过对app.json进行设计，把小程序的一些基本框架确定好，下面是部分代码，如代码1所示。代码1小程序全局配置代码{"pages":

[

"pages/index/index",

"pages/users/home/home",

"pages/main/judge/judge",

"pages/main/judge1/judge1",

"pages/main/multiple/multiple",

"pages/main/multiple1/multiple1",

"pages/main/result/result",

"pages/main/single/single",

"pages/main/single1/single1","pages/sub/addSub/addSub",

"pages/sub/subs/subs",

"pages/lib/addLib/addLib",

"pages/lib/libs/libs",

"pages/users/about/about",

"pages/Home/home/home",

"pages/introduce/introduce",

"pages/message/home/home"

],

"window":

{

"backgroundTextStyle":

"light",

"navigationBarBackgroundColor":

"#fff",

"navigationStyle":

"custom",

"navigationBarTextStyle":

"white"

},

"usingComponents":

{

"cu-custom":

"/colorui/components/cu-custom",

"Home":

"/pages/Home/home/home",

"users":

"/pages/users/home/home",

"message":"pages/message/home/home"

},

"sitemapLocation":

"sitemap.json"}此部分代码主要作用是对导航栏进行配置，制作一个基础的页面，其中pages代表页面路径列表；window用于设置小程序的状态栏、导航条、标题、窗口背景色；usingComponents用于调用各个使用组件。当点击导航栏对应的案件时，对应的图标将会切换至对应的颜色。例如：点击首页按钮，首页的图标将会转换为绿色。用户个人中心模块用户个人中心是用户个人信息管理、反馈问题以及了解小程序具体功能的功能模块。用户个人中心模块的具体设计本产品将用户分为三种类型：教师、学生、管理员。本产品通过判断角色类型的不同，来赋予角色不同的操作权限。用户个人中心可以对小程序的使用问题进行反馈，也可以对小程序本身进行一定的了解，能正常进行登录记录个人信息。用户个人中心模块的页面展示与核心代码实现从用户个人中心模块的页面展示中，可以观察到登录模块，用户可点击中间的个人信息管理（圆形）对头像、名称等相关信息进行编辑，同时还可以对小程序进行意见反馈，也可以联系管理员进行使用功能上的询问，并且可以点击关于我们对小程序本身进行一个初步的了解。用户个人中心模块页面展示如图7所示。图7用户个人中心模块页面展示此部分代码主要是对用户个人中心模块页面进行设计，完成基础的页面，其中分为三个主要部分，第一个是登录模块，点击可以将弹出登录提示，紧接着是中间的四大模块：联系管理员、关于我们、意见反馈以及设置。这四大模块使用了多个<viewclass><view/>来填充页面，对其设置样式从而得到展示图的效果。代码2用户个人中心模块核心代码<scroll-view

scroll-y

class="scrollPage">

<view

class="UCenter-bg">

<view

class="flex

justify-center">

<view

class='text-center'>

<view

class="cu-avatar

xl

round

solids

userinfo-avatar">

<open-data

type="userAvatarUrl"

class="round

"></open-data>

</view>

<view

class="padding">

<open-data

type="userNickName"

lang="zh_CN"></open-data>

</view>

</view>

</view>

<image

src="/color%20ui_wave.gif"

mode="scaleToFill"

class="gif-wave"></image>

</view>

<view

class="cu-list

menu

card-menu

margin-top-xl

margin-bottom-xl

shadow-lg

radius">

<view

class="cu-item

arrow">

<button

class="cu-btn

content"

open-type="contact">

<text

class="cuIcon-service

text-green"></text>

<text

class="text-grey">联系管理员</text>

</button>

</view>

<view

class="cu-item

arrow">

<button

class="cu-btn

content"

open-type="feedback">

<text

class="cuIcon-writefill

text-cyan"></text>

<text

class="text-grey">意见反馈</text>

</button>

</view>

<view

class="cu-item

arrow">

<view

class="content"

bindtap="showQrcode">

<text

class="cuIcon-appreciatefill

text-red"></text>

<text

class="text-grey">设置</text>

</view>

</view>

<view

class="cu-item

arrow">

<navigator

class="content"

url="/pages/users/about/about"

hover-class="none">

<text

class="cuIcon-discover

text-blue"></text>

<text

class="text-grey">关于我们</text>

</navigator>

</view>

</view>

<view

class="text-sm

text-center

foot">

<text

class="text-grey

padding-sm"

style="position:

relative;

left:

1rpx;

top:

409rpx">

小题库Lite\nV0.5

</text>

</view>

<view

class="cu-tabbar-height"></view></scroll-view>代码3用户个人中心模块样式核心代码.UCenter-bg

{

background-color:

#62a671;

background-size:

cover;

height:

450rpx;

display:

flex;

justify-content:

center;

padding-top:

40rpx;

overflow:

hidden;

position:

relative;

flex-direction:

column;

align-items:

center;

color:

#fff;

font-weight:

300;

text-shadow:

0

0

3px

rgba(0,

0,

0,

0.3);}.userinfo-avatar

{

overflow:

hidden;

display:

block;}.UCenter-bg

text

{

opacity:

0.8;}.UCenter-bg

image

{

width:

200rpx;

height:

200rpx;}.UCenter-bg

.gif-wave

{

position:

absolute;

width:

100%;

bottom:

0;

left:

0;

z-index:

99;

mix-blend-mode:

screen;

height:

100rpx;}map,.mapBox

{

left:

0;

z-index:

99;

mix-blend-mode:

screen;

height:

100rpx;}map,.mapBox

{

width:

750rpx;height:

300rpx;}首页模块在首页中具有四个模块：我的题库、添加题刻、使用说明以及即将上线的功能。在我的题库中可以根据教师加入的题库，挑选不同的难度对其进行练习；教师可以在添加题库的功能中对题库进行添加，以应对各类型学生所需要的题目；使用说明可以让教师了解如何对题库进行添加；而即将上线模块，由于作者对本产品尚未开发完全，因此设置该模块提醒使用者后续功能会有什么。首页模块页面设计展示以及核心代码从首页模块页面设计展示中，可以观察到包括多个模块，一个标题，一个轮播图，以及四个模块。四大模块中包括我的题库、添加题库、使用说明和即将上线。点击我的题库后，跳转到选择题库的页面，对题库进行选择；点击添加题库后，将跳转到添加题库的页面，对所添加的题库进行命名，也可以使用恢复功能将误删除的题库进行恢复，对恢复按钮进行长按即可实现恢复题库的功能；点击使用说明后，将跳转到如何插入题库的讲解页面，该页面会对题库格式，题目格式要求讲解清楚，从而让教师能顺利对题库进行插入。首页模块页面展示如图8所示。图8首页模块页面展示此部分代码主要是对首页页面进行设计，完成基础页面，使用多个{item.--}来对标题、颜色、名称等进行储存，使用时再进行调用，可以使得代码看起来不那么臃肿。此部分主要制作了五个模块，一个轮播图以及四个按键模块。这些代码都还只限于前端开发，只涉及到了页面设计，并未涉及到后端的开发。各个按钮作用用于跳转至下一个页面。代码4首页模块核心代码<!s/Home/home/home.wxml--><cu-custom

bgColor="bg-yellow">

<view

slot="content">小题库</view></cu-custom><swiper

class="

screen-swiper2

square-dot

shadow

fixed"

indicator-dots="true"

style="top:{{CustomBar}}px;"

circular="true"

autoplay="true"

interval="5000"

duration="500"

indicator-active-color="#fec432">

<swiper-item

wx:for="{{swiperList}}"

wx:key

style="position:

absolute;

left:

-1rpx;

top:

0rpx">

<image

src="{{item.url}}"

mode="aspectFill"

wx:if="{{item.type=='image'}}"></image>

<video

src="{{item.url}}"

autoplay

loop

muted

show-play-btn="{{false}}"

controls="{{false}}"

objectFit="cover"

wx:if="{{item.type=='video'}}"></video>

</swiper-item></swiper><view

class="padding-top-xl"></view><view

class="bgIndex"

style="width:

750rpx;

height:

780rpx;

display:

block;

box-sizing:

border-box">

<view

class='nav-list

margin-top-xl'

style="width:

750rpx;

height:

630rpx;

display:

flex;

box-sizing:

border-box">

<navigator

open-type="navigate"

hover-class='none'

url="{{item.url}}"

class="nav-li

bg-{{item.color}}"

wx:for="{{elements}}"

wx:key>

<view

class="nav-title">{{item.title}}</view>

<view

class="nav-name">{{}}</view>

<text

class='cuIcon-{{item.icon}}'></text>

</navigator>

</view></view><ad

unit-id="adunit-d30d92fc5babdd3a"></ad>代码5首页模块样式核心代码//

pages/Home/home/home.jsconst

app

=

getApp();Page({

/**

*

页面的初始数据

*/

data:

{

StatusBar:

app.globalData.StatusBar,

CustomBar:

app.globalData.CustomBar,

swiperList:

[{

id:

0,

type:

'image',

url:

'/%E5%B0%8F%E9%A2%98%E5%BA%93Lite/2.png'

},

{

id:

1,

type:

'image',

url:

'/%E5%B0%8F%E9%A2%98%E5%BA%93Lite/2.png',

}],

elements:

[{

title:

'我的题库',

name:

'Item

bank',

color:

'cyan',

icon:

'edit',

url:"/pages/lib/libs/libs"

},

{

title:

'添加题库',

name:

'Add',

color:

'blue',

icon:

'add',

url:

"/pages/lib/addLib/addLib"

},

{

title:

'使用说明',

name:

'introduce',

color:

'purple',

icon:

'searchlist',

url:"/pages/introduce/introduce"

},

{

title:

'即将上线

',

name:

'coming',

color:

'mauve',

icon:

'discover'

}]

},

/**

*

生命周期函数--监听页面加载

*/

onLoad:

function

(options)

{

},

/**

*

生命周期函数--监听页面初次渲染完成

*/

onReady:

function

()

{

},

previewImage:

function

(e)

{

var

current

=

e.target.dataset.src;

wx.previewImage({

current:

current,

//

当前显示图片的http链接

urls:

eration_img

//

需要预览的图片http链接列表

})

},

/**

*

生命周期函数--监听页面显示

*/

onShow:

function

()

{

},

/**

*

生命周期函数--监听页面隐藏

*/

onHide:

function

()

{

},

/**

*

生命周期函数--监听页面卸载

*/

onUnload:

function

()

{

},

/**

*

页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh:

function

()

{

},

/**

*

页面上拉触底事件的处理函数

*/

onReachBottom:

function

()

{

},

/**

*

用户点击右上角分享

*/

onShareAppMessage:

function

()

{

}})答题模块本产品答题模块为最核心的模块，其功能是让学生可以选择各个题库进行答题，题库可以自定义，可对其自由添加、删减、修改。题目类型可包括单选、多选以及判断。答题模块页面设计展示以及核心代码设计从答题模块页面展示中，可以观察到点击我的题库之后可以进入题库选择界面，可以从中选择所要练习的题库，点击对应题库后进入选择练习界面，点击所需练习的习题后进入答题页面，答题页面中选择正确进入下一题，错误则标红，点击左下角答案按钮可显示出答案，右下角星星符号可以对题目进行收藏，成为错题集，右下角的左右按钮可以实现上一题下一题的功能。选择习题模块以及答题模块页面展示如图9、图10所示。图9选题模块页面展示图10答题模块页面展示此部分代码主要是对添加题库、答题页面、题目选择页面进行设计，完成页面设计。此模块前台主要是获取各个练习题目的相关信息并处理学生用户提交练习题的业务逻辑。后台主要是向数据库发送获取练习题的相关信息的请求，获取到练习题相关信息后供以前台进行调用。代码6答题页模块核心代码1<!--

pages/main/single/single.wxml

--><cu-custom

bgColor="bg-yellow"

isBack="{{true}}">

<view

slot="backText">返回</view>

<view

slot="content">小题库Lite</view></cu-custom><scroll-view

scroll-y="{{modalName==null}}"

class="scrollPage

{{modalName!=null?'show':''}}

">

<view

class="page">

<scroll-view

scroll-y

style="height:{{titleHeight}}px;">

<view

class='text-black

text-df

text-lg

padding'>

<view

class='margin-top-sm

'>{{item[1]}}</view>

</view>

</scroll-view>

<scroll-view

scroll-y

style="height:

{{opsHeight}}px;

margin-top:8px;">

<view

class="margin-top-xl

flex

flex-direction

padding-bottom-xl">

<button

id='A'

class="cu-btn

lg

margin-bottom-sm"

bindtap="btnOpClick"

style="background-color:

{{bcA}};">

{{item[2]}}

</button>

<button

id='B'

class="cu-btn

lg

margin-bottom-sm

"

bindtap="btnOpClick"

style="background-color:

{{bcB}};">

{{item[3]}}

</button>

<button

id='C'

class="cu-btn

lg

margin-bottom-sm

"

bindtap="btnOpClick"

style="background-color:

{{bcC}};">

{{item[4]}}

</button>

<button

id='D'

class="cu-btn

lg

margin-bottom-sm

"

wx:if="{{item.length

>=

6}}"

bindtap="btnOpClick"

style="background-color:

{{bcD}};">

{{item[5]}}

</button>

<button

id='E'

class="cu-btn

lg

margin-bottom-sm

"

wx:if="{{item.length

>=

7}}"

bindtap="btnOpClick"

style="background-color:

{{bcE}};">

{{item[6]}}

</button>

</view>

</scroll-view>

<view

class="page_bottom">

<view

class="page_bottom_left"

bindtap="showRight">答案</view>

<picker

value="{{index}}"

range="{{pickerMsg}}"

bindchange="bindPickerChange">

<view

class="page_bottom_msg">{{index+1}}/{{tishu}}</view>

</picker>

<view

class="page_bottom_star"

bindtap="changeStar">{{star}}</view>

<view

class="page_bottom_last"

bindtap="lastQuestion">◁</view>

<view

class="page_bottom_next"

bindtap="nextQuestion">▷</view>

</view>

</view></scroll-view>代码7答题页模块核心代码2<!--

pages/main/single1/single1.wxml

--><cu-custom

bgColor="bg-yellow"

isBack="{{true}}">

<view

slot="backText">返回</view>

<view

slot="content">小题库Lite</view></cu-custom><view

class="page">

<scroll-view

scroll-y

style="height:{{titleHeight}}px;">

<view

class='text-black

text-df

text-lg

padding'>

<view

class='margin-top-sm

'>{{item[1]}}</view>

</view>

</scroll-view>

<scroll-view

scroll-y

style="height:

{{opsHeight}}px;

margin-top:8px;">

<view

class="margin-top-xl

flex

flex-direction

padding-bottom-xl">

<button

id='A'

class="cu-btn

lg

margin-bottom-sm

"

bindtap="btnOpClick"

style="background-color:

{{bcA}};">

{{item[2]}}

</button>

<button

id='B'

class="cu-btn

lg

margin-bottom-sm

"

bindtap="btnOpClick"

style="background-color:

{{bcB}};">

{{item[3]}}

</button>

<button

id='C'

class="cu-btn

lg

margin-bottom-sm

"

bindtap="btnOpClick"

style="background-color:

{{bcC}};">

{{item[4]}}

</button>

<button

id='D'

class="cu-btn

lg

margin-bottom-sm

"

wx:if="{{item.length

>=

6}}"

bindtap="btnOpClick"

style="background-color:

{{bcD}};">

{{item[5]}}

</button>

<button

id='E'

class="cu-btn

lg

margin-bottom-sm

"

wx:if="{{item.length

>=

7}}"

bindtap="btnOpClick"

style="background-color:

{{bcE}};">

{{item[6]}}

</button>

</view>

</scroll-view>

<view

class="page_bottom">

<view

class="page_bottom_left"

bindtap="submit">提交</view>

<picker

value="{{index}}"

range="{{pickerMsg}}"

bindchange="bindPickerChange">

<view

class="page_bottom_msg">{{index+1}}/{{tishu}}</view>

</picker>

<view

class="page_bottom_star"

bindtap="changeStar">{{star}}</view>

<view

class="page_bottom_last"

bindtap="lastQuestion">◁</view>

<view

class="page_bottom_next"

bindtap="nextQuestion">▷</view>

</view></view>代码8添加题目模块核心代码<!--

pages/sub/addSub/addSub.wxml

--><cu-custom

bgColor="bg-yellow"

isBack="{{true}}">

<view

slot="backText">返回</view>

<view

slot="content">我的题库</view></cu-custom><scroll-view

scroll-y="{{modalName==null}}"

class="scrollPage

{{modalName!=null?'show':''}}

">

<view

class='text-black

text-df

text-lg

'>

<view

class="cu-form-group

solid-bottom">

<view

class="title">输入名称：</view>

<input

placeholder="题目分类"

id="myInput"

maxlength="17"

bindinput="getName"></input>

</view>

<radio-group

class="block"

bindchange="radioChange">

<view

class="cu-form-group">

<view

class="title">题型</view>

<radio

value="a"

checked="true"

/>

<text

class="text-lg">单选</text>

<radio

value="b"

/>

<text

class="text-lg">多选</text>

<radio

value="c"

/>

<text

class="text-lg">判断</text>

</view>

</radio-group>

<view

class="cu-form-group

margin-top">

<textarea

auto-height

class="show_text"

wx:if="{{inputShow}}"

maxlength="200000"

placeholder="选择题型→将题库复制到此处→查找"

value="{{txt}}"

bindinput="txtChange"

placeholder-style="color:blue;"

/>

<scroll-view

wx:if="{{!inputShow}}"

scroll-y>

<view

class='margin-sm

bg-white

padding-sm

radius

shadow-sm

'>

<view

class='text-black

text-df'>

<text>{{formTxt}}</text>

</view>

</view>

</scroll-view>

</view>

<modal

title="添加题库"

confirm-text="确定"

cancel-text="取消"

hidden="{{modalHidden}}"

mask

bindconfirm="modalFirm"

bindcancel="modalCancel">

{{name}}

</modal>

<view

class="flex-sub

text-row

margin-top">

<button

class="flex-item"

bindtap="btn1click">{{btn1Name}}</button>

<button

class="flex-item"

bindtap="btn2click">{{btn2Name}}</button>

</view>

</view></scroll-view>习题生成小程序系统测试根据上一部分的具体设计与实现完成后，对小程序进行一个全面的系统测试，目的是检测小程序是否出现其功能模块无法使用，响应速度慢等一系列相关的错误。系统测试是应用软件开发过程中最后的步骤也是至关重要的环节，同时也为其平台系统的维护和更新迭代的过程中奠定基础，并对相应功能的模块进行实现与完善。系统测试环境本产品由于是微信小程序，所以测试环境则选用电脑端制作小程序的微信开发者工具以及移动端的微信应用。以下通过表格列举出移动端以及电脑端的软硬件测试环境参数。表1电脑端软硬件测试环境电脑端软硬件测试环境操作系统Windows10（64位）主板华硕飞行堡垒8HM370处理器Intel酷睿i5-10300HCPU@2.50GHz内存容量16G硬盘ZHITAITiPIus50001TB网卡MERCURYWirelessNAdapter显卡NVIDIAGeForceGTX1650Ti显示器BOEHF分辨率:1920*1080(32位真彩色@60Hz)平台微信开发者工具表2移动端软硬件测试环境移动端软硬件测试环境手机型号iQOOneo5操作系统OriginOSforiQOO处理器高通骁龙870内存容量12G屏幕比例20:9网络双频WiFi，WiFi6软件平台微信客户端功能性需求测试本小程序进行功能性需求测试主要从用户个人模块、添加题库、添加题目、在线答题、收集错题五个核心模块进行功能性需求测试。用户个人模块对不同用户进行登录和退出登录均为正常。添加题库模块对用户添加题库、删除题库、调整题库、恢复默认题库功能均为正常。添加题目模块对各类型的题目添加、删除、调整均为正常。在线答题模块对选择答案、切换题目、显示答案、对错判定均为正常。表3小程序各模块功能测试表操作测试预期测试结果用户登录用户成功登录正常用户退出用户成功退出正常添加、删除题库成功添加、删除题库正常恢复默认题库长按恢复按钮后点确定成功恢复默认题库正常添加、删除题目成功添加、删除题目正常选择答案答对直接跳转至下一题，错误则标红正常切换题目点击上一题或者下一题按钮时成功切换正常显示答案按下左下角答案按钮时正确答案显示绿色正常对错判定正确对题目对错进行判定正常非功能性需求测试根据上一部分对功能性测试需求完成后，非功能性需求也是系统测试中重要的环节之一，主要包括平台系统兼容性测试。系统兼容性测试，主要是测试小程序在跨端的运行过程中的兼容状况。小程序兼容性测试的部分结果见下表，但测试环境条件有限，采用PC端和移动端的运行环境进行测试。表4小程序兼容性测试表序号测试内容是否一致1小程序在PC端环境中是否能进行正常页面展示是2小程序在移动端环境中是否能进行正常页面渲染是3小程序在PC端环境中是否能进行正常页面展示是4小程序在移动端环境中是否能进行正常页面渲染是总结与展望总结本文简要概述了习题生成小程序设计与实现所采用的相关技术，分析了小程序的主要功能模块的系统功能性与非功能性需求，运用微信开发者工具对小程序各模块功能进行实现。本文主要包括以下方面的工作内容：（1）通过搜索并浏览微信小程序和在线教育相关的文献，以了解微信小程序目前的发展趋势以及教育类小程序对教学方面所带来的好处，明确小程序的发展方向，减轻学生的学习压力。（2）在确定将习题生成的这个功能放在小程序上的时候，对小程序的特性进行了解，根据其特性进行分析去发挥其便捷性（3）该小程序在设计与开发过程中选择以微信开发者工具进行设计与实现，该工具的好处是使用简单，维护方便，极大地提高了开发效率。（4）设计与实现小程序的核心功能模块，主要包括用户个人模块、在线答题模块、生成题库模块、收集错题模块。根据小程序的需求分析，用户角色分析分为了三种类型：学生、教师以及管理员，分别对这三种不同的角色类型进行权限的分配及用户角色需求分析。在线答题模块主要用于习题练习，学生可以运用该模块进行多次练习，进行多种难度的练习，是打破学生学习瓶颈的重要模块。生成题库模块主要是供教师制作题库的功能模块，同时该模块起到了让教师根据学生情况制定专门的题库的作用。收集错题模块是学生对做错的题进行收录的模块，同时也是教师了解学生学习状况的主要模块。展望本文习题生成小程序已基本达到预设的要求，但是在平台开发过程中，涉及的技术比较宽广，计算机知识还需继续学习，再加上个人技术原因的制约，导致其平台系统还有许多功能未完善和实现，留下了待完善的空间。主要有以下方面：(1)在需求分析中提到的根据学生练习情况给予相应的学习策略这个功能，由于个人技术原因制约，并未能将此功能实现，日后会提高个人技术，将其补充完整。(2)在需求分析中提到的排行榜模块，即根据学生做题情况进行排名以鼓励学生良性竞争，由于个人技术原因制约，并未将次功能实现，日后会将其补充完整。(3)在答题模块中，添加题库以及添加题目的模块页面设计较为简陋，今后需对其进行二次设计，将页面美化。