页面生命周期
官方文档直接飞机票:点击起飞
| 生命周期 | 说明 |
|---|---|
| onLoad | 页面加载时触发,如首次打开页面,此时页面元素还没有渲染完成 |
| onShow | 页面从后台切换到前台时触发,页面加载时也会触发 |
| onReady | 页面首次渲染完成时触发 |
| onHide | 页面从前台切换到后台时触发,如退出小程序、退出微信、切换到其他页面等 |
| onUnload | 页面被销毁前触发,但是不能进行显示弹窗等行为,也不能阻断销毁过程 |
| onResize | 页面大小发生变化时触发,如开启屏幕旋转功能 |
- 首次打开一个页面依次触发:
onLoad->onShow->onReady - 二次打开一个
tabbar页面:只触发onShow,因为有缓存 - 二次打开一个非
tabbar页面:onLoad->onShow->onReady - 关闭一个二级页面:触发
onUnload,此时可以关闭一些定时器、关闭播放器等 - 关闭小程序:触发
onHide,可用于统计用户停留时长、暂停定时器等。
onLoad 和 onReady 比较
onLoad 是在页面渲染完成前触发,onReady 是在页面渲染完成后触发。但是微信并没有提供同步获取元素信息的接口(createSelectorQuery 是异步的),所以从业务角度出发这两个生命周期是一样的,因为 onLoad 相比于 onReady 更早一些,而且页面参数的获取也由 onLoad 完成,所以一般只使用 onLoad。
组件生命周期
官方文档直接火车票:点击发车
| 生命周期 | 说明 |
|---|---|
| created | 组件刚刚被创建时触发,此时组件还没有初始化,调用 setData 是无效的 |
| attached | 组件进入节点树时触发,此时组件还没有渲染完成,但是可以调用 setData |
| ready | 组件渲染完成时触发 |
| moved | 组件被移动到节点树另一个位置时触发 我至今不知道什么情况会移动组件位置!有没有大神解答一下 |
| detached | 组件从节点树移除时触发,如通过 wx:if 控制组件隐藏 |
以上是组件内部的生命周期,下面是组件内监听页面级生命周期的方法
| 生命周期 | 说明 |
|---|---|
| show | 与页面的生命周期 onShow 相同 |
| hide | 与页面的生命周期 onHide 相同 |
| resize | 与页面的生命周期 onResize 相同 |
注意
组件内监听页面生命周期的方式和监听组件生命周期的方式是不同的,比如说 ready 和 show
Component({
ready() {
console.log('component ready');
},
// 页面生命周期需要放在 pageLifetimes 里面
pageLifetimes: {
show() {
console.log('page onShow');
}
}
});
小程序生命周期
官方文档直接自行车票:点击出发
| 生命周期 | 说明 |
|---|---|
| onLaunch | 小程序首次运行,可用于初始化公共能力,如增强 Page 能力点击查看 |
| onShow | 小程序首次启动或者切到前台,可用于统计用户停留时长等信息 |
| onHide | 小程序切到后台,如关闭小程序、退出微信、接电话等行为 |