微信小程序的生命周期详解

微信小程序1 个月前0109

生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。应用不会一直永久常驻在内存中,总是会有其存在的生命周期,从创建到销毁的整个过程,便是其生命周期。

一、Page中的生命周期函数

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 页面滚动触发事件的处理函数
   */
  onPageScroll: function () {
    // 注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。
    // 注意:请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据,会影响通信耗时。
  },

  /**
   * 页面尺寸改变时触发
   */
  onResize: function () {

  },

  /**
   * 当前是 tab 页时,点击 tab 时触发
   */
  onTabItemTap: function (item) {

  }
})

二、Component中的生命周期函数

微信小程序在Component中的生命周期与Page的生命周期是不一样的,其生命周期函数有两种形式,除了写在外面,还可以统一写在lifetimes属性中

1、组件实例化: created 节点树还未导入, 无法使用setData
2、节点树导入完成: attached 可以使用setData来初始化数据,但无法操作节点
3、组件布局完成: ready 组件布局完成,可以获取到节点信息也可以操作节点
4、组件实例被移动到节点树另一个位置: moved

组件生命周期函数的不同写法

Component({
  externalClasses: ['item-class'],
  properties: {
    item: {
      type: Object,
      observer: function (newVal, oldVal) {
        // console.log('newVal',newVal)
        // console.log('oldVal',oldVal)
      }
    }
  },
  data: {

  },
  methods: {

  },
  created: function () {
    // 组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setData
    console.log('Component created');
  },
  attached: function () {
    // 组件生命周期函数,在组件实例进入页面节点树时执行。
    console.log('Component attached');
  },
  ready: function () {
    // 在组件布局完成后执行,此时可以获取节点信息
    console.log('Component ready');
  },
  moved: function () {
    // 在组件实例被移动到节点树另一个位置时执行
    console.log('Component moved');
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
    console.log('Component detached');
  },
  lifetimes: {
    // 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明,
    //原有声明方式仍旧有效,如同时存在两种声明方式,则lifetimes字段内声明方式优先级最高
    created: function () {
      console.log('Component lifetimes created');
    },
    attached: function () {
      console.log('Component lifetimes attached');
    },
    ready: function () {
      console.log('Component lifetimes ready');
    },
    moved: function () {
      console.log('Component lifetimes moved');
    },
    detached: function () {
      console.log('Component lifetimes detached');
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期声明对象,目前仅支持页面的show和hide两个生命周期
    show: function () {
      console.log('Component pageLifetimes Show');
    },
    hide: function () {
      console.log('Component pageLifetimes Hide');
    }
  }
})

lifetimes中的生命周期函数执行了,外层的生命周期函数没有执行,所有当两者同时存在时,lifetimes中的优先级要高。

三、小程序路由跳转,生命周期函数的执行情况

1、使用navigateTo离开当前页面: 保留所离开的页面,执行onHide
2、使用navigateBack离开当前页面: 销毁当前页面,执行onHide -> onUnload
3、使用switchTabTo离开当前页面: 销毁所有非tab页面,但保留所有已经加载的tab页面

0 条评论

暂无评论