微信小程序学习（一）心理测试题库改造

前言

  学微信小程序课程学到题库开发，正好看到个考研模型，相似度比较高，就起了魔改一番的心思

一、分析

1、原项目为了丰富题库，有题号和选项双随机的功能，但在考研目标建议上没有必要，砍掉
2、原项目ABC的分值固定，只要统计ABC的个数即可，但考研目标里不同题目的同一选项分值可能不确定。暂定为修改题库，增加选项对应分值
3、原项目采用一个选项绑定一个函数的做法，比较麻烦，可以简化成一个函数

二、行动

1、修改题库

globalData: {
	userInfo: "hello",
	question: [
		{ "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 } }
	]
}

  对字典的key-value格式更有感觉了，而且还可以并列嵌套。引用格式app.globalData.question[0].question或app.globalData.question[0].option[“A”]，value等于.name等效于[‘name’]
  报错Property assignment expected，后面发现是key-value没有严格对应，少了个}

2、修改函数

js内容

data: {
	index: 0,
	scoresum: 0,
	questionDetail: app.globalData.question[0].question,
	answerA: app.globalData.question[0].option["A"],
	answerB: app.globalData.question[0].option.B,
	answerC: app.globalData.question[0].option.C,
	answerD: app.globalData.question[0].option.D,
	answerE: app.globalData.question[0].option.E,
	answerF: app.globalData.question[0].option.F,
},

answerClick: function (e) {
	var ans = e.currentTarget.dataset.which;
	this.data.scoresum = this.data.scoresum + app.globalData.question[this.data.index].score[ans];
	console.log(this.data.scoresum);
	this.setData({
		index: this.data.index + 1, 
	})
	if (this.data.index == 4) {
		wx.redirectTo({
			url: '/pages/result/result?sum=' + this.data.scoresum,
		})
	}
	else{
		this.setData({
			questionDetail: app.globalData.question[this.data.index].question,
			answerA: app.globalData.question[this.data.index].option["A"],
			answerB: app.globalData.question[this.data.index].option["B"],
			answerC: app.globalData.question[this.data.index].option["C"],
			answerD: app.globalData.question[this.data.index].option["D"],
			answerE: app.globalData.question[this.data.index].option["E"],
			answerF: app.globalData.question[this.data.index].option["F"],
		})
	} 
},

wxml内容

<view url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active" bindtap='answerClick' data-which="A">
                <view class="weui-cell__bd">A、{{answerA}}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>

三、收获

  其实收获很少，疑问倒是一大堆，毕竟可以说是没有任何前端基础。

1. get到了bindtap函数传参，在view里增加data-name=“value”，js函数使用var ans = e.currentTarget.dataset.name; 来获取value值的方法
2. 在test.js里看到了页面周期函数，可以监听用户的各种行为并做出动作，预留好了等待扩展
3. 前端编程的感触，内容靠HTML，样式布局靠CSS，逻辑功能靠js

  一些疑问

1. answerClick: function (e) {} 里的e是类似于Python里的self吗？
2. 赋值方法有name : value，var name = value，name=value和this.setData（name1 : this.data.name2），一团乱，各自的应用场所？
3. 函数定义和调用，都和这个: 有关系。调用跟Python的functionA(arg1= xxx, arg2 =xxx)的类似？可以看成一个字典，然后是name ： value，果然有大括号
4. 让人头疼的变量引用方法，app.globalData.question[0].question，app.globalData.question[0].option[“A”]，this.data.index，{{answerA}}，涉及到变量的作用域？有时间看一下官方文档
5. 有点迷的页面结构，HTML和CSS还好，这个js开头就来一个Page啥意思？难道也是一个函数？不过这回的参数变成了一个字典？所以要加大括号，因为不止一对key-value？所以onload之类的本质也是一个变量，函数体是它的值？难怪用，隔开

const app = getApp()
Page({
  data: {
  },
  beginAnswer: function() {
    wx.navigateTo({
      url: '../test/test'
    })
  },
  onLoad: function () {
  },
  getUserInfo: function(e) {
  }
})

四、扩展

• 1、界面美化，加入CSS样式
• 2、json里放数据可以吗？
• 3、点击下一题再跳转
• 4、使用单选框

五、引用

心理测试小程序