小程序生命周期与页面周期详解

小程序生命周期的对象是整个小程序，页面周期的对象是单个页面，这点要分清，下面我们来详细了解一下这两个周期。

一、小程序生命周期。

小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。接受一个 Object 参数，指定其小程序的生命周期回调。

官方文档地址：

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

要理解，最简单的办法，直接实践：

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}

从图中我们可知小程序的生命周期函数的调用顺序为：

onLaunch>onShow

onHide函数就是当隐藏页面的时候触发

二、页面周期

当你每打开到一个新的页面的时候，就会调用的页面周期函数。注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

官方文档地址：

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

还是上dome

onLoad(options) {
  console.log('onLoad监听页面加载');
}
onReady() {
  console.log('onReady监听页面初次渲染完成');
}
onShow() {
  console.log('onShow监听页面显示');
}
onHide() {
  console.log('onHide监听页面隐藏');
}
onUnload() {
  console.log('onUnload监听页面卸载');
}

调用顺序为：

onLoad>onReady>onShow

onHide函数就是当隐藏页面的时候触发

onUnload函数就是当页面卸载的时候触发

有些刚接触编程的朋友来说，生命周期感觉难以理解，没有什么好的办法，实践最有效。

除此之外，关于小程序的生命周期和页面周期触发顺序，一般来说是先小程序的周期再页面周期，不过有时候顺序会反过来，不是绝对的，所以写的时候逻辑上要做一些处理，写多了自然就明白了。