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

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

修复登录答题微信小程序源码下载
功能简介: 1.答题有奖 3.后台含有区间余额区间奖励配置: 4.签到邀请好友获取答题卡, 更多功能具体自己研究,支持用户提现等后台系统设置: 基础设置.奖励管理.分享配置题目管理: 题目增加.题 ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序开发学习2（模板与配置）
微信小程序开发学习2(模板与配置) 1.学习目标能够使用WXML模板语法渲染页面结构能够使用WXSS样式美化页面结构能够使用app,json对小程序进行全局性配置能够使用page.json对小 ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
答题微信小程序实现（7）：python3将题库处理成json格式的。
通常来说,我们写答题程序的时候,拿到手的题库不会是json格式的,而是word或txt.pdf就像考试卷子那样的. 这里写一下用python3将普通题库处理成json格式,选择python3的原因是, ...
云答题微信小程序实现前端加后台管理
1.为什么要使用微信云开发微信云开发自己是不需要域名(备案的域名),服务器,搭建数据库等. 2.使用技术微信小程序+相关云接口 java (SpringBoot+Maven) 后台管理使用 VUE ...
微信小程序模块化开发 include与模板开发 template
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 1. include 是引用整个wxml文件,我通常会配合js,css一起使用: 使用场景,需要封装 ...
微信小程序UI组件、开发框架、实用库...
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
【微信】微信小程序应用内的页面跳转在添加了tab以后就跳转不成功的问题解决...
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了原本代码如下: //事件处理函数bindViewTap: function() {wx.navi ...
微信小程序开发笔记1——使用npm脚本实现自动化切换环境配置
博客更新地址啦-,欢迎访问:https://jerryyuanj.github.io/blog 写在前面有过小程序开发经验的都知道,在小程序的生态环境中,是很难做到像其他项目那样完全的CI的,因为我 ...

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

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

最新文章

热门文章