微信小程序的 应用生命周期 以及 页面生命周期 `详解`

START

• 番茄又又又来写点啥了，近段时间老是遇到小程序生命周期的问题，包括回答面试啊，自己日常开发中使用，都记得很模糊，就记得几个生命onShow,onHide，执行顺序也不清晰明了。
• 这次特意去翻看官方文档以及相关的博客，重新整理一下笔记，方便后续忘记的时候复习。
• 当然编写仓促，某些地方或许不准确，望见谅，参考即可。

应用的生命周期

• 官方APP生命周期文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
• 对应文件 文件目录>app.js

说明

5LQ[LD$(U5]ZBI1VUSJ~(YY.png

代码说明

// app.js
App({
  // 1.当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLaunch() {
    // 一般用于获取用户信息
    console.log("onLaunch")
  },

  // 2.当小程序启动，或者从后台进入前端显示，就会触发onShow
  onShow() {
    // 一般做一下数据重置
    // 清除定时器
    console.log("onShow")
  },

  // 3.当小程序从前台进入后台会触发onHide
  onHide() {
    console.log("onHide")
  },

  // 4.当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
  onError(err) {
    // 可以收集`err`用户错误信息
    console.log("onError",err)
  },

  // 5.当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数
  onPageNotFound() {
    // 当应用第一次启动找不到入口文件就会触发
    console.log("onPageNotFound")
  }
})

运行截图

IU.png

页面的生命周期

• 官方页面的生命周期文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
• 对应文件 文件目录>page>index(自己定义的文件)

说明

33333333.png

代码

// index.js
// 获取应用实例
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [
      1, 2, 3, 4,23,12,,123,12,312,3,12,312,3,12,312,3,12,312,3,12,31,,1,111,,11,1,1,1,1,,1,1
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数
    console.log("页面生命周期", "onLoad",)
  },

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


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 页面初次渲染完成 ，一个页面只会调用一次，表示页面以及渲染完成，可以和视图层进行交互
    console.log("页面生命周期", "onReady",)
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //当navigateTo或底部tab切换时调用
    console.log("页面生命周期", "onHide",)
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 卸载当前页面会触发
    // 当redirectTo或navigateBack的时候调用。
    console.log("页面生命周期", "onUnload",)
  },

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("页面生命周期", "onShareAppMessage",)

  },


  // 页面尺寸发生改变
  onResize(){
    // 一般是手机发生横屏竖屏
    console.log("页面生命周期", "onResize",)
  }
})

效果截图

序列 01_2.gif

TiPS

• 小程序隐藏的时候，页面的onHide先与应用的onHide
• 小程序展示的时候，页面的onShow后于应用的onShow

先隐藏页面再隐藏应用；先展示应用再展示页面

官方生命周期图解

W$OVJGJQ)Y9B0H6{7)KL4P0.png

END

• 暂时就写到这里啦，┓( ´∀` )┏