测试微信小程序页面的生命周期
前言:这篇随笔讲介绍了微信小程序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
1 Page({ 2 data: { 3 logs: [] 4 }, 5 onLoad: function (options) { 6 // 页面创建时执行 7 console.log("onLoad====页面创建时执行") 8 }, 9 onShow: function () { 10 // 页面出现在前台时执行 11 console.log("onShow====页面出现在前台时执行") 12 }, 13 onReady: function () { 14 // 页面首次渲染完毕时执行 15 console.log("onReady====页面首次渲染完毕时执行") 16 }, 17 onHide: function () { 18 // 页面从前台变为后台时执行 19 console.log("onHide====页面从前台变为后台时执行") 20 }, 21 onUnload: function () { 22 // 页面销毁时执行 23 console.log("onUnload====页面销毁时执行") 24 }, 25 onPullDownRefresh: function () { 26 // 触发下拉刷新时执行 27 console.log("onPullDownRefresh====触发下拉刷新时执行") 28 }, 29 toNextPage:function(){ 30 wx.navigateTo({ 31 url: '../nextPage/nextPag', 32 success: function (res) { console.log("组件调用success")}, 33 fail: function (res) { console.log("组件调用fail")}, 34 complete: function (res) { console.log("组件调用complete")}, 35 }) 36 } 37 })
log.json (enablePullDownRefresh下拉刷新)
1 { 2 "navigationBarTitleText": "测试页面生命周期", 3 "usingComponents": {}, 4 "enablePullDownRefresh": true, 5 "backgroundTextStyle": "dark" 6 }
log.wxml
1 <view bindtap="toNextPage" class="log">点我跳转到下一个页面</view>
- 当小程序进入index页面,初始化完成,此时点击头像触发事件处理函数,进入log页面,看打印结果:
- 当点击工具栏“切后台”时,触发onHide,切前台触发onShow:
- 当点击“点我跳转到下一个页面”时,触发log页面的onHide与onShow:
额外补充,当调用接口时,成功、失败与完成的回调函数将会这样执行:
- 成功:success ==> complete
- 失败: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、其他还有一些生命周期方法,需要在特定条件下执行的。比如:页面缩放时、下拉刷新时,就不一一列举了,可以从前面的官方文档中查找到。
页面生命周期实际上在开发中比较常用,以适应不同的功能需求,作为学习者,我们也需要多加注意这些问题,养成良好的思维习惯。