微信小程序（四）深入理解小程序及其宿主环境(构造器，运行机制)

宿主环境

• 宿主环境是微信客户端给小程序提供的一种环境 。
• 宿主指的就是微信客户端，也就是官方API里的wx 对象。
• 宿主环境会把我们写的各种文件整合到一起，进行解析，然后在微信APP 里显示出我们所看到的样子。
• 宿主环境可以为小程序提供微信客户端的能力，比如微信扫码，这是普通网页不具备的。
  

双线程下的界面渲染原理

• 在渲染层，宿主环境会把WXML转化成对应的JS对象，也就是虚拟Dom。
• 在逻辑层发生数据变更的时候，我们可以用setData方法把数据从逻辑层传递到渲染层。
• 在渲染层对比虚拟Dom的前后差异，把差异应用在真实Dom上，渲染出正确的UI界面。
  

App构造器

• 宿主环境提供的一个 App() 构造器，用于注册一个程序App。
• App() 构造器必须写在项目根目录的app.js里。如：App({…})。
• App实例是单例对象，也是一个全局对象，就像网页里的window一样。
• 在其他JS脚本中可以使用宿主环境提供的 getApp() 方法来获取App 实例。利用getApp() 我们可以将数据写入全局，或者从全局读取数据。 如：
  // app.js

App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    motto:'好好学习，天天向上'
  }
})

index.js

const app = getApp()
const {globalData}=app
console.log( {globalData.motto})
globalData.motto = '天天学习，好好向上'
console.log( {globalData.motto})

页面构造器Page（）

• 页面的js 里的所有代码都是写在Page()构造器里的。
• Page构造器接受一个Object参数，在Object中可以绑定数据，监听页面事件。

Page({
  data: { text: "This is page data." },
  onLoad: function(options) { },
  onReady: function() { },
  onShow: function() { },
  onHide: function() { },
  onUnload: function() { },
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

打开微信小程序的一瞬间，微信客户端做了些什么