小程序、页面、组件 分别的生命周期

小程序全局：

     onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）；

     onShow：当小程序启动，或从后台进入前台显示，会触发 onShow；

     onHide：当小程序从前台进入后台，会触发 onHide；

     onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。

App({
  globalData: {
    name: '我是全局呀！！！'
  },
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('全局：onLaunch',this.globalData)
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('全局：onShow',this.globalData)
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('全局：onHide',this.globalData)
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log('全局：onError',this.globalData)
  }
})

 

页面：

      onLoad：监听页面加载；

     onReady：监听页面初次渲染完成；

     onShow：监听页面显示；

     onHide：监听页面隐藏；

     onUnload：监听页面卸载；

     onPullDownRefresh：监听用户下拉动作；

     onReachBottom：页面上拉触底事件的处理函数；

     onShareAppMessage：用户点击右上角分享。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '我是页面呀！！！',
    newName: '我是页面传到组件的数据呀！！！'
  },

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

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

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

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('页面：onShareAppMessage',this.data)
    
  }
})

 

 

组件：

     lifetimes（组件生命周期）: {

          created：在组件实例刚刚被创建时执行；

          attached：在组件实例进入页面节点树时执行；

          ready：在组件在视图层布局完成后执行；

          moved：在组件实例被移动到节点树另一个位置时执行；

          detached：在组件实例被从页面节点树移除时执行；

          error：每当组件方法抛出错误时执行；

     },

     pageLifetimes（组件所在页面的生命周期）: {

          show：页面被展示；

          hide：页面被隐藏；

          resize：页面尺寸变化。 

     }

Component({
  /**
   * 组件的属性列表
   */
  properties: {
     newName: {
       type: String,
       value: ''
     }
  },

  /**
   * 组件的初始数据
   */
  data: {
    name: '我是组件呀！！！'
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

  lifetimes: {

    /**
   * 生命周期函数--在组件实例刚刚被创建时执行
   */
    created() {
      console.log("组件：created", this.data)
    },

    /**
   * 生命周期函数--在组件实例进入页面节点树时执行
   */
    attached() { 
      console.log("组件：attached", this.data)
    },

    /**
   * 生命周期函数--在组件在视图层布局完成后执行
   */
    ready() {
      console.log("组件：ready", this.data)
    },

    /**
   * 生命周期函数--在组件实例被移动到节点树另一个位置时执行
   */
    moved() {
      console.log("组件：moved", this.data)
    },

    /**
   * 生命周期函数--在组件实例被从页面节点树移除时执行
   */
    detached() {
      console.log("组件：detached", this.data)
    },

    /**
   * 生命周期函数--每当组件方法抛出错误时执行
   */
    error() {
      console.log("组件：error", this.data)
    },

    /*组件所在页面的生命周期 */
    pageLifetimes: {
      show: function () {
        // 页面被展示
        console.log("组件：show", this.data)
      },
      hide: function () {
        // 页面被隐藏
        console.log("组件：hide", this.data)
      },
      resize: function (size) {
        // 页面尺寸变化
        console.log("组件：resize", this.data, size)
      }
    }
   
  }
})

 

结果输出的先后顺序：