乐趣区

关于javascript:用云开发搭建的微信答题小程序v10

jiezi

近来百无聊赖，遂抽空做了一个答题小程序的系列教程，以及分享源码，是用云开发搭建的微信答题小程序 v1.0。

界面截图

该答题小程序大抵如下图：

构造层级

次要程序由 3 个界面组成，别离是 index，test 以及 result，构造层级如下图所示：

index：蕴含开始答题界面的页面布局与款式，以及 js 逻辑；
test：蕴含答题界面的页面布局与款式，以及 js 逻辑；
results：蕴含答题问题界面的页面布局与款式，以及 js 逻辑；
app：全局配置文件，全局变量等；
style：微信小程序的根本 UI 款式；
云开发数据库：存储相干题目数据。

1、index 开始界面

次要性能是首页大图和信息的展现、按钮跳转以及分享。

（1）按钮跳转要害代码，就是 catchtap 点击事件与 goToTest 事件处理函数。

.wxml

<view catchtap="goToTest">
    <button class='cu-btn bg-red round block lg'> 开始答题 </button>
</view>

.js

// 事件处理函数
  goToTest: function() {
    wx.navigateTo({url: '../test/test'})
  },

（2）分享实现，在 button 上应用 open-type=”share” 属性，并且在页面 js 外面配置 onShareAppMessage。

.wxml

<button class="cu-btn line-red round block lg margin-top" open-type="share"> 举荐给好友 </button>

.js

onShareAppMessage(res) {
    return {title: '@你，快来参加消防安全常识答题流动吧~'}
  },

2、test 答题界面

答题界面须要做的事件有：

  • 与数据库连贯，获取题目数据；
  • 选中选项的前端交互；
  • 点击切换到下一题；
  • 零碎主动断定答题后果，计算得分；
  • 提交得分到数据库进行保留；
  • 答题完结，跳转至答题问题界面。

（1）与数据库连贯，获取题目数据；

// 获取题库 - 函数定义
  getQuestionList() {
    // 显示 loading 提示框
    wx.showLoading({title: '拼命加载中'});
    // 构建查问条件
    activityQuestion.where({
      // 指定查问条件，返回带新查问条件的新的汇合援用
      true: _.exists(true)
    })
    .get()
    .then(res => {
      // 获取汇合数据，或获取依据查问条件筛选后的汇合数据。console.log('[ 云数据库] [activityQuestion] 查问胜利')
      console.log(res.data)
      let data = res.data || [];
      
      // 将数据从逻辑层发送到视图层，艰深的说，也就是更新数据到页面展现
      this.setData({
        questionList:data,
        index: 0
      });

      // 暗藏 loading 提示框
      wx.hideLoading();})
  },

（2）选中选项的前端交互；

.wxml

<radio-group class="radio-group" bindchange="radioChange">
      <label class="radio my-choosebox" wx:for="{{questionList[index].option}}" wx:for-index="key"  wx:for-item="value" wx:key="index">
        <radio value="{{key}}" checked="{{questionList[index].checked}}" />
        <text class="margin-left-xs">{{value}}</text>
      </label>
    </radio-group>

.js

// 选中选项事件
  radioChange(e){this.data.chooseValue[this.data.index] = e.detail.value;
  },

（3）点击切换到下一题；

.wxml

<button bindtap='nextSubmit' class="cu-btn bg-red round lg" wx:else> 下一题 </button>

.js

// 下一题 / 提交 按钮
  nextSubmit(){

    // 如果没有抉择
    if (this.data.chooseValue[this.data.index] == undefined || this.data.chooseValue[this.data.index].length == 0) {  
      return wx.showToast({
        title: '请抉择答案!',
        icon: 'none',
        duration: 2000
      })
    }

    // 判断所抉择的选项是否为正确答案
    this.chooseJudge();

    // 判断是不是最初一题
    this.lastJudge();},

// 判断是不是最初一题
  lastJudge(){if (this.data.index < this.data.questionList.length - 1) {
      // 如果不是最初一题，则切换下一题
      let index = this.data.index + 1;
      this.setData({index})
    } else {
      // 如果是最初一题，则提交答卷
      this.addExamRecord()}
  },

（4）零碎主动断定答题后果，计算得分；

// 判断所抉择的选项是否为正确答案
  chooseJudge(){var trueValue = this.data.questionList[this.data.index]['true'];
    var chooseVal = this.data.chooseValue[this.data.index];
    if (chooseVal.toString() != trueValue.toString()) {
      // 答错则记录错题
      this.data.wrong++;
      this.data.wrongListSort.push(this.data.index);
      this.data.wrongList.push(this.data.questionList[this.data.index]._id);
    }else{
      // 答对则累计总分
      this.setData({totalScore: this.data.totalScore + 5})
    }
  },

（5）提交得分到数据库进行保留；

// 提交答卷
  addExamRecord(){
    wx.showLoading({title: '提交答卷中'});
    let examResult = {
      wrong: this.data.wrong,
      totalScore: this.data.totalScore
    };
    activityRecord.add({
      data: {
        ...examResult,
        createDate: db.serverDate()}
    }).then(res => {

      // 跳转到答题后果页，查看问题
      wx.redirectTo({url: '../results/results?id=' + res._id});

      wx.hideLoading();})
  }

（6）答题完结，跳转至答题问题界面。

// 跳转到答题后果页，查看问题
 wx.redirectTo({url: '../results/results?id=' + res._id});

3、results 答题问题界面

次要是查问答题状况和显示得分。在答题页面的时候，实现了提交得分到数据库进行保留。那么这里就能够从数据库中获取了。

.js

Page({
  data: {
    totalScore: null,
    wrong: 0,
    zql: null
  },

  onLoad(options) {
    // 查看答题问题
    this.getExamResult(options.id);
  },

  // 零碎主动判分
  getExamResult(id){
    wx.showLoading({title: '零碎判分中'});
    activityRecord
    .doc(id)
    .get()
    .then(res => {
      let examResult = res.data;
      
      let {wrong, totalScore} = examResult;
      this.setData({
        totalScore,
        wrong,
        zql: (20-wrong)/20*100
      })

      wx.hideLoading();})
  },
})

好了，用云开发搭建的微信答题小程序，v1.0 版本至此完结，源码曾经提交到 gitee，撒花~

下一个版本 v2.0 正在在在开发中 ……

退出移动版