微信小程序开发边做边学 课件 知识点篇-微信小程序第2章 心理测试小程序

小程序开发从入门到实践

知识点心理测试小程序小程序开发事件是视图层到逻辑层的通讯方式。

事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。1.Bindtap事件绑定小程序开发心理测试小程序中总共有4个事件，其事件处理函数对应的事件触发结果如表所示。事件处理函数所处页面事件触发结果beginAnswerindex跳转至test页面answerClickAtest显示下一题，并判断A对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面answerClickBtest显示下一题，并判断B对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面answerClickCtest显示下一题，并判断B对应的是题库中哪个选择，给对应选项的值+1，满足index=20时，跳至result页面小程序开发2.路由小程序API中的路由共有5种路由路由规则wx.switchTab跳转到tabBar页面，并关闭其他所有非tabBar页面wx.reLaunch关闭所有页面，打开到应用内的某个页面wx.redirectTo关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面wx.navigateTo保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层wx.navigateBack关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈，决定需要返回几层。小程序开发其中心理测试小程序中用到了wx.navigateTo和wx.redirectTo，这边通过修改index.js中的路由来看一下两个路由之间的区别，一开始index.js文件的事件处理函数beginAnswer中使用的是wx.navigateTo，此时test与result页面如图所示，进入test和result页面均可单击“<”按钮回到index页面。test初始页面小程序开发其中心理测试小程序中用到了wx.navigateTo和wx.redirectTo，这边通过修改index.js中的路由来看一下两个路由之间的区别，一开始index.js文件的事件处理函数beginAnswer中使用的是wx.navigateTo，此时test与result页面如图所示，进入test和result页面均可单击“<”按钮回到index页面。result初始页面小程序开发如果将wx.navigateTo改为wx.redirectTo，会发现页面左上角的“<”不见了，无法回到index页面test修改后页面小程序开发如果将wx.navigateTo改为wx.redirectTo，会发现页面左上角的“<”不见了，无法回到index页面result修改后页面小程序开发声明变量在js中，未在data数组中定义的变量，可以通过var语句来进行变量声明，在声明变量的同时也可以向变量赋值，如test.js文件中的一段代码：3.声明变量与变量赋值小程序开发2.变量赋值在js文件的函数中给变量赋值的方法有两种，这里举一个简单的例子，首先将index.wxml文件中button的“开始测试”改为“{{msg}}”，使button中的文字变成一个变量，然后在index.js文件的data数组中添加变量msg，并赋予初值“开始测试”，最后将事件处理函数beginAnswer进行修改，代码如左图所示。小程序开发如果将this.setData({})改为使用this.data.msg=‘测试结束’来改变msg变量的值，会发现虽然可以改变msg的值，但是页面不会更新小程序开发this.setData是用来更新界面的，this.data是用来获取页面data对象的，它们都可以用于给变量赋值，如果需要查看赋值后变量的值，需要在this.setData({})语句外使用console.log()打印查看变量的值。小程序开发2.相对路径在index.js文件中，事件处理函数beginAnswer的wx.navigateTo路由的url使用的就是相对路径，其中“../”指的是当前文件所在的上一级目录，即index文件夹所在的目录，“../test/test”指的就是index所在目录中test文件夹中的test文件。另外“./”指的是当前目录，“../../”指的是当前文件所在的上上级目录，以此类推。绝对路径“/pages/test/test”即为test文件所在的绝对路径，若将url改为绝对路径“/pages/test/test”也能实现页面的跳转。4.绝对路径与相对路径小程序开发带参跳转在test.js文件中，answerClickA的一段代码实现了当index=20时，从test页面跳转至result页面，跳转时携带参数A、B和C的值，代码如下：小程序开发在result页面的页面参数中可以看到带参跳转时的参数，如图所示。小程序开发如果想用使用页面参数，可以在result页面的js文件中使用生命周期函数来获取页面参数，给生命周期函数function（）中定义一个值，这边定义为options，即可使用option.A获取A的值，并赋值给result页面的变量A，B、C也一样。开发者可以尝试用console.log（options）打印看一下options中的值小程序开发变量赋值在js文件的函数中给变量赋值的方法有两种，这里举一个简单的例子，首先将index.w