小程序生命周期

生命周期

和vue react 一样，小程序也有自己的生命周期。

小程序生命周期比较复杂，分为三类：

应用级

在app.js中定义

• onLaunch 应用初始化时执行

• onShow 应用恢复前台时执行

• onHide 应用到后台时执行

App({
    onLaunch() {},
    onShow() {},
    onHide() {}
})

页面级

• onLoad

• onShow

• onReady

• onHide

• onUnLoad

Page({
  /*页面的初始数据*/
  data: {},

  /*生命周期函数--监听页面加载*/
  onLoad: function (options) {},

  /*生命周期函数--监听页面初次渲染完成*/
  onReady: function () {},

  /*生命周期函数--监听页面显示*/
  onShow: function () {},

  /*生命周期函数--监听页面隐藏*/
  onHide: function () {},

  /*生命周期函数--监听页面卸载*/
  onUnload: function () {}
})

组件级

• created 组件被创建

• attached 进入到页面节点树

• ready 视图布局渲染完成

• moved 被移动到其他节点处

• detached 被移除

组件的生命周期建议放在lifetimes中

Component({
    lifetimes: {
        attached() {},
        detached() {}
    }
})

在组件中可以获得到页面生命周期

Component({
    pageLifetimes: {
        // 没有on
        show() {},
        hide() {},
        resize() {},
        routeDone() {}
    }
})