关于小程序的生命周期，大致可以将其分为两类：应用生命周期、页面生命周期。

生命周期强调的是时间段，生命周期函数强调的是时间点。

生命周期函数

官方文档

框架接口 (opens new window)

一、APP 生命周期

  小程序从启动 -> 运行 -> 销毁依次调用的函数叫做应用的生命周期函数。

1、过程图示：

2、代码示例：

• app.js

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

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

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

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

项目开发中常用的生命周期函数有：onLaunch

二、页面生命周期

  小程序的每个页面从加载 -> 渲染 -> 销毁依次调用的函数叫做页面的生命周期函数。

1、过程图示

提示

  从下面的图示，我们可以明显的发现，小程序是采用的双线程模型

2、代码示例

• 页面.js 文件

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

  /**
   * 监听页面✨加载（一个页面只触发一次）
   */
  onLoad: function (options) {},

  /**
   * 监听页面初次✨渲染完成（一个页面只触发一次）
   */
  onReady: function () {},

  /**
   * 监听页面显示
   */
  onShow: function () {},

  /**
   * 监听页面隐藏
   */
  onHide: function () {},

  /**
   * 监听页面卸载（一个页面只触发一次）
   */
  onUnload: function () {},

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

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

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

项目开发中常用的生命周期函数有：onLoad、onReady

三、刷新事件

  页面的生命周期函数中的上拉、下拉的行为是值得我们关注的行为。

1、下拉刷新

下拉刷新常用于重新加载页面数据

配置：

• 页面.json 文件

{
  "usingComponents": {},
  // 1、启用下拉刷新
  "enablePullDownRefresh": true
  // 2、窗口样式配置
  // ……
}

使用：

• 页面.js 文件

Page({
  data: {
    count: 0
  },

  addCount() {
    this.setData({
      count: this.data.count + 1
    })
  }

  // 1、下拉动作监听
  onPullDownRefresh: function() {
    // console.log('触发了页面的下拉刷新')
    this.setData({
      count: 0
    })

    // 2、关闭下拉动作
    wx.stopPullDownRefresh()
  }
})

2、上拉触底

上拉触底常用于加载更多页面数据

配置：

• 页面.json 文件

{
  "usingComponents": {},
  // 设置下拉触底距离
  "onReachBottomDistance": 50
}

使用：

• 页面.js 文件

Page({
  data: {
    colorList: [],
    isloding: false
  },

  onLoad: function(option) {
    this.getColors()
  }

  async getColors() {
    // 1、展示loading加载效果
    wx.showLoading({title: '加载中'})

    this.setData({
      isloding: true
    })

    const {data: res} = await wx.p.request({
      url: 'https://note-taking.cn/api/colors',
      method: 'GET',
    }).then(function() {
      // 2、隐藏loading加载效果
      wx.hideLoading()

      this.setData({
        isloding: false
      })
    })

    this.setData({
      // 加载时追加的存储数据🚩
      colorList: [...this.data.colorList, ...res]
    })
  }

  // 上拉触底事件监听
  onReachBottom: function () {
    // 节流阀设置🍗
    if(this.data.isloding) return

    this.getColors()
  }
})