微信小程序开发 —— App、Page、Component 生命周期-邱少羽梦

在微信小程序中，生命周期 是指小程序从启动到销毁的整个过程，包括 App 生命周期、Page 生命周期 和 Component 生命周期。以下是详细的分类和说明：

1. App 生命周期

App 生命周期是指整个小程序的全局生命周期事件，主要包括以下事件：

事件	说明
`onLaunch`	小程序初始化完成时触发（全局只触发一次）。
`onShow`	小程序启动时，或从后台进入前台显示时触发。
`onHide`	小程序从前台进入后台时触发。
`onError`	小程序发生脚本错误或 API 调用失败时触发。
`onPageNotFound`	小程序要打开的页面不存在时触发。
`onUnhandledRejection`	小程序未处理的 Promise 拒绝（rejection）时触发。
`onThemeChange`	系统主题变化时触发（例如从浅色模式切换到深色模式）。

2. Page 生命周期

Page 生命周期是指单个页面的生命周期事件，主要包括以下事件：

事件	说明
`onLoad`	页面加载时触发，一个页面只会调用一次。
`onShow`	页面显示时触发，每次打开页面都会调用。
`onReady`	页面初次渲染完成时触发，一个页面只会调用一次。
`onHide`	页面隐藏时触发，例如跳转到其他页面或小程序进入后台。
`onUnload`	页面卸载时触发，例如页面被关闭或跳转到其他页面。
`onPullDownRefresh`	用户下拉刷新时触发。
`onReachBottom`	用户上拉触底时触发。
`onShareAppMessage`	用户点击右上角分享时触发。
`onPageScroll`	页面滚动时触发。
`onResize`	页面尺寸变化时触发（例如屏幕旋转）。
`onTabItemTap`	点击当前页面的 tab 时触发。

3. Component 生命周期

Component 生命周期是指自定义组件的生命周期事件，主要包括以下事件：

事件	说明
`created`	组件实例刚刚被创建时触发，此时还不能调用 `setData`。
`attached`	组件实例进入页面节点树时触发，此时可以调用 `setData`。
`ready`	组件布局完成时触发，此时可以获取节点信息。
`moved`	组件实例被移动到节点树另一个位置时触发。
`detached`	组件实例从页面节点树移除时触发。
`error`	组件方法或事件处理函数抛出错误时触发。

4. 生命周期流程图

以下是微信小程序的生命周期流程图：

(1) App 生命周期流程

启动小程序 → onLaunch → onShow → 运行中 → onHide → 进入后台 → onShow → 恢复前台

(2) Page 生命周期流程

页面加载 → onLoad → onShow → onReady → 页面显示 → onHide → 页面隐藏 → onUnload → 页面卸载

(3) Component 生命周期流程

组件创建 → created → attached → ready → 组件运行 → moved → detached → 组件销毁

5. 示例代码

(1) App 生命周期示例

App({
  onLaunch(options) {
    console.log('小程序初始化完成', options);
  },
  onShow(options) {
    console.log('小程序显示', options);
  },
  onHide() {
    console.log('小程序进入后台');
  },
  onError(error) {
    console.error('小程序发生错误', error);
  }
});

(2) Page 生命周期示例

Page({
  onLoad(options) {
    console.log('页面加载', options);
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  onPullDownRefresh() {
    console.log('用户下拉刷新');
  },
  onReachBottom() {
    console.log('用户上拉触底');
  }
});

(3) Component 生命周期示例

Component({
  lifetimes: {
    created() {
      console.log('组件创建');
    },
    attached() {
      console.log('组件进入页面节点树');
    },
    ready() {
      console.log('组件布局完成');
    },
    detached() {
      console.log('组件从页面节点树移除');
    }
  }
});

6. 注意事项

生命周期顺序：
- App 生命周期优先于 Page 生命周期，Page 生命周期优先于 Component 生命周期。
- 例如，小程序启动时，先触发 App 的 onLaunch，再触发 Page 的 onLoad。
onLoad 和 onShow 的区别：
- onLoad 只会在页面加载时触发一次。
- onShow 会在每次页面显示时触发。
onReady 的使用：
- onReady 是页面初次渲染完成时触发，适合在此处操作页面 DOM 或初始化动画。
onUnload 的用途：
- onUnload 适合用于清理定时器、取消网络请求等操作。
Component 生命周期的兼容性：
- Component 生命周期需要基础库版本 1.6.3 及以上支持。

通过理解和使用这些生命周期事件，可以更好地控制小程序、页面和组件的初始化、运行和销毁过程，提升应用的性能和用户体验。

目录CONTENT

微信小程序开发 —— App、Page、Component 生命周期