背景
上一篇文章我们讲述了微信小程序的页面结构，一个小程序也旺往往包含四个文件page.json是用于页面的配置，page.wxml定义了页面结构，page.wxss定义了页面的样式，page.js则定义了与用户的交互方式，这篇文章将会讲述卫星小程序的运行环境。
宿主环境
不同于Android应用和iOS应用直接运行于Andorid系统和iOS系统，微信小程序运行在微信提供的宿主环境中，由于微信已经替我们抹平了不同平台的差异，所以微信小程序能够实现跨平台，且能够实现很多普通网页无法实现的功能。我们将以之前建立的Test项目为例介绍一下微信小程序的运作过程。
我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。
小程序的启动过程
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，我们新建的test项目的pages字段内容如下，可以知道test项目包含两个页面index和logs，由于没有通过entryPagePath指定启动页，所以会默认pages字段的第一个页面也就是index页面为启动页。
"pages":[
"pages/index/index",
"pages/logs/logs"
]
于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。小程序启动之后，在 app.js 定义的App实例的onLaunch回调会被执行，整个小程序只有一个 App 实例，是全部页面共享的，每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等，其包含的监听函数如下：
// app.js
App({
onLaunch (options) {
// 生命周期回调——监听小程序初始化。
},
onShow (options) {
// 生命周期回调——监听小程序启动或切前台。
},
onHide () {
// 生命周期回调——监听小程序切后台。
},
onError (msg) {
//错误监听函数。
console.log(msg)
},
globalData: 'I am global data'
})
小程序页面渲染
其大致的过程如下，可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据logs.json配置生成一个界面，顶部的颜色和文字你都可以在这个json文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 log.js。
Page({
data: { //参与页面渲染的数据
logs: []
},
onLoad() {
//页面渲染后执行
this.setData({
logs: (wx.getStorageSync('logs') || []).map(log => {
return {
date: util.formatTime(new Date(log)),
timeStamp: log
}
})
})
}
})
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
Behavior
页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'This is a piece of data shared between pages.'
},
methods: {
sharedMethod: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
}
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
behaviors: [myBehavior],
onLoad: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
})
Component
Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。
Component({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 页面创建时执行
},
onPullDownRefresh: function() {
// 下拉刷新时执行
},
// 事件响应函数
viewTap: function() {
// ...
}
}
})
最后
有兴趣可以关注公众号QStack，会定期分享一些文章和免费的学习资源。
