夜光 带你走进微信小程序研发（九）

夜光序言：

 

 

即使身边满是凄荒、冷淡与麻木，风也会吹得柔和，心也能寻得一份温存

 

 

 

 

 

 

 

正文：接下来~~，实战项目：一个拥有答题页面的微信小程序

上图为实际效果图

那么如何制作出来呢~

---

点击“开始测试”按钮，体验小程序的功能并查看各个目录的简单配置。可以 看到如图所示的结果

心理测试小程序主要包括三个页面，分别是 index、test 和 result 页面，在理解 心理测试代码之前，先学习一下代码中涉及到的几个知识点。

1. bindtap 事件绑定

---

事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行 处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。代码示例如下。

<!--index.wxml-->
<view class="begininfo">
<button bindtap='beginAnswer'> 开始测试 </button>
</view>

//index.js
beginAnswer: function() {
wx.navigateTo({
url: '../test/test'
})
}

在 index.wxml 文 件 中 ， 将 bindtap 事 件 绑 定 在 button 组 件 上 ， 其 中bindtap=’beginAnswer’。当测试者单击“开始测试”按钮时，会触发事件，就会执行 index.js 中对应的事件处理函数 beginAnswer，该事件处理函数在触发后，执行页面 跳转，跳转至 test 页面。

 

心理测试小程序中总共有 4 个事件，其事件处理函数对应的事件触发结果如表

2. 路由

 

小程序 API 中的路由共有 5 种

其中心理测试小程序中用到了 wx.navigateTo 和 wx.redirectTo，这边通过修改 index.js 中的路由来看一下两个路由之间的区别，

一开始 index.js 文件的事件处理函数 beginAnswer 中使用的是 wx.navigateTo

此时 test 与 result 页面如图所示，进入 test 和 result 页面均可单击“<”按钮回到 index 页面。

 

如果将 wx.navigateTo 改为 wx.redirectTo，会发现页面左上角的“<”不见了，无 法回到 index 页面

 

---

 

3. 声明变量与变量赋值

1）声明变量

 

在 js 中，未在 data 数组中定义的变量，可以通过 var 语句来进行变量声明，在声明变量的同时也可以向变量赋值，如 test.js 文件中的一段代码：

setList: function () {
var newList = this.data.list.sort(this.randSort);
this.setData({
list: newList,
});
},

2）变量赋值

 

在 js 文件的函数中给变量赋值的方法有两种，这里举一个简单的例子，首先将 index.wxml 文件中 button 的“开始测试”改为“{{msg}}”，使 button 中的文字变成一个变量，然后在 index.js 文件的 data 数组中添加变量 msg，并赋予初值“开始测试”，最后将事件处理函数 beginAnswer 进行修改，代码如下。

<!--index.wxml-->
<view class="begininfo">
<button bindtap='beginAnswer'> {{msg}} </button>
</view>





//index.js
Page({
data: {
msg:'开始测试'
48
},
//事件处理函数
beginAnswer: function () {
this.setData({
msg:'测试结束'
})
},
})

使用 this.setData({ })可以将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步），当单击“开始测试”按钮时，msg 的值变为“测试结束”，页面按钮中文字内容也变为“测试结束”。

 

如果将 this.setData({ })改为使用 this.data.msg = ‘测试结束’ 来改变 msg 变量的值，会发现虽然可以改变 msg 的值，但是页面不会更新

总的来说，this.setData 是用来更新界面的，this.data 是用来获取页面 data 对象的，它们都可以用于给变量赋值，注意 this.setData 中不能使用 console.log( )语句

 

如果需要查看赋值后变量的值，需要在 this.setData({ })语句外使用 console.log( )打印查看变量的值。