答题微信小程序实现（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 < postData.postList.length - 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 < postData.postList.length-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