微信小程序（页面生命周期）

【本节大纲】
（1）页面构造/注册器Page()
（2）页面注册器参数
data初始化数据
页面生命周期
页面用户行为
（3）页面生命周期及顺序
【前言】
注册页面：
对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例
作用：指定页面的初始数据、生命周期回调、事件处理函数等。
页面的生命周期：
页面生命周期函数就是每进入/切换到一个新的页面的时候，就会调用的生命周期函数。

页面构造/注册器Page()

宿主环境提供了 Page() 构造器用来注册小程序页面
Page()在页面脚本page.js中调用，Page() 的调用方式如下所示

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

Page构造器接受一个Object参数

• data属性是当前页面的初始数据
• onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期
• onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll ，这4个回调是页面的用户行为，即页面用户行为

Page构造器参数

参数	类型	作用
data	Object	页面的初始数据
onLoad	Function	生命周期函数–监听页面加载，触发时机早于onShow和onReady
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示，触发事件早于onReady
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载–页面栈

页面生命周期

页面生命周期：

1. onLoad监听页面加载，触发时机早于onShow和onReady

触发时机：页面加载时触发
页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page构造器参数所定义的onLoad方法会被调用
触发次数：onLoad在页面没被销毁之前只会触发1次
参数：在onLoad的回调中，可以获取当前页面所调用的打开参数query，关于打开当前页面路径中的参数后续介绍

2. onReady监听页面初次渲染完成

触发时机：页面显示/切入前台时触发
页面显示之后，Page构造器参数所定义的onShow方法会被调用，一般从别的页面返回到当前页面时，当前页的onShow方法都会被调用。
页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或换页重新进入页面时）
通俗理解：就是这个页面出现一次，他就被调用一次。包括你前进后退到这个页面。

3. onShow监听页面显示，触发事件早于onReady

触发时机：页面初次渲染完成时触发
首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的动态设置一般在onReady之后设置。

4. onHide监听页面隐藏

触发时机：页面隐藏/切入后台时触发
如 wx.navigateTo 跳转或底部 tab 切换到其他页面，小程序切入后台等。
即页面不可见时，Page构造器参数所定义的onHide方法会被调用，这种情况会在使用wx.navigateTo切换到其他页面、底部tab切换时触发。

5. onUnload监听页面卸载–（页面栈）

触发时机：页面卸载时触发
如使用重定向方法wx.redirectTo或wx.navigateBack关闭当前页返回上一页时调用。
即当前页面使用wx.redirectTo或wx.navigateBack返回到其他页时，当前页面会被微信客户端销毁回收，此时Page构造器参数所定义的onUnload方法会被调用。

页面用户行为：

1. onPullDownRefresh监听用户下拉动作
2. onReachBottom页面上拉触底事件的处理函数
3. onShareAppMessage用户点击右上角转发
4. onPageScroll页面滚动触发事件的处理函数

注意：页面切换操作是onHide和onShow切换

加载顺序：

小程序初次启动：
入口文件小程序app.js → onLaunch小程序初始化 → onShow小程序展示 → onLoad页面加载 → onShow页面显示 → onReady页面初次渲染完成
小程序关闭：
onHide页面隐藏→onHide小程序隐藏
小程序初次启动：
onShow小程序展示→onShow页面显示
页面切换：
导航页切换：

1. 导航TabBar，由导航A页面→导航B页面
   导航A页面onHide页面隐藏→导航B页面onShow页面显示
2. 导航TabBar，由导航B页面→导航A页面
   导航B页面onHide页面隐藏→导航A页面onShow页面显示

小程序双线程→渲染层Webview、逻辑层JsCore
setData(data, callback)
界面交互API：
wx.showLoading({})显示加载框
wx.hideLoading()隐藏加载框
滚动API：wx.pageScrollTo

页面生命周期小结：

• 页面生命周期函数的调用顺序为：onLoad>onShow>onReady
• onHide函数为隐藏页面时触发，onUnload为卸载当前页面时触发。

基本上加载一个小程序进来之后的执行顺序为

• 小程序onLaunch–小程序onShow-页面onLoad–页面onShow–页面onReady