2.2 小程序的线程架构与开发步骤
2.2.1 小程序线程架构
通过对小程序项目Hello WXapplet的解析，我们知道每个小程序包含一个描述整体程序的app实例和多个描述页面的page。其中app由三个文件构成：公共配置app.json、公共样式app.wxss、主体逻辑app.js。每个page最多由四个文件构成：页面配置page. json、页面结构page.wxml、页面样式page.wxss、页面主体逻辑page.js。
我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。比如在页面onLoad的时候进行数据加载，onShow的时候进行数据的更新。
典型的app.js代码结构如下：
App({
onLaunch: function() {
// 启动时执行的初始化工作
},
onShow: function() {
// 小程序启动或从后台进入前台时，触发执行的操作
},
onHide: function() {
// 小程序从前台进入后台时，触发执行的操作
},
globalConf: {
indexDate:'',
matchDate:'’
},
dataCache: {},
globalData: 'I am global data'
})
典型的一个页面page.js代码结构：
Page({
Data: {
Text:'This is page data.’
}
onLoad: function(options) {
// 页面加载时执行的初始化工作
}
onReady: function() {
// 页面就续后触发执行的操作
},
onShow: function() {
// 页面打开时，触发执行的操作
},
onHide: function() {
// 页面隐藏时，触发执行的操作
},
onUnLoad: function() {
// 页面关闭时触发执行的操作
},
//Event handler
viewTap: function() {
this.setData({
text:'set some data for updating view.’
})
},
})
一个完整的小程序执行的生命周期如图2-4所示。
图2-4 小程序的生命周期
一个page的生命周期从onLoad开始，整个生命周期内onLoad、onReady、onUnload这三个事件仅执行一次，而onHide和onShow在每次页面隐藏和显示时都会触发。当用户手动触发左上角的退出箭头时，小程序仅触发app.onHide，下次进入小程序时会触发app.onShow以及当前page.onShow。仅当小程序
在后台运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被关闭时，小程序将被销毁，会触发app.onUnload事件。
小程序的线程架构示意如图2-5所示。
图2-5 小程序线程架构示意图
每个小程序分为2个线程，view与appSer-ver。其中view线程负责解析渲染页面（wxml和wxss），而appServer线程负责运行js。appSer-ver线程运行在jsCore中（安卓下运行在X5中，开发工具中运行在nwjs中）。由于js不跑在web-view里，就不能直接操纵DOM和BOM，这就是小程序没有window全局变量的原因。
2.2.2 小程序开发步骤
理解小程序的线程架构后，我们基本上可以归纳出一个小程序开发的主要步骤，涉及两大步骤：
1）创建小程序实例（定义、配置及页面执行关联）。即编写3个app前缀的文件，它们共同描述了整个小程序主体逻辑、生命周期及页面构成、样式等。小程序实例将由appServer线程执行。
2）创建页面（页面结构与事务处理逻辑）。在小程序中一个完整的页面（page）是由.js、.json、.wxml、.wxss这四个文件组成，每个界面.js和.wxml是必选项，其他两项是可选项。小程序页面由view线程执行。
我们利用组件编写UI代码，展现页面数据或内容视图，这部分代码就保存为页面的wxml文件：
■ 微信小程序中的每一个页面的“路径+页面名”都需要写在app.json的pages中，且pages中的第一个页面是小程序的首页。
■.wxml文件与.wxss文件是小程序开发框架的一部分，我们在后面的框架部分详细介绍。
2.2.3 为Hello WXapplet添加新页面及示例代码
我们将为Hello WXapplet小程序添加一个新页面“demo”，以帮助大家熟悉小程序代码编写步骤。
1）使用微信Web开发者工具，在“编辑”模式下，鼠标置于pages处，选择“+”号添加“目录”，如添加一个名为“demo”的目录。如图2-6所示。
图2-6 添加目录或文件
2）我们先为demo页面添加一个视图结构文件，即demo.wxml，操作方法与添加目录类似：在微信Web开发者工具里，在“编辑”模式下，鼠标置于pages下的demo目录处，选择“+”号来添加“文件”，如添加demo.wxml文件，将示例代码中相应的代码段放入该文件内，并保存。示例的demo. wxml代码见程序清单2-9。
程序清单2-9 页面结构demo.wxml
// demo.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
上述代码通过使用表单组件，实现demo页面上显示表单元素。
3）同时添加一个demo.js文件，用作demo页面的逻辑处理，例如，我们在demo.js中放入如下代码：
// demo.js
Page({
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件’)
}
})
代码实现在控制台上打出用户在demo页面上提交的表单数据。
4）然后，我们需要在app.json中pages配置项中添加demo页面，如下所示：
{
"pages":[
"pages/index/index",
"pages/logs/logs",
// 新添加一个demo页面配置
"pages/demo/demo"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"debug":false
}
5）在小程序适当页面的.wxml中添加入口并在该页面的.js文件中添加到新页面的入口。例如，我们在index.wxml中添加到demo页面入口展现的代码：
<! --index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size=
"cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view id="tapTest" data-hi="MINA" bindtap="tapName">click me! </view>
// 添加到demo页面的入口展现并在其上绑定用户的点击事件
<view id="tapDemo" bindtap="bindViewDemo">Demo页 </view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
同时我们要在index.js中添加bindViewDemo事件处理逻辑：
// index.js
// 获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
// 事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
// 新添加的页面入口导航示例代码
bindViewDemo: function() {
wx.navigateTo({
url: '../demo/demo'
})
},
// 事件相应处理
tapName: function(event) {
console.log(event)
},
onLoad: function () {
console.log('onLoad')
var that = this
// 调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
// 更新数据
that.setData({
userInfo:userInfo
})
})
}
})
通过demo页面的编写，我们成功地为Hello WXapplet小程序新增加了一个功能页。
本书中所有的代码示例，均可以类似按上述步骤增加demo页面，以便广大读者学习演练。
注意 为确保读者熟悉小程序开发过程及代码编写，本书的所有示例代码（若有需要）均可使用开发者工具在测试项目中演练。演练示例代码需要特别注意的是：须区分示例代码的不同代码段，要分别对应放在页面的.wxml、.js、.wxss文件中。