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

页面生命周期

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

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