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

最近颇有点闲，所以抽时间做了一个答题的小程序，大致如下图：
在这里插入图片描述
主要程序由3个界面组成，分别是index，QA以及End，结构层级如下图所示：

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

index开始界面

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

个人信息获取
在微信小程序最开始给的例子中，是用的getUserInfo的API调用的个人信息，但是需要用户授权且后续版本更新之后不再支持
在这里插入图片描述
所以我换成了使用open-data直接展示用户信息，即获取用户的头像和名字，代码如下：

<view class="userinfo">
      <open-data class="userinfo-avatar" mode="cover" type="userAvatarUrl"></open-data>
      <open-data class="userinfo-nickname" type="userNickName"></open-data>
</view>

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

按键跳转

<view bindtap="StartButton" class="usermotto">
      <view class="button-sp-area">
        <button class="weui-btn" type="default" plain="true">开始</button>
      </view>
</view>

//开始按键跳转
  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,
    })

好了，完结撒花~

NoJerry呀~

发布了8 篇原创文章 · 获赞 16 · 访问量 5736

私信关注