# 前言

前面章节讲解了事件系统与通讯系统，这两大模块是线程与线程之间的桥梁，那么我们接下来就来探索一下逻辑线程。

本章内容分解：

• .js语法结构
• 数据在线程之间如何传递
• 小程序生命周期设计

# JS语法结构

接下来看一下.js文件的语法结构， 拿pages/index/index.js页面来举例子。

看到内部是一个Page实例，看到这个Page实例有种似曾相识的感觉，与两个地方有点关联，我们来看一下。

首先是VUE写法，又是不得不与VUE进行一个比对，前面我们比对过WXML与VUE tempalte之间的写法，语法结构十分的相似，比如事件绑定等等都是十分相似的。这个时候来到了逻辑js处还是一股熟悉的味道。

data的方法

逻辑层的data与view是相互绑定的，WXML中的动态数据说的就是data。平常业务的开发之中，data中存储的数据一般都是初始化数据，之后通过接口或者用户交互等变换为其他数据，在小程序中改变data的方法为setData。

data是页面第一次渲染使用的初始数据。页面加载的时候，data将会以JSON字符串形式由逻辑层传至渲染层。

因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。能储存的类型还是比较有限的，但是在小程序这样的开发环境下也就是够用了，没有什么组件类、或者奇怪的东西需要被更新在data中。

看一下这里的架构图。

上图中，渲染层和逻辑层都从start开始出发，自身分别进行初始化操作，都初始化完毕后要怎么做呢？两条线程互相并不知道对方初始化怎么样了。所以这个时候由渲染层发出信号，发出一个我已经初始化完毕的信号发给逻辑层，并且自身状态进入等待。逻辑层收到这个信号的时候有两种情况。第一种就是自身还没初始化完，那么收到此信号后只需要初始化完毕后发送初始数据Data到渲染层即可。第二种情况就是逻辑层早已经进入等待状态，那么收到信号后立即发送初始数据Data到渲染层即可。

看一下js文件中基本绑定语法：

数据绑定使用 Mustache 语法（双大括号）将变量包起来。

组件属性绑定：

控制属性绑定

双向绑定：

生命周期也是挂在在data同一级。

• onLoad(Object query) 页面加载时触发，一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。
• onShow() 页面显示/切入前台时触发
• onHide() 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
• onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onUnload() 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

知识点：可以看到上述几种跳转方式分别对应着不同的生命周期，页面跳转场景中，结合webview一起进行理解则更加透彻，wx.navigateTo方式是创建新的webview，并且展示新的webview，当前webview进入Hide状态，这时，并未进行页面卸载。

Wx.redirectTo以及wx.navigateBack是通过更新自身webview进行页面转换的，所以当前页面会进行卸载操作，并且重新生成新页面。所以两个页面都会进入完整生命周期序列。这个知识点需要注意一下

配合整体架构图来看一下生命周期。

page实例中还可以添加一些页面事件处理函数和普通的事件，这里就不例举了。

最后我们再来看一下最开始展示的小程序架构图。

在渲染层章节的时候我们了解到每个页面都是一个webview实例，所以我们一共有多少页面，理论上来讲最多就会有多少个webview实例。

在逻辑层就不一样了，内部只有一个APP实例，所有页面里面的写的逻辑都在一个逻辑线程中执行。从小程序渲染层的代码中可以看到。

是不是有人以为像渲染层WXML一样会有个可执行的编译工具再编译一下我们的js逻辑文件？ 并没有哈，所有的js逻辑文件都放在了渲染层文件中执行，并且细看的话utils.js文件也被放在了逻辑层中。当然还有最重要的app.js文件。

后面我们具体看一下逻辑层的整体结构。