答题微信小程序实现（5）：大功告成，整个模板，题库导入/切换/积分/选择对错判断/闯关成功

哎呀妈呀，总算弄完了，可以干点别的去了。

第1个是初始页面，第2个是选错的样子，选对了是绿色，第3个是全答完了，跳转题库告罄的页面，第四个结构。
data文件夹下面有一个post-data.js文件，pages下面是index、tiaozhuan文件夹。
其他的不用管，跟程序没关系。
一个一个来。先看post-data.js。

var local_database = [{
  "name": "收取关山五十州上句是什么？",
  "daan": "A",  
  "content": ["男儿何不带吴钩", "天若有情天亦老", "大漠沙如雪", "主父西游何时归"]
},
{
  "name": "危乎高哉上句是什么？",
  "daan": "B",
  "content": ["明朝散发弄扁舟", "蜀道难，难于上青天", "床前明月光", "吾爱孟夫子"]
},
{
  "name": "感时花溅泪下句是什么？",
  "daan": "C",
  "content": ["也无风雨也无晴", "明月几时有", "恨别鸟惊心", "老夫聊发少年狂"]

}
]
module.exports = {
  postList: local_database
}

就三道题。这个题库是json数组格式的，require可以调用小程序内部的网页，但也可以调用外部网页，不过先要在微信小程序的设置里面检校安全域名，调用外部网页有一个好处，就是题库可以在线更新。这个题库的模板可以通过python生成，用python写几行代码批处理一下，估计用excel也能实现，以后再写一篇用python处理题库的文章吧。
tiaozhuan文件夹下面一个tiaozhuan的页面，没啥，就是wxml里面有一行。

<text>题库告罄text>

主要是index这个。
index.wxml代码：

<scroll-view>
 <view>{{postList[index].name}}view>
 <view hidden="{{ny}}">{{postList[index].daan}}view>
scroll-view>
<scroll-view>
 <button id='A' bindtap="btnOpClick" style="background-color: {{bcA}};">{{postList[index].content[0]}}button>
 <button id='B' bindtap="btnOpClick" style="background-color: {{bcB}};">{{postList[index].content[1]}}button>
 <button id='C' bindtap="btnOpClick" style="background-color: {{bcC}};">{{postList[index].content[2]}}button>
 <button id='D' bindtap="btnOpClick" style="background-color: {{bcD}};">{{postList[index].content[3]}}button>
scroll-view>
<button bindtap="lastQuestion">上一题button>
<button bindtap="nextQuestion">下一题button>
<button bindtap="xianshi">显示答案button>
<text>积分：每答对一题积2分，目前得分{{defen}}text>

这个主要看设定了一个变量index，这个是序号，然后为了隐藏答案，设定了hidden的值，它的默认值是true。四个函数，btnOpClick、lastQuestion、nextQuestion、xianshi。这玩意说不太清楚，照着写一遍就都弄明白了。

index.js代码：

var postData = require("../../data/post-data.js");
Page({
  data: {
    // text:"这是一个页面"
    postList: postData.postList,
    index:0,
    bc_default: '#FBFBFB',
    bc_right: '#98FB98',
    bc_wrong: '#FF99B4',
    bcA: '',
    bcB: '',
    bcC: '',
    bcD: '',
    ny:'true',
    defen:0
  },

  nextQuestion: function () {
    var that = this;
    if (that.data.index 1) {
      this.setData({
        index: that.data.index + 1,
        bcA: that.data.bc_default,
        bcB: that.data.bc_default,
        bcC: that.data.bc_default,
        bcD: that.data.bc_default,
        ny:'true'

      });
    }
  },
  lastQuestion: function () {
    var that = this;
    if (that.data.index > 0) {
      this.setData({
        index: that.data.index - 1
      });
    }
  },
  btnOpClick: function(e){
    var that = this;
    var select = e.currentTarget.id;
    var jieg = postData.postList[that.data.index].daan;
    if (select==jieg){
      if (that.data.index 1){
        if (select == 'A') {
          this.setData({ bcA: that.data.bc_right });
        }
        else if (select == 'B') {
          this.setData({ bcB: that.data.bc_right });
        }
        else if (select == 'C') {
          this.setData({ bcC: that.data.bc_right });
        }
        else if (select == 'D') {
          this.setData({ bcD: that.data.bc_right });
        }
        that.nextQuestion();
        this.setData({
          defen: that.data.index*2
        })
      }
      else{
        if (select == 'A') {
          this.setData({ bcA: that.data.bc_right });
        }
        else if (select == 'B') {
          this.setData({ bcB: that.data.bc_right });
        }
        else if (select == 'C') {
          this.setData({ bcC: that.data.bc_right });
        }
        else if (select == 'D') {
          this.setData({ bcD: that.data.bc_right });
        }
        that.gotonext();    
      }
    }
    else {
      if (select == 'A') {
        this.setData({ bcA: that.data.bc_wrong });
      }
      else if (select == 'B') {
        this.setData({ bcB: that.data.bc_wrong });
      }
      else if (select == 'C') {
        this.setData({ bcC: that.data.bc_wrong });
      }
      else if (select == 'D') {
        this.setData({ bcD: that.data.bc_wrong });
      }
      else if (select == 'E') {
        this.setData({ bcE: that.data.bc_wrong });
      }
    }
  },
  gotonext: function(){
    wx.navigateTo({
      url: './../tiaozhuan/tiaozhuan',
    })
  },
  xianshi: function(){
    this.setData({
      ny:''
    })
  }
})

对我来说，这个代码挺长的了。
data里面给所有的值一个初始化。
上一题LastQuestion和下一题Next Question在答题微信小程序（4）里面已经都说过了。这里就不重复了。注意that.data.index的用法，必须得在前面加上that.data才行，直接上index不行，同理还有that.data.bc_default等，还有postData.postList.length 获取题库长度，可以写成that.data.postList.length，但不能写成postList.length。这种固定用法，知道了就觉得也就那么回事，但不知道的时候挺闹心，不知道自己哪里出错了，为什么运行不出来。
btnOpClick这个函数挺长的，不过只要知道它的规律就很好理解了，就是对正确答案的判断，选择题有ABCD四个选项，点击对了就把button按钮的颜色改成绿色，’#98FB98’；错了就把button按钮的颜色改成红色，#FF99B4；进入下一题的时候把button按钮的颜色改回#FBFBFB。答完本题之后，that.nextQuestion()，调用nextQuestion函数，进入下一题。不过要是最后一题的时候，答完之后就要进入闯关成功的页面了，that.gotonext()，进入tiaozhuan页面， wx.navigateTo。
我觉得if语句挺好理解的。这个index.js中有点难的是下面这两行。
var select = e.currentTarget.id;
声明select=点击对象的id，这个id在index.wxml中设置了。
var jieg = postData.postList[that.data.index].daan;
声明当前题的答案=postData.postList[that.data.index].daan，注意that.data的用法。
我在撸这个答题程序代码的时候，主要就是卡在了currentTarget和that.data上了，它主要是一个固定用法的参数传递，可能是我的基础太薄弱了吧，不过多写两次，明白了就没问题了。
所以说还是要多练。
我估计我再写两篇，就能把这个微信答题小程序的专题告结了，一篇是wxml的设计，跟前端里的css一样吧，把页面设计得好看一些，现在的压根就没有设计。再一篇就是python对题库的处理，把一篇文档处理成json格式的。
这些完事儿的话，就去做一个网络地图，然后学习数据挖掘分析。
还是保持这个习惯吧，不要一上来就硬啃，把难的东西拆解开来，一步一步攻克，一点一点实现。循序渐进。忽然想回学校读书去了。

参考源码来源于这个网站。

http://www.henkuai.com/forum-67-1.html