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

展开阅读全文

没有更多推荐了,返回首页