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

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

页面展示:

在这里插入图片描述

概述

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

小程序界面布局

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-rightoption-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_prebottom_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) {

    }
  })
}

总结

通过以上代码和逻辑的实现,我们完成了一个简单的微信小程序刷题功能。从界面布局到数据初始化,再到题目操作和网络请求,每个环节都紧密配合,为用户提供了一个流畅的刷题体验。希望这篇文章能帮助你更好地理解微信小程序刷题逻辑的实现,如果你有相关需求,不妨参考这些代码进行开发。


http://www.kler.cn/a/588352.html

相关文章:

  • sensor数据在整个rk平台的框架流程是怎么样,
  • 业务幂等性设计的六种方案
  • 蓝桥杯[阶段总结] 二分,前缀和
  • 华为云容器引擎应用场景
  • 游戏成瘾与学习动力激发研究——多巴胺脉冲式释放与奖赏预测误差机制的神经科学解析
  • ccf3501密码
  • 计算机操作系统进程(4)
  • 【网络】什么是反向代理Reverse Proxies?
  • matlab中如何集成使用python
  • Python中在类中创建对象
  • 基于Spring Boot的航司互售系统
  • Java中队列(Queue)和列表(List)的区别
  • 基于ssm+vue汽车租赁系统
  • 量化交易学习笔记02:双均线策略
  • java项目之基于ssm的药店药品信息管理系统(源码+文档)
  • TCP/IP协议中三次握手(Three-way Handshake)与四次挥手(Four-way Wave)
  • 面试系列|蚂蚁金服技术面【1】
  • C++那些事儿:访问控制与友元函数的奇妙冒险
  • C语言 —— 此去经年梦浪荡魂音 - 深入理解指针(卷一)
  • Vue开发者工具(VueDevtools)下载与安装