微信小程序打夯之旅（十一）：生命周期

页面生命周期

官方文档直接飞机票：点击起飞

生命周期	说明
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	小程序切到后台，如关闭小程序、退出微信、接电话等行为