微信小程序中的生命周期

微信小程序的生命周期大概分为三步
1.全局生命周期
2.页面生命周期
3.组件生命周期

一. 生命周期 App（全局）
项目根目录app.js文件

App({
  onLaunch (options) {
     
    console.log('小程序初始化')
    // 在项目打开时可以写一些业务逻辑

  },
  onShow(options) {
    console.log('监听小程序启动或切前台')
  },
  onHide() {
    console.log('监听小程序切后台')
  },

  onError(msg) {
    console.log('错误监听函数')
  },
  onPageNotFound(res) {
    console.log('小程序要打开的页面不存在时触发');
    wx.redirectTo({ // 重定向 比如页面错误 我跳转到别的页面
      url: 'pages/...'
    }) // 如果是 tabbar 页面，就使用 wx.switchTab
  }
  
})

2. 页面生命周期

pages目录下的xxx.js

Page({

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

  },
 /*页面生命周期*/
 onLoad: function (options) {
    console.log("初始化阶段");
  },
 onReady: function () {
    console.log('监听页面初次渲染完成')

  },
  onShow: function () {
    console.log('监听页面显示')
  },
  onHide: function () {
    console.log('监听页面隐藏')

  },
  onUnload: function () {
    console.log('监听页面卸载')
  },

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

  },

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

  },

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

  }
})

3. 组件生命周期

// pages/components/xxx.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

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

  },

  /*组件生命周期*/ 
  lifetimes: {
    created() {
      console.log("在组件实例刚刚被创建时执行")
    },
    attached() { 
      console.log("在组件实例进入页面节点树时执行")
    },
    ready() {
      console.log("在组件在视图层布局完成后执行")
    },
    moved() {
      console.log("在组件实例被移动到节点树另一个位置时执行")
    },
    detached() {
      console.log("在组件实例被从页面节点树移除时执行")
    },
    error() {
      console.log("每当组件方法抛出错误时执行")
    },
    /*组件所在页面的生命周期 */
    pageLifetimes: {
      show: function () {
        // 页面被展示
        console.log("页面被展示")
      },
      hide: function () {
        // 页面被隐藏
        console.log("页面被隐藏")
      },
      resize: function (size) {
        // 页面尺寸变化
        console.log("页面尺寸变化")
      }
    }
   
  }
 
})

声明周期不管是在vue、react 小程序中都是至深莫测的 我们可以根据需求在不同的生命周期中去处理一些业务逻辑~