微信小程序（看文档写实例九）微信小程序课堂宝APP实现练习模块逻辑代码

左手的ㄟ右手 2022-05-10 01:36 205阅读 0赞

接上篇博文，这篇主要描述练习模块的代码逻辑，其中包括test页面，答题detail页面以及提交答题后答卷answer页面。

# 一、test页面 #

test页面其实就是从服务器获得章节练习题的内容，然后统计分类并显示，当用户点击对应的章节时跳转到答题detail页面并把该类题目信息传给detail页面。代码不多，如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> var Bmob = require("../../utils/Bmob-1.6.3.min.js"); var Util = require("../../utils/util.js"); var that; var app = getApp(); &nbsp; Page({ &nbsp; data: { grids: [{ name: '概述', path: "./detail/detail", chapter: "第一章", num: 0 }, { name: '物理层', path: "./detail/detail", chapter: "第二章", num: 0 }, { name: '数据链路层', path: "./detail/detail", chapter: "第三章", num: 0 }, { name: '网络层', path: "./detail/detail", chapter: "第四章", num: 0 }, { name: '运输层', path: "./detail/detail", chapter: "第五章", num: 0 }, { name: '应用层', path: "./detail/detail", chapter: "第六章", num: 0 }, { name: '网络安全', path: "./detail/detail", chapter: "第七章", num: 0 }, { name: '音视频服务', path: "./detail/detail", chapter: "第八章", num: 0 }, { name: '无线移动网络', path: "./detail/detail", chapter: "第九章", num: 0 }, { name: '下一代因特网', path: "./detail/detail", chapter: "第十章", num: 0 } ], weChatUserInfo: wx.getStorageSync('weChatUserInfo'), bmobUserInfo: wx.getStorageSync('bmobUserInfo'), testChooseItems: {}, answerInfo: {} }, onLoad: function() { that = this; that.getTestChooseItems(); }, onShow: function() { that.getAnswerInfo(); }, // 获得排名信息 getAnswerInfo: function() { wx.showToast({ title: '加载中..', icon: 'loading', duration: 10000 }) let query = Bmob.Query('test_error_item'); query.find().then(res =&gt; { let userArray = []; let correctCount = 0; res.forEach((item, index) =&gt; { if (item.userId.objectId == that.data.bmobUserInfo.objectId) { if (item.result) correctCount += 1; userArray.unshift(item); } }); wx.hideToast(); that.setData({ answerInfo: { correctCount: correctCount, itemCount: userArray.length, correctE: (correctCount / userArray.length).toFixed(2) } }); }).catch(); }, getTestChooseItems: function() { wx.showToast({ title: '加载中..', icon: 'loading', duration: 10000 }) let query = Bmob.Query('choose_item'); // 过滤掉课堂测试和模拟测试题目 query.equalTo("type", "!=", "课堂测试"); query.equalTo("type", "!=", "模拟测试"); query.find().then(res =&gt; { //console.log(res); for (var i = 0; i &lt; that.data.grids.length; i++) { let chapterChooseItems = [] for (var j = 0; j &lt; res.length; j++) { if (that.data.grids[i].chapter == res[j].series) { chapterChooseItems.unshift(res[j]); } } that.data.testChooseItems[that.data.grids[i].chapter] = chapterChooseItems; that.data.grids[i].num = chapterChooseItems.length; that.data.grids[i].path += '?ChooseItems=' + JSON.stringify(chapterChooseItems); } that.setData({ grids: that.data.grids, testChooseItems: that.data.testChooseItems }); //获得答题结果信息 that.getAnswerInfo(); }); } }) </td> 
 </tr> 
 </tbody> 
</table>

# 二、答题detail页面 #

1、获得test页面传过来的题目信息

2、解析并适配题目array object

3、解析用户提交的表单信息

4、因为后续还有错题练习，所以对表单信息分正确和错误类

5、遍历解析后的array，先从服务器删除已经存在的题目，然后上传新的答题

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/test/detail/detail.js &nbsp; var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../utils/util.js"); var that; var app = getApp(); &nbsp; Page({ &nbsp; /** * 页面的初始数据 */ data: { bmobUserInfo: wx.getStorageSync('bmobUserInfo'), chooseItemArray: [], chooseType: null, chooseSeries: null, error_answers: [], correct_answers: [] }, &nbsp; /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { that = this; // 获得题目信息 var items = Util.sortArrayObject(JSON.parse(options.ChooseItems), 'number_id'); &nbsp; var choose_items = new Array(); for (var i = 0; i &lt; items.length; i++) { if (i == 0) { that.setData({ chooseType: items[0].type, chooseSeries: items[0].series }); } choose_items[i] = { objectId: items[i].objectId, number_id: items[i].number_id, title: items[i].title, answer: items[i].answer, complain: items[i].complain, chooseItems: [{ name: 'a', value: items[i].choose_item_a }, { name: 'b', value: items[i].choose_item_b }, { name: 'c', value: items[i].choose_item_c }, { name: 'd', value: items[i].choose_item_d } ] } } that.setData({ chooseItemArray: choose_items }); }, formSubmit: function(e) { let answers = e.detail.value; for (var keyname in answers) { if (answers[keyname] == "") { wx.showToast({ title: '还有题没答噢~', duration: 3000 }); return; } } let index = 0; let error_answers = []; let correct_answers = []; for (var answer in answers) { if (answers[answer] != that.data.chooseItemArray[index].answer) { error_answers.unshift({ userId: that.data.bmobUserInfo.objectId, choose_item_id: that.data.chooseItemArray[index].objectId, answer: answers[answer], number_id: that.data.chooseItemArray[index].number_id, complain: that.data.chooseItemArray[index].complain, result: false }); } else { correct_answers.unshift({ userId: that.data.bmobUserInfo.objectId, choose_item_id: that.data.chooseItemArray[index].objectId, answer: answers[answer], number_id: that.data.chooseItemArray[index].number_id, complain: that.data.chooseItemArray[index].complain, result: true }); } index += 1; } that.setData({ error_answers: error_answers, correct_answers: correct_answers }); // 开始上传题目 that.deleteItems(that.data.correct_answers, that.data.error_answers); }, /** * 把答对的题目从错误表删除再上传错误的题目 * correct_answers是答对的题目 * error_answers是答错的题目 */ deleteItems: function(correct_answers, error_answers) { wx.showToast({ title: '提交中...', icon: 'loading', duration: 10000 }); let answers = correct_answers.concat(error_answers); &nbsp; answers.forEach((answer, index) =&gt; { //console.log(index); let query = Bmob.Query('test_error_item'); // 设置用户关联对象 let userIdPointer = Bmob.Pointer('_User'); let pointerUserId = userIdPointer.set(answer.userId); // 设置选择题关联对象 let chooseItemIdPointer = Bmob.Pointer('choose_item'); //关联字段 let pointerIdChooseItemId = chooseItemIdPointer.set(answer.choose_item_id); query.equalTo('userId', '==', pointerUserId); query.equalTo('choose_item_id', '==', pointerIdChooseItemId); query.find().then(res =&gt; { if (res.length &gt; 0) res.destroyAll().then(res1 =&gt; { //console.log(answers.length); if (index == answers.length - 1) { //console.log('if' + index); // 全部删除相同的题目后上传新的题目 that.uploadItems(correct_answers, error_answers); } }).catch(err =&gt; { wx.hideToast(); wx.showToast({ title: '提交失败', duration: 2500 }) }) else { if (index == answers.length - 1) { // 全部删除相同的题目后上传新的题目 that.uploadItems(correct_answers, error_answers); } } }).catch(err =&gt; { wx.hideToast(); //console.log(err); wx.showToast({ title: '提交失败', duration: 2500 }) }); }); }, //上传答题信息 uploadItems: function(correct_answers, error_answers) { var answers = correct_answers.concat(error_answers); let query = Bmob.Query('test_error_item'); answers.forEach((answer, index) =&gt; { query.set('answer', answer.answer); query.set('result', answer.result); query.save().then(res =&gt; { query.get(res.objectId).then(res1 =&gt; { // 设置用户关联对象 var userIdPointer = Bmob.Pointer('_User'); var pointerUserId = userIdPointer.set(answer.userId); res1.set('userId', pointerUserId); // 设置选择题关联对象 var chooseItemIdPointer = Bmob.Pointer('choose_item'); //关联字段 var pointerIdChooseItemId = chooseItemIdPointer.set(answer.choose_item_id); res1.set('choose_item_id', pointerIdChooseItemId); res1.save(); // 如果到数组的最后一个 if (index == answers.length - 1) { wx.hideToast(); wx.showToast({ title: '提交成功...', duration: 2500 }); setTimeout(function() { var mAnswers = Util.sortArrayObject(answers, 'number_id'); &nbsp; // 结束当前页面转到 wx.redirectTo({ url: '../answer/answer?mAnswers=' + JSON.stringify({ chooseType: that.data.chooseType, chooseSeries: that.data.chooseSeries, chooseItemArray: that.data.chooseItemArray, answers: mAnswers }) }); }, 2500); } }).catch(); }).catch(); }); } }) </td> 
 </tr> 
 </tbody> 
</table>

# 三、答卷answer页面 #

1、解析detail页面传过来的信息

2、计算答对的题目，在渲染时计算答题获得的分数

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> // pages/test/answer/answer.js &nbsp; var Bmob = require("../../../utils/Bmob-1.6.3.min.js"); var Util = require("../../../utils/util.js"); var that; var app = getApp(); Page({ /** * 页面的初始数据 */ data: { mAnswers:null, correctAnswerCount:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { that = this; that.setData({mAnswers:JSON.parse(options.mAnswers)}); let correctCount = 0; that.data.mAnswers.answers.forEach((item)=&gt;{ if (item.result) correctCount += 1; }); that.setData({ correctAnswerCount: correctCount}); } }) </td> 
 </tr> 
 </tbody> 
</table>

test页面的功能模块就是这样了，比较简单。下篇更新“我的”模块的页面设计以个人信息的修改。