2.1 心理测试小程序安装与理解
本节首先下载心理测试小程序并将其导入微信开发者工具，然后介绍心理测试小程序涉及的知识点，最后帮助开发者更好地理解整个心理测试小程序的代码。
2.1.1 心理测试小程序安装
心理测试源代码下载地址为https://github.com/Silverados/We-AnswerPage，如图2-1所示。如果没有GitHub的账号，则可以先自行申请一个账号再进行代码的下载。
图2-1 心理测试小程序源代码下载页面
单击Clone and download按钮，再选择Download ZIP将源代码下载下来。源代码为一个压缩包，需要解压，将源代码解压后，双击“微信Web开发者工具”，并选择“小程序”，选择“导入项目”，如图2-2所示。其中，在选择项目目录时需要选择包含app.json和project.config.json的目录。
图2-2 将源代码导入页面
选好目录后，开发者可以自定义项目名称，并输入AppID，最后单击“导入”按钮，即可成功导入心理测试小程序，打开后的界面如图2-3所示。代码目录如图2-4所示。
图2-3 测试页面首页
图2-4 心理测试小程序代码目录
单击“开始测试”按钮，体验小程序的功能并查看各个目录的简单配置。可以看到如图2-5所示的结果。
完成心理测试后，最后跳转至心理测试结果页面，在该页面中可看到测试者在测试过程中选择A、B、C选项的次数，并告诉测试者属于什么类型，如图2-6所示。
图2-5 做题页面
图2-6 心理测试结果页面
2.1.2 心理测试小程序知识点理解
心理测试小程序主要包括三个页面，分别是index、test和result页面，在理解心理测试小程序代码之前，先学习代码中涉及的几个知识点。
1．bindtap事件绑定
事件是视图层到逻辑层的通信方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件时，就会执行逻辑层中对应的事件处理函数。代码示例如下。
在index.wxml文件中，将bindtap事件绑定在button组件上，其中bindtap='beginAnswer'。当测试者单击“开始测试”按钮时，会触发事件，就会执行index.js中对应的事件处理函数beginAnswer（），该事件处理函数在触发后，执行页面跳转，跳转至test页面。
心理测试小程序中总共有四个事件，其事件处理函数对应的事件触发结果如表2-1所示。
表2-1 心理测试小程序中的事件处理函数对应的事件触发结果
2．路由
小程序API中的路由共有五种，详见表2-2。
表2-2 小程序路由及路由规则
其中心理测试小程序中用到了wx.navigateTo和wx.redirectTo，下面通过修改index.js中的路由来看一下两个路由之间的区别。一开始，index.js文件的事件处理函数beginAnswer中使用的是wx.navigateTo，此时test与result初始页面如图2-7和图2-8所示。进入test和result页面均可通过单击<按钮回到index页面。
图2-7 test初始页面
图2-8 result初始页面
如果将wx.navigateTo改为wx.redirectTo，会发现页面左上角的<按钮不见了，无法回到index页面，如图2-9和图2-10所示。
图2-9 test修改后页面
图2-10 result修改后页面
3．声明变量与变量赋值
1）声明变量
在js文件中，未在data数组中定义的变量，可以通过var语句来进行变量声明，在声明变量的同时也可以向变量赋值，如test.js文件中的一段代码：
2）变量赋值
在js文件的函数中给变量赋值的方法有两种。这里举一个简单的例子，首先将index.wxml文件中button的“开始测试”改为{{msg}}，使button中的文字变成一个变量。然后在index.js文件的data数组中添加变量msg，并赋予初值“开始测试”，最后对事件处理函数beginAnswer（）进行修改，代码如下：
使用this.setData（{}）可以将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步），当单击“开始测试”按钮时，msg的值变为“测试结束”，页面按钮中文字内容也变为“测试结束”。
如果将this.setData（{}）改为使用this.data.msg='测试结束'来改变msg变量的值，会发现虽然可以改变msg的值，但是页面不会更新，如图2-11和图2-12所示。
总地来说，this.setData是用来更新界面的，this.data是用来获取页面data对象的，它们都可以用于给变量赋值。注意，this.setData中不能使用console.log（）语句，如果需要查看赋值后变量的值，需要在this.setData（{}）语句外使用console.log（）打印变量的值。
图2-11 按钮文字内容
图2-12 打印查看msg值的变化
4．绝对路径与相对路径
1）相对路径
在index.js文件中，事件处理函数beginAnswer（）中wx.navigateTo路由的URL使用的就是相对路径，其中“../”指的是当前文件所在的上一级目录，即index文件夹所在的目录，“../test/test”指的是index所在的同级目录下test文件夹中的test文件。另外“./”指的是当前目录，“../../”指的是当前文件所在的上上级目录，以此类推。
2）绝对路径
“/pages/test/test”即为test文件所在的绝对路径，若将URL改为绝对路径“/pages/test/test”也能实现页面的跳转。
5．带参跳转
在test.js文件中，answerClickA的一段代码实现了当index=20时，从test页面跳转至result页面，跳转时携带参数A、B和C的值，代码如下：
在result页面的页面参数中可以看到带参跳转时的参数，如图2-13所示。
如果想使用页面参数，可以在result页面的js文件中使用生命周期函数来获取页面参数，给生命周期函数function（）中定义一个值，这里定义为options，即可使用options.A获取A的值，并赋值给result页面的变量A、B、C也一样。开发者可以尝试用console.log（options）打印，看一下options中的值，如图2-14所示。
6．其他知识点
1）Math.random（）
Math.random（）：产生一个[0，1）的随机数。
2）三目运算符
return Math.random()>0.5？1：－1的意思是随机产出一个[0，1）的数，若这个数大于0.5，返回1，反之则返回－1。
图2-13 result页面参数
图2-14 使用页面参数
3）sort（）
sort（）方法用于对数组元素进行排序。
2.1.3 心理测试小程序代码讲解
心理测试小程序呈现给用户的首页是index页面，index页面的主要元素是一个按钮，单击“开始测试”按钮，即触发事件处理函数beginAnswer，实现页面跳转，跳转至test页面。
进入test页面后，即可开始心理测试。其中，心理测试的题目信息存放在app.js文件中globalData的question数组中，如图2-15所示。在test.js文件中通过getApp（）获取全局对象，然后进行全局变量和全局方法的使用，要使用globalData这个全局变量，需要在test.js中加一句“const app=getApp（）”。
图2-15 question数组
另外，test.js中还使用了Math.random（）和sort（）方法，使在test页面的20道题随机显示，并且选项也随机显示，当选择A选项时，判断对应的是题目信息中的哪个选项，然后给相应的值加1。选择其他选项同上，当index=20时，跳转至result页面，并显示各选项被选择的次数以及测试者属于什么类型。