小程序 — 小程序生命周期及页面生命周期

1、小程序生命周期

(1)首先小程序的生命周期函数是在 app.js 里面调用的,App(Object) 函数用来注册一个小程序。接受一个 Object 参数,指定其小程序的生命周期回调;一般有onLaunch 监听小程序初始化、onShow 监听小程序显示、onHide 监听小程序隐藏等生命周期回调函数。
小程序 — 小程序生命周期及页面生命周期_第1张图片
(2)看文字对概念有点模糊对不对?理解概念的最好方法就是上手实际操作一遍。那么,我们来看看当打开一个小程序的时候,到底是 onLaunch、onShow、onHide 哪个先调用以及什么时候开始调用的。

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

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

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

小程序 — 小程序生命周期及页面生命周期_第2张图片
小程序 — 小程序生命周期及页面生命周期_第3张图片
(3)从中我们可以知道小程序的生命周期函数的调用顺序为:onLaunch>onShow>onHide

2、页面的生命周期

(1)页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

小程序 — 小程序生命周期及页面生命周期_第4张图片
(2)老规矩,我们用代码来演示下各个页面生命周期函数的先后顺序。

onLoad(options) {
    console.log('onLoad监听页面加载');
  }

  onReady() {
    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {
    console.log('onShow监听页面显示');
  }

  onHide() {
    console.log('onHide监听页面隐藏');
  }

  onUnload() {
    console.log('onUnload监听页面卸载');
  }

小程序 — 小程序生命周期及页面生命周期_第5张图片
从中我们可以知道小程序的生命周期函数的调用顺序为:onLoad>onReady>onShow;至于 onHide 函数就是当隐藏页面的时候触发。

参考:https://developers.weixin.qq.com/miniprogram/dev/framework/

你可能感兴趣的:(小程序)