微信小程序学习（二）考研力模型修改

声明

  本篇博客继承于微信小程序学习（一）心理测试题库改造，做了一些修改，因与前一篇想法相差太大，所以重新写了一篇。
  如无意外，以后的博客写作都会以这种背景、分析、行动、收获的大纲（star法则）去写，我认为这是一种非常好的习惯。

前言

  本来上一篇博客结束，我就应该开始自己的正事，开发一个内容向小程序。不会？看课啊！啃文档啊！奈何这个课，以实践项目为主，理论讲得不透彻，看起来太陡峭了。这个开发者文档，详细是很详细，但我串不起来啊！摔！
  一筹莫展之际，灵光乍现，我应该去找本书看看啊！打开了自己的学习文件夹，哎？这有一本《微信小程序开发入门与实践》？入门好啊入门好，看了看序章，需要一定的CSS和JavaScript基础？™的，学！
  于是，在经历了七天的HTML+CSS+JavaScript基础入门课后，在走马观花看了一遍菜鸟教程后，我又打开了这本书，一泻千里，不能自拔！读书真是件快乐的事情！在云编程到已经能实现多个页面之间交互后，我寻思着也该落地了，OK，就你了！考研力模型！

一、分析

  1、可以用wx:for语法来解决小程序存在着不定长选择题显示错乱的问题
  2、想用这个语法，得先有一个符合规则的数组，可能需要整理数据
  3、把业务数据放在app.js里有点蠢，直接放在页面的js文件里即可

二、行动

1、数据检查

questions: [
	{ "question": "关于学习能力，以下哪种情况最符合你？", "option": { "A": "学习时不知道如何着手，很恐慌", "B": "自己学起来还好或者需要有人辅导和监督", "C": "只要给我资料、视频和书，我全部可以自己学", "D": "我学什么东西都很快，所有考试学一段时间都觉得没问题"}, "score": { "A": -1, "B": 0, "C": 1, "D": 2 } }, 
	{ "question": "关于考研投入，以下哪种情况最符合你？", "option": { "A": "一边找工作/实习，一边考研，或者每天花5小时以下", "B": "正常准备，没课时基本都在复习", "C": "全心投入，平均每天差不多花8小时复习，偶尔放松，放假也如此", "D": "超常投入，平均每天花10个小时左右甚至更久，杜绝考研以外活动" }, "score": { "A": -1, "B": 0, "C": 1, "D": 0 } }, 
	{ "question": "关于心理素质，以下哪种情况最符合你？", "option": { "A": "我害怕考试，每次大考都考得比正常水平差", "B": "考试有些紧张，但基本都能发挥正常水平", "C": "我是考试型选手，越到关键时刻发挥越好" }, "score": { "A": -1, "B": 0, "C": 1 } }, 
	{ "question": "关于本科院校，以下哪种情况最符合你？", "option": { "A": "专科院校", "B": "二三本院校", "C": "一本院校", "D": "211院校", "E": "985院校", "F": "顶尖985院校" }, "score": { "A": 1, "B": 2, "C": 3, "D": 4, "E": 5, "F": 6 } }
]

  结构和上次的一样，不用修改。从app.js里挪到了study.js，直接放同一个文件里连名字都写得短点2333

  也不用去getApp了，因为不用获取全局对象app

2、wxml部分

<view>
  <text>{{nowindex+1}}、{{nowquestion.question}}text>
view>
<block wx:for="{{nowquestion.option}}">
  <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" bindtap="next" data-chosen="{{index}}">
    <text>{{index}}、{{item}}text>
  view>
block>

  主要就两个组件，view和block，分别包裹着问题和选项
  核心句子wx:for="{{array}}"，表明这个组件和一个数组绑定了，它会以数组的长度进行复制，并且通过item来引用数组元素。官方文档——

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

  下面的选项，用item来引用选项，index是索引。这两个名字都是默认的，修改索引值和子项名详见开发者文档¹
  要注意变量一定不能写错，否则出现页面空白但又不报错的情况，抓狂。

3、js部分

  next: function(e) {
    var ans = e.currentTarget.dataset.chosen;
    console.log(e)
    this.data.nowscore = this.data.nowscore + this.data.questions[this.data.nowindex].score[ans];
    console.log("tap success!", this.data.nowindex + 1, ans, this.data.nowscore)
    if (this.data.nowindex + 1 == 4) {
      wx.redirectTo({
        url: '/pages/result/result?sum=' + this.data.nowscore,
      })
    } else {
      this.setData({
        nowindex: this.data.nowindex + 1,
      })
      this.setData({
        nowquestion: this.data.questions[this.data.nowindex]
      })
    }
  },
  onLoad: function() {
    this.setData({
      nowquestion: this.data.questions[this.data.nowindex]
    })
  },

  这里相对于上次其实没有什么实质性的改动，就是把变量名字换了一下，然后onLoad函数里增加了数据初始化（因为和wxml绑定了数据）。再就是代码逻辑，if (this.data.nowindex + 1 == 4)是为了避免nowindex=4时，先加一再判定导致wxml里出现第5题的bug。
  碰到一个问题，如果数据更新部分这么写就会出错——

      this.setData({
        nowindex: this.data.nowindex + 1,
        nowquestion: this.data.questions[this.data.nowindex]
      })

  不知道为什么，难道是因为下面的变量又用到了nowindex所以冲突了？²

三、收获

  这次收获还蛮大的，毕竟也算是有了一点基础，很多东西开始看得明白了，用一句诗来形容就是

向来枉费推移力，此日中流自在行

  收获主要有以下几点：

1. wx:for知识点，应该叫列表渲染，使用wx:for属性和一个数组绑定后，就能快速方便地进行组件列表搭建，尤其适合文章列表，推荐视频之类的场景。
2. 数据绑定，逻辑层→视图层，组件内容使用{{}}就行，如果是属性则需要加上双引号
3. 函数传参，视图层→逻辑层，在组件属性里增加data-varName，然后js函数里这样写即可

	funcName : function(e){
		var theVar = e.currentTarget.dataset.varName;
		...
	},

4. 函数默认的e相当于this，表示触发事件的组件。通过console.log打印出来可以发现有不少的属性和方法，最突出的dataset和屏幕点击位置。

  当然，也是会有疑惑的

1. 关于setData，为什么更新的变量之间有引用关系就不行了？
2. 文本内容只有放在text组件里才能显示？
   3-3 22:22更新，不止，view里也可以。没有任何组件包裹着就不行？

  然后是填坑，上一次的问题大部分都能解答了哈哈哈

1. answerClick: function (e) {}里的e是类似于Python里的self吗？
   不是，类似于js里的this，它能代表触发事件的那个对象。也不是很准确，以后再补充。
2. 赋值方法有name : value，var name = value，name=value和this.setData（name1 : this.data.name2），一团乱，各自的应用场所？
   第一个是json格式，也可以当成字典来看。在初始数据部分进行定义和赋值。
   第二个是正儿八经的js定义变量语句。
   第三个可以看成是全局变量定义，也可以看成赋值更新。
   第四个是一个接口，不仅能改变变量的值，还能在视图层完成更新。
3. 函数定义和调用，都和这个: 有关系。调用跟Python的functionA(arg1= xxx, arg2 =xxx)的类似？可以看成一个字典，然后是name ： value，果然有大括号
   定义其实理解成句柄可能好一点，function(){}是一个定义好的函数体，这就相当于function name(){}
   调用的话，是this.setData吧，那是一个官方提供的API，接受key-value作为参数很奇怪吗？
4. 让人头疼的变量引用方法，app.globalData.question[0].question，app.globalData.question[0].option[“A”]，this.data.index，{{answerA}}，涉及到变量的作用域？有时间看一下官方文档
   第一第二个是引用全局变量，app是通过getApp获得的整个小程序的实体，然后它有一个属性叫globalData。。。
   第三个是这个页面里的初始数据，用this.data.index引用时，this是这个页面的意思。
   第四个就是这次接触到的数据绑定了。因为，微信小程序里==没有DOM，没有DOM，没有DOM！==所以逻辑层到视图层的通信只有这个方法。
5. 有点迷的页面结构，HTML和CSS还好，这个js开头就来一个Page啥意思？难道也是一个函数？不过这回的参数变成了一个字典？所以要加大括号，因为不止一对key-value？所以onload之类的本质也是一个变量，函数体是它的值？难怪用，隔开
   Page()是一个函数，用来注册一个页面。这样理解就行了，太深入的还没研究。
6. json里放数据可以吗？
   应该不可以吧，json是配置文件。

四、扩展

• 1、界面美化，加入CSS样式
• 2、点击下一题再跳转
• 3、使用单选框组件

五、引用

---

1. 微信开放文档·列表渲染 ↩︎

2. 微信开放文档·setData ↩︎