微信小程序生命周期

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 app.js生命周期

说到生命周期，无非就是创建、更新、销毁等阶段，类似于Vue，React

下面是我在微信小程序开发者工具输入App()自动补全的信息，关于这些钩子函数的解释都自动注释了，十分方便

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  }
})

2 页面Page生命周期

下面我们来看看页面的生命周期，同样的，写上Page()可以自动生成以下代码，其中钩子函数的解释也是直接注释好的

Page({

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

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

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

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

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

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

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

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

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

3 官网中关于App.js生命周期

生命周期回调函数写的很详细，推荐直接看官方文档

4 官网中页面生命周期

5 参考文章

• 微信小程序生命周期回调函数
• 微信小程序页面生命周期