微信小程序开发-逻辑层架构

什么是小程序框架

为了微信小程序能够正常运行在微信环境中，小程序研发出了小程序框架。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。简单来说，视图层就是渲染你看得到的东西，逻辑层提供了数据绑定。
这里同样是用上一章的例子：

<!-- This is our View -->
<view> Hello {{name}}! </view>
<!-- 插值语法 -->
<button bindtap="changeName"> Click me! </button>
<!-- 按钮 -->

// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

点击可预览上述代码的效果

开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面一打开的时候会显示 Hello Weixin!； 当点击按钮的时候，视图层会发送 changeName 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数； 回调函数触发后，逻辑层执行 setData 的操作，将 data 中的 name 从 Weixin 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 Hello MINA。

逻辑层

逻辑层主要是JavaScript在发挥作用。

“注册”小程序

tip

这里的注册是不同于前面提到的去小程序网站注册小程序，而是在一个生命周期中去声明这个小程序的存在。

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js
App({
  onLaunch (options) {
    // 在加载小程序时运行这段逻辑.
  },
  onShow (options) {
    // 当页面渲染时运行这段逻辑.
  },
  onHide () {
    // 当小程序隐藏运行这段逻辑.
  },
  onError (msg) {
    // 当错误发生时运行这段逻辑
    console.log(msg)
  },
  globalData: 'I am global data'    // 全局公共数据，某些数据很多页面都要使用，就可以将它放在这里
})

note

例如计协小程序中上一个页面的数据转存到下一个页面就可以借助这个方法。

在单个页面中，可以像下面这样调用全局的数据。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注册页面

指在小程序的生命周期中注册一个页面，发生于跳转到这一页面时。

//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)
  },
  // 事件响应函数，自定义函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'  // 给text变量赋值
    }, function() {
      // this is setData callback
    })
  }
})

页面生命周期

比较复杂，知道有这个东西即可。

页面路由

微信小程序框架使用数据结构中栈的方式维护每个页面的路由。

什么是栈

栈（stack）又名堆栈，它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶，相对地，把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，使其相邻的元素成为新的栈顶元素。一句话概括就是，一个竖着的容器，先进后出。

小程序路由栈的表现：

几种小程序路由方式：
初始化-小程序打开的第一个页面-路由后：onLoad, onShow
打开新页面-调用API-wx.navigateTo

使用组件-<navigator open-type="navigateTo"/> 路由前：onHide 路由后：onLoad, onShow

页面重定向-调用API-wx.redirectTo

使用组件-<navigator open-type="redirectTo"/> 路由前：onUnload 路由后：onLoad, onShow

页面返回-调用API-wx.navigateBack

使用组件-<navigator open-type="navigateBack">
用户按左上角返回按钮-路由前：onUnload 路由后：onShow

Tab切换-调用API wx.switchTab

使用组件<navigator open-type="switchTab"/>
用户切换-Tab

重启动-调用API wx.reLaunch

使用组件 <navigator open-type="reLaunch"/> 路由前：onUnload 路由后：onLoad, onShow

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

注意事项：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。