微信小程序刷题逻辑实现：技术揭秘与实践分享

页面展示：

在这里插入图片描述

概述

在当今数字化学习的浪潮中，微信小程序以其便捷性和实用性，成为了众多学习者刷题备考的得力工具。今天，我们就来深入剖析一个微信小程序刷题功能的实现逻辑，从代码层面揭开其神秘面纱。

小程序界面布局

1. 自定义顶部导航

在小程序的顶部，我们设置了一个自定义导航栏，方便用户进行页面跳转。代码如下：

<!--自定义顶部导航 start-->
<view class="top-nav"><t-icon bind:click="toLastPage" class="icon" name="chevron-left" size="50rpx" />
</view>
<!--自定义顶部导航 end-->

这里使用了 t-icon 组件，当用户点击向左箭头图标时，会触发 toLastPage 方法，实现返回上一页的功能。

2. 顶部信息展示

顶部区域还展示了题库名称和当前题目的类型：

<!--顶部 start-->
<view class="top"><view class="left"><view class="title">{{questionBankName}}</view></view><view class="right">{{questionList[currentIndex].questionType}}</view>
</view>
<!--顶部 end-->

通过 questionBankName 显示题库名称，questionList[currentIndex].questionType 显示当前题目的类型。

3. 题目内容展示

这是刷题的核心区域，显示题目内容和选项：

<!--题目内容 start-->
<view class="content"><view class="title">{{questionList[currentIndex].questionContent}}</view><view class="option-list"><view class="option   {{questionList[currentIndex].isDone ? (questionList[currentIndex].selectedOptionValue === questionList[currentIndex].questionAnswer ? (index === selectedOption ? 'option-right' : '') : (index === selectedOption ? 'option-wrong' : '')) : ''}}" wx:for="{{questionList[currentIndex].questionOptionsJSON}}" wx:key="*this" bindtap="handleOptionClick" data-index="{{index}}">{{item}}</view></view>
</view>
<!--题目内容 end-->

这里使用 wx:for 指令遍历题目选项，用户点击选项时会触发 handleOptionClick 方法。同时，根据题目是否已做以及答案是否正确，动态添加不同的样式类，如 option-right 和 option-wrong。

4. 底部功能栏

底部功能栏提供了一些常用操作，如上下题切换、标记题目等：

<!--底部 start-->
<view class="bottom"><view class="function-list"><view class="function-item" wx:for="{{ bottomFunctionList }}" wx:for-item="item" wx:for-index="id" wx:key="id"><van-icon bindtap="{{item.tap}}" class="icon" name="{{item.icon}}" /><view class="text">{{item.text}}</view></view></view>
</view>
<!--底部 end-->

使用 wx:for 遍历 bottomFunctionList 数组，根据数组中的配置显示不同的图标和文字，点击图标会触发相应的方法。

5. 选项卡弹出框

选项卡弹出框用于快速切换题目：

<!--选项卡弹出框 start-->
<t-popup visible="{{bottomChoiceShow}}" placement="bottom"><view class="prop-choice"><view class="prop-top"><van-icon bindtap="bottom_choice_close" class="icon" name="arrow-down" /><view class="title">选题卡</view></view><view class="prop-content"><view class="button-list"><t-button  bindtap="choice_quetion" data-id="{{id}}" wx:for="{{ questionList }}" wx:for-item="item" wx:for-index="id" wx:key="id" class="button" theme="{{item.isDone?(item.selectedFlag?'primary':'danger'):'light'}}" size="small">{{id+1}}</t-button></view></view></view>
</t-popup>
<!--选项卡弹出框 end-->

点击相应按钮可打开或关闭弹出框，点击题目按钮会切换到对应的题目。

小程序逻辑实现

1. 数据初始化

在 onLoad 方法中，我们进行了数据的初始化操作：

onLoad(options1) {//初始化数据this.setData({bottomFunctionList: bottomFunctionList_data, //底部功能userId: wx.getStorageSync('userId'), //获取用户idquestionBankId: wx.getStorageSync('questionBankId'), //题库idquestionBankName: wx.getStorageSync('questionBankName'), //题库名称})//mock数据if (mock_flag) {const questionListWithStatus = questionList_mock.map(question => ({...question,questionOptionsJSON: JSON.parse(question.questionOptions), //序列化选项isDone: false, //是否做过selectedOptionValue: null, //选择的答案selectedFlag: '', //对错}));this.setData({questionList: questionListWithStatus,});}//网络请求if (!mock_flag) {this.http_question_findAllByQuestionBankId() //题目列表}
}

这里从本地存储中获取用户和题库信息，根据 mock_flag 的值决定是使用模拟数据还是进行网络请求获取题目列表。

2. 题目操作逻辑

上下题切换：通过 bottom_pre 和 bottom_next 方法实现上下题的切换：

// 上一题
bottom_pre() {if (this.data.currentIndex > 0) {this.setData({currentIndex: this.data.currentIndex - 1});}
}
// 下一题
bottom_next() {if (this.data.currentIndex < this.data.questionList.length - 1) {this.setData({currentIndex: this.data.currentIndex + 1});}
}

选项点击处理：用户点击选项时，会触发 handleOptionClick 方法，该方法会记录用户选择的选项，并调用 submitAnswer 方法提交答案：

//当前点击的选项
handleOptionClick(e) {this.setData({selectedOption:e.currentTarget.dataset.index})//设置选中的选项this.data.questionList[this.data.currentIndex].selectedOptionValue = this.data.questionList[this.data.currentIndex].questionOptionsJSON[e.currentTarget.dataset.index]//提交答案this.submitAnswer()
}

答案提交与判断：submitAnswer 方法会判断用户是否选择了选项，若选择了则标记题目为已做，并判断答案的对错：

//提交答案
submitAnswer() {if (this.data.selectedOption !== null) {//标记题目为已做this.markQuestionAsDone()//判断对错if (this.data.questionList[this.data.currentIndex].selectedOptionValue === this.data.questionList[this.data.currentIndex].questionAnswer) {//设置对错为对this.data.questionList[this.data.currentIndex].selectedFlag=trueif (!mock_flag) {//积分+1}} else {if (!mock_flag) {//加入错题集,增加次数this.http_userWrongQuestion_add()}}} else {wx.showToast({title: '请先选择一个选项',icon: 'none'});}
}

3. 网络请求

获取题目列表：通过 http_question_findAllByQuestionBankId 方法根据题库 ID 获取所有题目：

//根据题库id查询所有题目
http_question_findAllByQuestionBankId() {getRequest(baseUrl + "/front/question/findAllByQuestionBankId", {questionBankId: this.data.questionBankId}).then(res => {if (res.code == 200) {const questionList = res.data.map(question => ({...question,questionOptionsJSON: JSON.parse(question.questionOptions), //序列化选项isDone: false, //是否做过selectedOptionValue: null, //选择的答案selectedFlag: '', //对错}));this.setData({questionList: questionList,})}})
}

加入错题集：通过 http_userWrongQuestion_add 方法将错题加入错题集：

//加入错题集,增加次数
http_userWrongQuestion_add() {postRequest(baseUrl + "/front/userWrongQuestion/add", {userId: this.data.userId,questionId: this.data.questionList[this.data.currentIndex].questionId}).then(res => {if (res.code == 200) {}})
}