小程序，巧应用：微信小程序开发实战（第2版）最新章节_熊普江著

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不跑在WebView里，就不能直接操纵DOM和BOM，这就是小程序没有window全局变量的原因。

2.2.2　小程序开发步骤

理解小程序的线程架构后，我们基本上可以归纳出一个小程序开发的主要步骤，涉及两大步骤：

1）创建小程序实例（定义、配置及页面执行关联）。即编写3个app前缀的文件，它们共同描述了整个小程序主体逻辑、生命周期及页面构成、样式等。小程序实例将由appServer线程执行。

2）创建页面（编写页面结构与事务处理逻辑）。在小程序中一个完整的页面（page）是由.js、.json、.wxml、.wxss这四个文件组成，每个界面.js和.wxml是必选项，其他两项是可选项。小程序页面中的.wxss与.wxml文件由view线程执行，.js文件由appServer线程执行。

我们利用组件编写界面（UI）代码，以展现页面数据或内容视图，这部分代码就保存为页面的wxml文件：

·微信小程序中的每一个页面的“路径+页面名”都需要写在app.json文件里名为pages的配置项中，且pages配置项中的第一个页面是小程序的首页。

·.wxml文件与.wxss文件是小程序开发框架的一部分，我们在后面的2.3节详细介绍。

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文件中，同时需要在适当页面添加入口并在app.json中注册该页面。

2.2 小程序的线程架构与开发步骤

2.2.1 小程序线程架构

2.2.2 小程序开发步骤

2.2.3 为Hello WXapplet添加新页面及示例代码

2.2　小程序的线程架构与开发步骤

2.2.1　小程序线程架构

2.2.2　小程序开发步骤

2.2.3　为Hello WXapplet添加新页面及示例代码