共计 3461 个字符,预计需要花费 9 分钟才能阅读完成。
近来百无聊赖,遂抽空做了一个答题小程序的系列教程,以及分享源码,是用云开发搭建的微信答题小程序 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 正在在在开发中 ……
正文完
发表至: javascript
2021-11-25