生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成。

应用生命周期

应用生命周期需要在 app.js 文件中的 App() 方法中进行定义，由三个函数组成：

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

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

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

页面生命周期

页面生命周期需要在 pages 目录下的 *.js 文件中的 Page() 方法进行定义，由四个函数组成：

// pages/list/list.js
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

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

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

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

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

组件生命周期

Component({
  lifetimes: {
    // created 生命周期函数
    // 在组件实例刚刚被创建时执行
    // 此时还不能调用 setData，通常用于一些初始化操作
    created() {},

    // attached 生命周期函数
    // 在组件实例进入页面节点树时执行
    // 此时可以调用 setData，通常用于初始化数据或请求数据
    attached() {},

    // ready 生命周期函数
    // 在组件布局完成后执行
    // 此时可以获取到节点的信息（如宽度、高度等），通常用于操作 DOM 或执行一些依赖于布局的逻辑
    ready() {},

    // moved 生命周期函数
    // 在组件实例被移动到节点树另一个位置时执行
    // 这个生命周期函数不常用，通常用于处理组件位置变化后的逻辑
    moved() {},

    // detached 生命周期函数
    // 在组件实例被从页面节点树移除时执行
    // 通常用于清理工作，如取消定时器、解绑事件等
    detached() {},
  },
})

组件所在页面的生命周期

Component({
  // pageLifetimes 对象用于定义组件监听页面生命周期的函数
  pageLifetimes: {
    // show 生命周期函数
    // 当页面显示时触发
    // 适合用于页面重新显示时的逻辑，如刷新数据
    show() {},

    // hide 生命周期函数
    // 当页面隐藏时触发
    // 适合用于页面隐藏时的逻辑，如暂停定时器或动画
    hide() {},

    // resize 生命周期函数
    // 当页面尺寸变化时触发
    // 适合用于处理页面布局变化的逻辑
    resize() {},
  },
})