小程序中生命周期_小程序生命周期前端

一、应用生命周期（App 级）

在 app.js 中定义，管理整个小程序的全局状态。

1. 核心生命周期函数

生命周期 触发时机 用途示例 是否支持异步 onLaunch 小程序首次启动时触发（全局一次） 初始化全局数据、获取设备信息 ❌ onShow 小程序从后台切换到前台时触发 统计活跃用户、恢复全局状态 ✅ onHide 小程序从前台切换到后台时触发 保存临时数据、关闭长连接 ❌ onError 脚本错误或 API 调用失败时触发 错误监控上报 ✅

2. 代码示例

// app.jsApp({ onLaunch(options) { console.log(\'小程序初始化\', options.scene); // 场景值 }, onShow() { console.log(\'小程序显示\'); }, onHide() { console.log(\'小程序隐藏\'); }, onError(err) { console.error(\'全局错误:\', err); }});

3. 注意事项

• onLaunch 的参数 options 包含场景值（scene）、启动路径（path）等。

• 应用级生命周期无法访问页面数据，需通过全局变量 getApp() 共享数据。

---

二、页面生命周期（Page 级）

在页面的 .js 文件中定义，控制单个页面的行为。

1. 核心生命周期函数

生命周期 触发时机 用途示例 是否支持异步 onLoad 页面首次加载时触发（一次） 接收参数、初始化页面数据 ✅ onShow 页面每次显示时触发 刷新数据、恢复动画状态 ✅ onReady 页面初次渲染完成时触发（一次） 操作 DOM、初始化地图/画布 ✅ onHide 页面被隐藏时触发 暂停音视频、保存表单草稿 ❌ onUnload 页面卸载时触发（关闭或跳转） 清理定时器、取消网络请求 ❌

2. 代码示例

// pages/index/index.jsPage({ onLoad(options) { console.log(\'页面加载，参数:\', options.id); this.setData({ id: options.id }); }, onShow() { console.log(\'页面显示\'); this.getData(); // 每次显示刷新数据 }, onReady() { console.log(\'页面渲染完成\'); this.initMap(); // 初始化地图 }, onUnload() { clearInterval(this.timer); // 清理定时器 }});

3. 特殊生命周期

• 页面事件处理（非必须）：

  onPullDownRefresh() { /* 下拉刷新 */ },onReachBottom() { /* 上拉触底 */ },onShareAppMessage() { /* 转发配置 */ }

---

三、生命周期执行顺序

1. 首次启动小程序

App.onLaunch → App.onShow → Page.onLoad → Page.onShow → Page.onReady

2. 从后台切换到前台

App.onShow → 当前页面.onShow

3. 跳转到新页面

原页面.onHide → 新页面.onLoad → 新页面.onShow → 新页面.onReady

---

四、最佳实践

1. 数据初始化

   • 静态数据：放在 onLoad 中（一次性请求）。

   • 动态数据：放在 onShow 中（实时更新）。

2. 性能优化

   • 避免在 onReady 前操作 DOM（可能未渲染完成）。

   • 使用 onUnload 及时释放资源（如 WebSocket 连接）。

3. 参数传递

   • 页面跳转参数通过 onLoad(options) 获取。

   • 跨页面数据共享使用全局变量或缓存（wx.setStorage）。

---

五、调试技巧

1. 开发者工具

   • 控制台查看生命周期日志。

   • 使用 AppData 面板 检查数据变化。

2. 模拟场景

   • 点击右上角“胶囊按钮”模拟后台切换。

   • 使用 wx.navigateTo 和 wx.navigateBack 测试页面栈。

---

六、常见问题

Q：onLoad 和 onShow 都请求数据，会重复吗？
→ 可通过标志位控制：

Page({ data: { isLoaded: false }, onLoad() { this.fetchData(); this.setData({ isLoaded: true }); }, onShow() { if (!this.data.isLoaded) this.fetchData(); }});

Q：如何强制重新触发 onLoad？
→ 小程序默认不重新加载页面，需通过 wx.reLaunch 或清除页面栈：

wx.reLaunch({ url: \'/pages/index/index\' });