微信小程序生命周期详解

微信小程序生命周期详解

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

这个配置说明在项目中定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

以上是微信小程序官方的解释。

小程序在启动前需要进行注册，而小程序的注册只能且必须在app.js中使用App()函数来处理，并且不能注册多个。

生命周期

小程序第一打开时将会下载整个小程序代码包，然后通过app.json配置初始化App，页面就会开始渲染首页，初始化完成后，执行App中onLauch()函数和onShow()函数，然后才执行页面中的onLoad()和onShow()，当小程序每次进入后台（当用户点击左上角关闭，或者按了设备 Home 键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。

前台和后台的概念

前台、后台定义： 当用户点击左上角关闭或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了手机后台；当再次进入微信（iphone）或再次打开小程序，又会从后台进入前台。

需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁。在 iOS 上，当微信客户端在一定时间间隔内（目前是 5 秒）连续收到两次及以上系统内存告警时，会主动进行小程序的销毁，并提示用户 「该小程序可能导致微信响应变慢被终止」。建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件，进行必要的内存清理。这个就是小程序的运行机制。

冷启动和热启动

用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。

小程序的冷启动：小程序在冷启动时会依次触发onLaunch—>onShow 小程序的热启动：小程序在热启动时会触发onShow 小程序关闭时：即小程序从前台进入后台时触发onHide

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

小程序的生命周期

App({

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

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

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

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

  }
})
小程序页面的生命周期：

Page({

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

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

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

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

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

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

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

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

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

更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

const updateManager = wx.getUpdateManager()
   updateManager.onCheckForUpdate(function (res) {
     // console.log(res.hasUpdate)
   })
   updateManager.onUpdateReady(function () {
     wx.showModal({
       title: '更新提示',
       content: '新版本已经准备好，是否重启应用？',
       success: function (res) {
         if (res.confirm) {
           // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
           updateManager.applyUpdate()
         }
       }
     })
   })
   updateManager.onUpdateFailed(function () {
     // 新的版本下载失败
     wx.showModal({
       title: '更新提示',
       content: '新版本下载失败',
       showCancel: false
     })
   })
   
   ```
   
以上是强制用户更新小程序代码的方法，如果拒绝重新启动的话，小程序是无法进入的，除非彻底关闭小程序，然后冷启动。