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页面，以便广大读者学习演练。