近来百无聊赖，遂抽空做了一个答题小程序的系列教程，以及分享源码，是用云开发搭建的微信答题小程序v1.0。
界面截图
该答题小程序大抵如下图：
构造层级
次要程序由3个界面组成，别离是index，test以及result，构造层级如下图所示：
index：蕴含开始答题界面的页面布局与款式，以及js逻辑；
test：蕴含答题界面的页面布局与款式，以及js逻辑；
results：蕴含答题问题界面的页面布局与款式，以及js逻辑；
app：全局配置文件，全局变量等；
style：微信小程序的根本UI款式；
云开发数据库：存储相干题目数据。
1、index开始界面
次要性能是首页大图和信息的展现、按钮跳转以及分享。
（1）按钮跳转要害代码，就是catchtap点击事件与goToTest事件处理函数。
.wxml
<view catchtap="goToTest"> <button class='cu-btn bg-red round block lg'>开始答题</button></view>.js
//事件处理函数 goToTest: function() { wx.navigateTo({ url: '../test/test' }) },（2）分享实现，在button上应用open-type="share"属性，并且在页面js外面配置onShareAppMessage。
.wxml
<button class="cu-btn line-red round block lg margin-top" open-type="share"> 举荐给好友 </button>.js
onShareAppMessage(res) { return { title: '@你，快来参加消防安全常识答题流动吧~' } },2、test答题界面
答题界面须要做的事件有：
- 与数据库连贯，获取题目数据；
- 选中选项的前端交互；
- 点击切换到下一题；
- 零碎主动断定答题后果，计算得分 ；
- 提交得分到数据库进行保留；
- 答题完结，跳转至答题问题界面。
（1）与数据库连贯，获取题目数据；
// 获取题库-函数定义 getQuestionList() { // 显示 loading 提示框 wx.showLoading({ title: '拼命加载中' }); // 构建查问条件 activityQuestion.where({ // 指定查问条件，返回带新查问条件的新的汇合援用 true: _.exists(true) }) .get() .then(res => { // 获取汇合数据，或获取依据查问条件筛选后的汇合数据。 console.log('[云数据库] [activityQuestion] 查问胜利') console.log(res.data) let data = res.data || []; // 将数据从逻辑层发送到视图层，艰深的说，也就是更新数据到页面展现 this.setData({ questionList:data, index: 0 }); // 暗藏 loading 提示框 wx.hideLoading(); }) },（2）选中选项的前端交互；
.wxml
<radio-group class="radio-group" bindchange="radioChange"> <label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key" wx:for-item="value" wx:key="index"> <radio value="{{key}}" checked="{{questionList[index].checked}}" /> <text class="margin-left-xs">{{value}}</text> </label> </radio-group>.js
// 选中选项事件 radioChange(e){ this.data.chooseValue[this.data.index] = e.detail.value; },（3）点击切换到下一题；
.wxml
<button bindtap='nextSubmit' class="cu-btn bg-red round lg" wx:else>下一题</button>.js
// 下一题/提交 按钮 nextSubmit(){ // 如果没有抉择 if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) { return wx.showToast({ title: '请抉择答案!', icon: 'none', duration: 2000 }) } // 判断所抉择的选项是否为正确答案 this.chooseJudge(); // 判断是不是最初一题 this.lastJudge(); },// 判断是不是最初一题 lastJudge(){ if (this.data.index < this.data.questionList.length - 1) { // 如果不是最初一题，则切换下一题 let index = this.data.index + 1; this.setData({ index }) } else { // 如果是最初一题，则提交答卷 this.addExamRecord() } },（4）零碎主动断定答题后果，计算得分 ；
// 判断所抉择的选项是否为正确答案 chooseJudge(){ var trueValue = this.data.questionList[this.data.index]['true']; var chooseVal = this.data.chooseValue[this.data.index]; if (chooseVal.toString() != trueValue.toString()) { // 答错则记录错题 this.data.wrong++; this.data.wrongListSort.push(this.data.index); this.data.wrongList.push(this.data.questionList[this.data.index]._id); }else{ // 答对则累计总分 this.setData({ totalScore: this.data.totalScore + 5 }) } },（5）提交得分到数据库进行保留；
// 提交答卷 addExamRecord(){ wx.showLoading({ title: '提交答卷中' }); let examResult = { wrong: this.data.wrong, totalScore: this.data.totalScore }; activityRecord.add({ data: { ...examResult, createDate: db.serverDate() } }).then(res => { // 跳转到答题后果页，查看问题 wx.redirectTo({ url: '../results/results?id=' + res._id }); wx.hideLoading(); }) }（6）答题完结，跳转至答题问题界面。
// 跳转到答题后果页，查看问题 wx.redirectTo({ url: '../results/results?id=' + res._id });3、results答题问题界面
次要是查问答题状况和显示得分。在答题页面的时候，实现了提交得分到数据库进行保留。那么这里就能够从数据库中获取了。
.js
Page({ data: { totalScore: null, wrong: 0, zql: null }, onLoad(options) { // 查看答题问题 this.getExamResult(options.id); }, // 零碎主动判分 getExamResult(id){ wx.showLoading({ title: '零碎判分中' }); activityRecord .doc(id) .get() .then(res => { let examResult = res.data; let { wrong, totalScore } = examResult; this.setData({ totalScore, wrong, zql: (20-wrong)/20*100 }) wx.hideLoading(); }) },})好了，用云开发搭建的微信答题小程序，v1.0版本至此完结，源码曾经提交到gitee，撒花~
下一个版本v2.0正在在在开发中......