微信小程序页面生命周期及组件生命周期详解

组件生命周期：

lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      console.log('组件--在组件实例进入页面节点树时执行')
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      console.log('组件--在组件实例被从页面节点树移除时执行')
    },
  },
  pageLifetimes: {
    show: function() {
      // 页面被展示
      console.log('组件--页面被展示')
    },
    hide: function() {
      // 页面被隐藏
      console.log('组件--页面被隐藏')
    },
    resize: function(size) {
      // 页面尺寸变化
      console.log('组件--页面尺寸变化')
    }
  },

页面生命周期：

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

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

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

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

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

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("页面---页面上拉触底事件的处理函数")
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("页面---用户点击右上角分享")
  }

当你加载页面时候触发的先后顺序为：

组件--在组件实例进入页面节点树时执行
页面---监听页面加载
组件--页面被展示
页面---监听页面显示
页面---监听页面初次渲染完成；

从A页面跳到B页面，再从B页面后退到A页面

A组件attached--在组件实例进入页面节点树时执行
A页面onLoad---监听页面加载
A组件show--页面被展示
A页面onShow---监听页面显示
A页面onReady---监听页面初次渲染完成
A组件hide--页面被隐藏
A页面onHide---监听页面隐藏
B页面onLoad---监听页面加载
B页面onShow---监听页面显示
B页面onReady---监听页面初次渲染完成
B页面onUnload---监听页面卸载
A组件show--页面被展示
A页面onShow---监听页面显示

欢迎交流