小程序生命周期详解

微信小程序的生命周期是开发中最核心的概念之一，它决定了你的代码在什么时候执行。

简单来说，微信小程序的生命周期分为三层：应用级别 (App)、页面级别 (Page) 和 组件级别 (Component)。

以下是详细的层级讲解与最佳实践：

这属于全局层级，定义在 app.js 中。它主要控制小程序整体的启动、切前台和切后台。

关键概念：冷启动 vs 热启动
冷启动 (onLaunch)：用户首次打开，或小程序被微信销毁后再次打开。
热启动 (onShow)：用户只是把小程序切到了后台（如回微信聊天），短时间内再次打开。此时不会触发 onLaunch。

这是最常用的层级，定义在每个页面的 .js 文件中。它管理当前页面的加载、显示和销毁。

生命周期	触发时机	关键点与最佳实践
`onLoad(options)`	页面加载时触发。	只执行一次。`options` 包含页面参数（URL传参）。适合发起网络请求 (`request`)。
`onShow`	页面显示时触发。	每次切回该页面都会触发。适合更新动态数据（如购物车数量）。
`onReady`	页面初次渲染完成时触发。	只执行一次。此时才能操作界面上的节点（如 `createSelectorQuery`）或绘图（Canvas）。
`onHide`	页面隐藏时触发。	当使用 `wx.navigateTo` 或切换 Tab 时触发。页面进入后台，但未销毁。
`onUnload`	页面卸载时触发。	当使用 `wx.redirectTo` 或 `wx.navigateBack` (左上角返回) 时触发。页面被销毁，需清理定时器。

自定义组件的生命周期，官方推荐写在 lifetimes 字段中（优先级最高）。

生命周期	描述	常用场景
`created`	组件实例刚刚被创建。	不能调用 `setData`。通常只用于给 `this` 添加自定义属性。
`attached`	组件实例进入页面节点树。	最常用。相当于 Vue 的 `mounted`。适合做初始化、请求数据。
`detached`	组件实例被从页面节点树移除。	清理工作（如清除定时器）。

当你打开一个小程序的首页时，执行顺序如下：

当你从页面 A 跳转到页面 B (wx.navigateTo)：

当你从页面 B 返回页面 A (wx.navigateBack)：

数据初始化：尽量放在 onLoad，减少不必要的请求。
UI 操作：必须放在 onReady 之后，否则获取不到节点信息。
资源释放：务必在 onUnload (页面) 或 detached (组件) 中清除 setInterval，否则会导致内存泄漏。
Vue 开发者注意：小程序的 onLoad 类似于 Vue 的 created，onReady 类似于 Vue 的 mounted，但 onShow 在 Vue 中没有直接对应的（除非用 keep-alive 的 activated）。

评论