微信小程序的代码架构组织（3）- 小程序的页面

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。详细的参数含义和使用请参考 App 参考文档 。

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

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

在页面目录 pages/logs/logs 下包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构(logs.wxml)和 WXSS 样式(logs.wxss)。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

• 简单的页面可以使用 Page() 进行构造。
  Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
  在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

//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.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

详细的参数含义和使用请参考 Page 参考文档 。

• 复杂的页面可以使用Component构造器，其方法需要放在 methods: { } 里面。(基础库 1.6.3 开始支持，低版本需做兼容处理。)

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

这种创建方式非常类似于 自定义组件 ，可以像自定义组件一样使用 behaviors 等高级特性。
具体细节请阅读 Component 构造器 章节。

• 页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。(基础库 2.9.2 开始支持，低版本需做兼容处理。)

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: 'This is a piece of data shared between pages.'
  },
  methods: {
    sharedMethod: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  }
})

// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

具体用法参见 behaviors 。

页面的生命周期

下图说明了页面 Page 实例的生命周期。

页面生命周期

页面路由

在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。 开发者可以使用 getCurrentPages() 函数获取当前页面栈。当前框架支持的路由方式有：

• 初始化（新页面入栈）-> onLoad, onShow
• 打开新页面（新页面入栈）onHide -> onLoad, onShow
  调用 API wx.navigateTo， 使用组件 <navigator open-type="navigateTo"/>
• 页面重定向（当前页面出栈，新页面入栈）onUnload -> onLoad, onShow
  调用 API wx.redirectTo， 使用组件 <navigator open-type="redirectTo"/>
• 页面返回（页面不断出栈，直到目标返回页）onUnload -> onShow
  调用 API wx.navigateBack ， 使用组件<navigator open-type="navigateBack">
• Tab切换（页面全部出栈，只留下新的 Tab 页面）
  调用 API wx.switchTab ， 使用组件 <navigator open-type="switchTab"/>
• 重启动（页面全部出栈，只留下新的页面）onUnload -> onLoad, onShow
  调用 API wx.reLaunch ， 使用组件 <navigator open-type="reLaunch"/>

需要注意的是Tab切换情况比较多，对应的生命周期可参照官方说明。

另外，

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