微信小程序（1）-简单答题小程序

最近颇有点闲，所以抽时间做了一个答题的小程序，大致如下图：

主要程序由3个界面组成，分别是index，QA以及End，结构层级如下图所示：

Data.js：存储相关题目数据
End：包含结束界面的js逻辑以及相关布局
QA：包含答题界面的js逻辑以及相关布局
index：包含开始界面的js逻辑以及相关布局
app：一些全局的导航栏（在这里没有使用）或者属性globalData以及相关配置
style：github上开源的微信基本UI样式，点这里

index开始界面

主要功能是个人信息的获取和按键跳转

个人信息获取
在微信小程序最开始给的例子中，是用的getUserInfo的API调用的个人信息，但是需要用户授权且后续版本更新之后不再支持

所以我换成了使用open-data直接展示用户信息，即获取用户的头像和名字，代码如下：

可谓是十分简单有效了^ ^

按键跳转

      
        开始
      

//开始按键跳转
  StartButton: function(){
    wx.navigateTo({
      url: '../QA/QA'
    })
  }

以上代码关键的就是bindtap与StartButton函数

StartButton函数定义了一个跳转，当函数被调用的时候就会跳转到指定的页面

bindtap当用户点击该组件时会自动在page中寻找对应的事件处理函数

QA答题界面

答题界面需要

• 与题库的连接
• 判定答题结果
• 跳转下一题

与题库的连接

var local_data = [
  {
    question: "截至风城行动，彩虹六号：围攻总共出了多少个特勤干员？",
    answers: ['40', '42', '44', '46'],
    right_answer: "C"
  }]

首先是定义相关的题目数组local_data，数组中的每一个元素包含了问题、答案以及正确答案

module.exports= {
  questions: local_data
}

然后将所有的题库模块化并暴露对外接口questions（题库是定义在单独的Data.js文件中的~）

在QA中，需要首先获取数据库 var Data = require("../Data/Data.js")

然后定义相关数据（建议成绩和总数在app.js中定义为全局数据globalData，便于在任何一个页面调用）

data: {
    gradetext: '成绩：',
    grade: 0,//成绩
    questionnum: 0,//总数
    questions: Data.questions,//题库
    index: 0,//下标
    canAnswer: '',//是否可以答题
  },

定义questions: Data.questions,即可以完成与题库的连接

判定答题结果

//选项点击操作
  Click: function(e){
    //获取点击元素的id
    var select = e.currentTarget.id;
    //获取点击问题的正确答案
    var right_answer = Data.questions[this.data.index].right_answer;
    //答案正确
    if(select == right_answer){
      this.setData({
        grade: this.data.grade+1,//得分+1
      })
      app.globalData.grade = this.data.grade;
    }
    //不是最后一道题，跳转下一题
    if (this.data.index < this.data.questionnum - 1){
      this.NextQuestion();
    }
    //最后一道题
    else if (this.data.index == this.data.questionnum - 1){
      this.setData({
        canAnswer:'true'//禁止答题
      })
      this.GoEnd();
    }
  },

var select = e.currentTarget.id;在QA.wxml文件中，每一个按钮button都定义了一个id，如选项A的id为A，便于后续进行判定

canAnswer:'true'这个是写程序时踩的坑，不能答题的思路是禁用所有的按钮button，一般禁用按钮是使用按钮的disable属性，disabled="{{canAnswer}}",当disabled= "true"时按钮被禁用，反之当disabled = "false"时按钮被重新启用 （我是这么想的哈哈），但是经实验发现，不管canAnswer的值是true还是false按钮都是禁用状态，只有值为null即disabled为空值的时候，按钮才会被重新启用。

跳转下一题

//跳转下一道题
  NextQuestion: function(){
    //不是最后一道题
    if (this.data.index < this.data.questionnum - 1){
      this.setData({
        index: this.data.index + 1,
      })
    }
    //最后一道题
    if (this.data.index == this.data.questionnum - 1) {
      this.setData({
        index: this.data.index,
      })
    }
  },
  //跳转结束页面
  GoEnd:function(){
    wx.navigateTo({
      url: '../End/End',
    })
  },

没什么好写的大家都能看得懂~

End结束界面

主要就是globalData的传递，根据值显示不同的结果

//app.js
globalData: {
    grade: 0,
    questionnum: 40,
  }

//end.js
onLoad: function (options) {
    this.setData({
      getgrade: app.globalData.grade,
      getquestionnum: app.globalData.questionnum,
    })

好了，完结撒花~