答题⼩程序实现（5）：⼤功告成，整个模板，题库导⼊切换积分选择对错 判断闯关成功
哎呀妈呀，总算弄完了，可以⼲点别的去了。
第1个是初始页⾯，第2个是选错的样⼦，选对了是绿⾊，第3个是全答完了，跳转题库告罄的页⾯，第四个结构。
data⽂件夹下⾯有⼀个post-data.js⽂件，pages下⾯是index、tiaozhuan⽂件夹。
其他的不⽤管，跟程序没关系。
⼀个⼀个来。先看post-data.js。
就三道题。这个题库是json数组格式的，require可以调⽤⼩程序内部的⽹页，但也可以调⽤外部⽹页，不过先要在⼩程序的设置⾥⾯检校安全域名，调⽤外部⽹页有⼀个好处，就是题库可以在线更新。这个题库的模板可以通过python⽣成，⽤python写⼏⾏代码批处理⼀下，估计⽤excel也能实现，以后再写⼀篇⽤python处理题库的⽂章吧。
tiaozhuan⽂件夹下⾯⼀个tiaozhuan的页⾯，没啥，就是wxml⾥⾯有⼀⾏。
主要是index这个。 index.wxml代码：
var local_database = [{
"name": "收取关⼭五⼗州上句是什么？",
"daan": "A",
"content": ["男⼉何不带吴钩", "天若有情天亦⽼", "⼤漠沙如雪", "主⽗西游何时归"]
},
{
"name": "危乎⾼哉上句是什么？",
"daan": "B",
"content": ["明朝散发弄扁⾈", "蜀道难，难于上青天", "床前明⽉光", "吾爱孟夫⼦"]
},
{
"name": "感时花溅泪下句是什么？",
"daan": "C",
"content": ["也⽆风⾬也⽆晴", "明⽉⼏时有", "恨别鸟惊⼼", "⽼夫聊发少年狂"]
}
]
postList : local_database }
<text >题库告罄</text >
<scroll-view>
<view>{{postList[index].name}}</view>
<view hidden="{{ny}}">{{postList[index].daan}}</view>
</scroll-view>
<scroll-view>
<button id='A'bindtap="btnOpClick">{{postList[index].content[0]}}</button>
<button id='B'bindtap="btnOpClick">{{postList[index].content[1]}}</button>
<button id='C'bindtap="btnOpClick">{{postList[index].content[2]}}</button>
<button id='D'bindtap="btnOpClick">{{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 });
}
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 });
}
}
}
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.len
gth，但不能写成postList.length。这种固定⽤法，知道了就觉得也就那么回事，但不知道的时候挺闹⼼，不知道⾃⼰哪⾥出错了，为什么运⾏不出来。
btnOpClick这个函数挺长的，不过只要知道它的规律就很好理解了，就是对正确答案的判断，选择题有ABCD四个选项，点击对了就把button按钮的颜⾊改成绿⾊，’#98FB98’；错了就把button按钮的颜⾊改成红⾊，#FF99B4；进⼊下⼀题的时候把button按钮的颜⾊改回#FBFBFB。答完本题之后，Question()，调⽤nextQuestion函数，进⼊下⼀题。不过要是最后⼀题的时候，答完之后就要进⼊闯关成功的页⾯了，xt()，进⼊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格式的。
这些完事⼉的话，就去做⼀个⽹络地图，然后学习数据挖掘分析。
还是保持这个习惯吧，不要⼀上来就硬啃，把难的东西拆解开来，⼀步⼀步攻克，⼀点⼀点实现。循序渐进。忽然想回学校读书去了。
参考源码来源于这个⽹站。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议