测试微信小程序页面的生命周期

　　前言：这篇随笔讲介绍了微信小程序Page页面的生命周期，在开发体系中是基础中的基础。

官方链接：

　　1、小程序页面生命周期图：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html。

　　2、注册页面生命周期的接口：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

　　下面是我的测试，使用官方hello world示例，为了验证加入了一个nextPage页面。

log.js

Page({
  data: {
    logs: []
  },
  onLoad: function (options) {
    // 页面创建时执行
    console.log("onLoad====页面创建时执行")
  },
  onShow: function () {
    // 页面出现在前台时执行
    console.log("onShow====页面出现在前台时执行")
  },
  onReady: function () {
    // 页面首次渲染完毕时执行
    console.log("onReady====页面首次渲染完毕时执行")
  },
  onHide: function () {
    // 页面从前台变为后台时执行
    console.log("onHide====页面从前台变为后台时执行")
  },
  onUnload: function () {
    // 页面销毁时执行
    console.log("onUnload====页面销毁时执行")
  },
  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
    console.log("onPullDownRefresh====触发下拉刷新时执行")
  },
  toNextPage:function(){
    wx.navigateTo({
      url: '../nextPage/nextPag',
      success: function (res) { console.log("组件调用success")},
      fail: function (res) { console.log("组件调用fail")},
      complete: function (res) { console.log("组件调用complete")},
    })
  }
})

log.json 　(enablePullDownRefresh下拉刷新)

{
  "navigationBarTitleText": "测试页面生命周期",
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

log.wxml

<view bindtap="toNextPage" class="log">点我跳转到下一个页面</view>

• 当小程序进入index页面，初始化完成，此时点击头像触发事件处理函数，进入log页面，看打印结果：

• 当点击工具栏“切后台”时，触发onHide，切前台触发onShow：

 

• 当点击“点我跳转到下一个页面”时，触发log页面的onHide与onShow：

　　　　额外补充，当调用接口时，成功、失败与完成的回调函数将会这样执行：

1. 1. 　　成功：success  ==> complete
   2. 　　失败：fail  ==> complete

• 当点击log页面的返回按钮再进log页面，触发的是什么呢？

总结：

　　基本上需要注意的就是这些了，再次总结一下容易理解错的地方：

1、页面生命周期和小程序App的生命周期稍有不同，但原理类似，有需要可以看一下官方给出的示例再自己进行测试。

2、当进入页面时生命周期函数的调用顺序　　

　　（1）先执行onLoad（页面创建时执行）　　

　　（2）再执行onShow（页面渲染在前台时执行）　　

　　（3）最后执行onReady（页面首次渲染完毕时执行）

3、点击页面子页面或在该页面切后台，触发的是onHide；子页面返回该页面或切回前台触发的是onShow（可页面周期内可多次）；

4、点击页面父页面会将此页面销毁触发onUnload（页面销毁时执行），通过父页面再次点进该页面时会重新加载页面，依次触发onLoad、onShow、onReady；

5、（未验证）页面生存过程中，onLoad只触发一次，onReady也只触发一次，只是先后不同。

6、其他还有一些生命周期方法，需要在特定条件下执行的。比如：页面缩放时、下拉刷新时，就不一一列举了，可以从前面的官方文档中查找到。

 

　　页面生命周期实际上在开发中比较常用，以适应不同的功能需求，作为学习者，我们也需要多加注意这些问题，养成良好的思维习惯。