微信小程序学习6:页面生命周期回调函数
文章目录
- 微信小程序学习6:页面生命周期回调函数
- 1 生命周期图像
- 2 生命周期回调函数触发条件
- onLoad(Object query)
- onShow()
- onReady()
- onHide()
- onUnload()
- 3 页面路由触发方式
生命周期说明:微信官方把小程序页面的打开到关闭抽象为5个左右的阶段,每个阶段对应一个回调函数,就类似于我们要经历出生,儿童,青少年等等阶段。
官方文档地址https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
页面生命周期回调函数包含在页面的Page()对象
里
代码示例:
//index.js
Page({
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
})
详细的参数含义和使用请参考 Page 参考文档 。
1 生命周期图像
2 生命周期回调函数触发条件
生命周期的触发以及页面的路由方式详见
onLoad(Object query)
页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
这个回调函数是最常用的,一般我们会把想要在页面初始展示的数据都在这个回调函数准备好。
参数:
名称 | 类型 | 说明 |
query | Object | 打开当前页面路径中的参数,即是打开路径 ?号后面的参数 |
onShow()
页面显示/切入前台时触发。
onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
注意:对界面内容进行设置的 API 如wx.setNavigationBarTitle,请在onReady
之后进行。详见生命周期
onHide()
页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab
切换到其他页面,小程序切入后台等。
onUnload()
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
3 页面路由触发方式
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | 调用 API wx.navigateTo | onHide | onLoad, onShow |
页面重定向 | 调用 API wx.redirectTo | onUnload | onLoad, onShow |
页面返回 | 调用 API wx.navigateBack | onUnload | onShow |
Tab 切换 | 调用 API wx.switchTab | ||
重启动 | 调用 API wx.reLaunch | onUnload | onLoad, onShow |