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

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

# 生命周期函数

官方文档

框架接口 (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 () {}
})

项目开发中常用的生命周期函数有:onLoadonReady

# 三、刷新事件

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

# 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()
  }
})
更新于 : 7/8/2024, 10:21:14 AM