微信小程序生命周期完全指南
小程序应用层生命周期
在小程序框架中，App()函数负责注册整个应用程序。该函数接收一个对象参数，可以在其中定义多个生命周期回调方法，用于监控小程序的运行状态。
核心生命周期方法
- onLaunch - 小程序初始化完成时触发，仅在小程序首次启动时执行一次。通常用于获取用户信息、初始化全局数据或检查更新。
- onShow - 小程序从后台进入前台显示时触发。每次小程序被唤醒都会调用此方法。
- onHide - 小程序从前台进入后台时触发。用户离开小程序或切换到其他应用时调用。
- onError - 小程序发生脚本错误或API调用失败时触发。适合用于收集错误日志。
- onPageNotFound - 用户访问的页面不存在时触发。可用于引导用户返回首页。
执行流程示例
整个应用的生命周期调用顺序为：onLaunch → onShow → onHide
// app.js
App({
// 应用初始化，仅执行一次
onLaunch: function(options) {
// 首次打开小程序时的逻辑
// 例如：登录授权、获取用户信息、初始化存储
this.checkSystemInfo();
},
// 应用显示时触发
onShow: function(options) {
// 从后台回到前台时执行
// 可以记录用户返回时间、恢复状态等
this.refreshUserSession();
},
// 应用隐藏时触发
onHide: function() {
// 进入后台时执行
// 可以保存临时数据、停止定时器等
this.saveApplicationState();
},
// 错误捕获
onError: function(error) {
// 监听脚本错误和API调用失败
console.error('应用错误:', error);
this.reportError(error);
},
// 页面不存在时触发
onPageNotFound: function(res) {
// 重定向到默认页面
wx.redirectTo({
url: '/pages/index/index'
});
},
// 全局共享数据
globalData: {
userInfo: null,
apiToken: ''
}
});小程序页面层生命周期
每个页面都有独立的生命周期方法，通过Page()函数注册。这些方法决定了页面从创建到销毁的整个过程。
页面生命周期方法
- onLoad - 页面加载时触发，接收上一个页面传递的参数。仅在页面首次加载时执行一次。
- onShow - 页面显示时触发。每次页面从隐藏变为显示时都会调用。
- onReady - 页面初次渲染完成时触发。此时页面已准备好与用户交互。
- onHide - 页面隐藏时触发。使用navigateTo跳转或切换tabBar时会触发。
- onUnload - 页面卸载时触发。使用redirectTo返回或navigateBack时会触发。
页面状态变化场景
假设从A页面跳转到B页面：打开B页面时，A页面会触发onHide，B页面会触发onLoad和onShow。从B页面返回A页面时，B页面触发onUnload，A页面触发onShow。
// pages/detail/detail.js
Page({
// 页面初始数据
data: {
title: '',
content: ''
},
// 页面加载完成 - 只执行一次
onLoad: function(query) {
// 接收上一个页面传递的参数
this.loadArticleData(query.id);
},
// 页面渲染完成 - 只执行一次
onReady: function() {
// 此时可以安全地使用setData设置节点信息
this.initAnimation();
},
// 页面显示时触发
onShow: function() {
// 每次页面显示都会执行
this.checkUpdateStatus();
},
// 页面隐藏时触发
onHide: function() {
// 页面不可见时执行
this.pauseVideoPlayer();
},
// 页面卸载时触发
onUnload: function() {
// 页面销毁时执行
this.cleanupResources();
}
});调用顺序图示
页面完整的生命周期调用顺序：onLoad → onReady → onShow → onHide
应用生命周期与页面生命周期的关联
理解应用级别和页面级别生命周期之间的关系对于开发高质量小程序至关重要。
关键交互点
- 首次启动：应用先触发onLaunch，然后加载页面触发onLoad。
- 进入后台：先执行当前页面的onHide，再执行应用的onHide。
- 返回前台：先执行应用的onShow，再执行页面的onShow。
// 完整的生命周期流程演示
// 1. 用户首次打开小程序
// App.onLaunch → App.onShow → Page.onLoad → Page.onReady → Page.onShow
// 2. 用户按Home键退出小程序
// Page.onHide → App.onHide
// 3. 用户再次进入小程序
// App.onShow → Page.onShow
// 4. 用户通过navigateTo跳转到新页面
// 当前Page.onHide → 新Page.onLoad → 新Page.onReady → 新Page.onShow
// 5. 用户点击返回按钮
// 当前Page.onUnload → 原Page.onShow掌握这些生命周期的执行时机，可以帮助开发者合理安排数据加载、资源释放、性能优化等逻辑，从而构建更流畅的小程序体验。
