頁面展示：

概述

在當今數字化學習的浪潮中，微信小程序以其便捷性和實用性，成為了眾多學習者刷題備考的得力工具。今天，我們就來深入剖析一個微信小程序刷題功能的實現邏輯，從代碼層面揭開其神秘面紗。

小程序界面布局

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) {}})
}

總結

通過以上代碼和邏輯的實現，我們完成了一個簡單的微信小程序刷題功能。從界面布局到數據初始化，再到題目操作和網絡請求，每個環節都緊密配合，為用戶提供了一個流暢的刷題體驗。希望這篇文章能幫助你更好地理解微信小程序刷題邏輯的實現，如果你有相關需求，不妨參考這些代碼進行開發。