小程序页面生命周期

小程序页面生命周期

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

使用 Page 构造器注册页面时，和data同级
使用 Component（组件） 构造器构造页面，在methods里面

1.onLoad-生命周期回调-监听页面加载

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //  onLoad发送异步请求 来初始化页面数据
    console.log("页面生命周期：onLoad")
  }

2.onShow-生命周期回调-监听页面显示

/**
   * 生命周期函数--监听页面显示
   */
 onShow: function () {
    console.log("页面生命周期：onShow")
  }

3.onReady-生命周期回调-监听页面初次渲染完成

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

4.onHide-生命周期回调-监听页面隐藏

/**
   * 生命周期函数--监听页面隐藏
   */
 onHide: function () {
    // 跳转页面时触发
    // 页面从前台变为后台时执行
    console.log("页面生命周期：onHide")
  }

5.onUnload-生命周期回调-监听页面卸载

/**
   * 生命周期函数--监听页面卸载  也是可以通过点击超链接来演示
   * 关闭当前页面 会触发此事件
   */
 onUnload: function () {
 	// 页面销毁时执行
    console.log("页面生命周期：onUnload")
  }

6.onPullDownRefresh-监听用户下拉动作

 /**
   * 页面相关事件处理函数--监听用户下拉动作 
   */
 onPullDownRefresh: function () {
    //  页面的数据 或者效果 重新刷新
    consolelog("页面生命周期：onPullDownRefresh")
  }

7.onReachBottom-监听上拉触底事件的处理函数

 /**
   * 页面上拉触底事件的处理函数，页面触底触发 
   * 上拉刷新：在APP.JSON 的windows里面写"enablePullDownRefresh": true
   * 需要让页面上下滚动才行
   */
 onReachBottom: function () {
    //  多用在上拉加载下一页数据
    console.log("页面生命周期：onReachBottom")
  }

8.onShareAppMessage-用户点击右上角转发

 /**
   * 用户点击右上角分享
   */
 onShareAppMessage: function () {
    console.log("页面生命周期：onShareAppMessage")
  }

9.onPageScroll-页面滚动事件的处理函数

 /**
   * 页面滚动就可以触发和onReachBottom、onPullDownRefresh 类似
   */
 onPageScroll(){
 	// 页面滚动时执行
    console.log("页面生命周期：onPageScroll")
  }

10.onResize-页面尺寸发生改变时触发

/**
   * 页面尺寸发生变化
   * 小程序发生横屏或者竖屏触发
   * 在需要切换横屏或者竖屏的页面的json中 加入"pageOrientation": "auto"
   */
 onResize(){
    console.log("页面生命周期：onResize")
  }

11.onTabItemTap - 当前是tab页时，点击tab触发

/**
   * 必须要求当前页面是tabbar页面，意思是此事件必须卸载tabbar的js里面
   * 点击自己的tab item的时候才会触发
   */
  onTabItemTap(){
    console.log("页面生命周期：onTabItemTap")
 }

---

总结

Page 构造器适用于简单的页面。但对于复杂的页面， Page 构造器可能并不好用。

此时，可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面。