页面简要概述
一共包括三部分页面,分别为主界面(index)、做题页面(test)与结果页面(result)。每个页面包括WXML、WXSS和JS(TX)页面。其中,wxml页面用于显示内容,wxss页面用于显示基本样式,js页面用于页面行为。
index页面
index页面功能:一个开始测试按钮,触发后跳转至做题页面。
wxml:
<button bindtap='beginAnswer'> 开始测试 </button>
js:
beginAnswer: function() {
wx.navigateTo({
url: '../test/test',
})
},
开始测试按钮对应的动作函数名为beginAnswer,触发后跳转至test页面
test页面
test页面功能:呈现题目与选项,并统计正确与错误的数量
所有题目信息保存在app.js内的globalData中,包括question与option两个字段。
wxml:
题号、题目内容、选项内容,设立4个按钮分别为clickA,clickB,clickC,clickD
js:
设两个索引index与realIndex,index用于表示题号,realIndex用于表示问题索引,因此index从1开始而realIndex从0开始。
建立正确答案数组correctAnswer用appTest.globalData.question[realIndex].question获取题目细节,appTest.globalData.question[realIndex].option获取选项内容。当clickA触发时,if判断是否正确,正确则correct+1,否则error+1。将index与realIndex加1,并索引至下一题的题目。
当题目数量到达最大数量时,用wx.redirectTo带参跳转至result页面
result页面
result页面功能,显示正确数量与错误数量
wxml:
显示correct参数和error参数
js:
用onload函数加载test页面中的correct参数和error参数
个人笔记,如有侵权,请告知
本文介绍了包含index、test和result三个页面的网页应用,使用WXML展示内容,WXSS负责样式,JS控制页面行为。index页有开始测试功能,test页显示题目选项并统计对错,result页显示测试结果。
952

被折叠的 条评论
为什么被折叠?



