当前位置：首页 > article >正文

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

article 2025/3/17 12:38:19

页面展示：

在这里插入图片描述

概述

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

小程序界面布局

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'), //获取用户id
    questionBankId: wx.getStorageSync('questionBankId'), //题库id
    questionBankName: 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=true
      if (!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) {

    }
  })
}