逻辑层js文件（下）

回顾

上一篇文章，我们开始对小程序文件中具体的代码构成进行分析，首先对逻辑层即js文件进行了分析。下面我们继续对逻辑层js文件进行分析。

（由于该自媒体，对于带序号的文章，不支持，容易扣分，所以本文题目中不再标有序号）

（昨天发文，由于被该媒体认定为有推广意图，所以没发，非常抱歉）

1. js与wxml之间的数据交互

js文件的功能是实现小程序页面与后台的交互功能，必定涉及到数据的交互，即，数据怎么传输到.wxml文件，（数据不会与.wxss文件进行交互，.wxss文件只负责样式，后续我们会对.wxml和.wxss文件进行详细介绍）。

在上一篇文章中，我们介绍了组件事件处理函数，如图1所示：

图1 page.js文件代码构成

如果我现在有这样的需求，要求点击页面中的button按钮，js便改变data中的数据，如何实现？js提供了this.setData函数。

this.setData就是改变js文件中数据data的值，具体案例如下图所示：

图2-1 page.wxml文件

图2-2 page.js文件

视图层的.wxml文件中定义一个button按钮，并给他绑定事件changeText，当点击这个button按钮是，就触发这个事件。

这个事件的具体实现就是js文件的内容，如图2-2所示，changeText时间被绑定在注册表page()中。在changeText中定义了this.setData函数，就是用来改变js文件中data的数据。

初始化时，js中的text是“----没改变数据之前----”，当点击按钮之后，变为了“****改变之后的数据****”。

光改变js中data的数据还不够，因为我们的数据最终要显示在页面中，而.wxml文件是视图文件，它负责展示页面内容，这就需要js文件将test改变之后的数据传给.wxml文件，这就用到.wxml的数据绑定，数据绑定是使用 Mustache 语法（双大括号）将变量包起来。

如图2-1所示，text用双大括号包起来，就与js中data的text变量绑定，当js中的text变动时，.wxml页面中的text变量也跟着变动。效果如图3所示：

图3 效果图

2. 页面之间的跳转

前面我们介绍小程序中有很多页面，pages目录下每一个文件夹代表一个页面。如何从一个页面跳转到另外一个页面。页面的路由方式很多，包含以下几个方面：

其中，我们重点关注以下三个路由方式：

（注：这里的API调用就是js文件中可以直接使用的函数；组件，就是在.wxml中也可以使用设置属性的方式实现相同的功能）

注意：打开新页面，旧页面还存在（栈中，先进后出），当点击左上角返回键时，就冲栈中读取出原来的旧页面。但是重定向，是直接将旧页面重栈中删除，然后打开新的页面，这是再点击返回键是不起作用的。（重定向是web开发后端jsp、php、asp等内容）

总结

以上就是js文件的全部内容，包含：app（）和page（）注册回调函数、组件时间处理函数、data数据、setData的数据交互、数据绑定、页面跳转等内容。当然这是js文件的主要内容，掌握这些就可以满足开发一些简单的小程序的需求。

后续涉及到云开发（云函数、数据库、存储）技术时，我们还会再深入的介绍js文件。