在微信小程序开发中，生命周期是贯穿全局的核心逻辑，决定了代码在不同阶段的执行时机。无论是初始化全局数据、请求接口、操作DOM，还是释放资源，都需要依赖生命周期钩子函数精准控制。
小程序生命周期分为两大维度：应用生命周期（管控整个小程序的启动与销毁）和页面生命周期（管控单个页面的加载与卸载）。两者相互关联、各司其职，掌握其执行逻辑是写出稳健代码的前提。本文将从原理、流程、实战、避坑四个层面，彻底讲透小程序生命周期。
一、应用生命周期（App级）：全局的“总开关”
应用生命周期是小程序从「启动→前台运行→后台暂停→销毁」的全流程，通过app.js中的App()方法配置，所有钩子函数均为可选，且执行顺序固定，全局仅受小程序自身状态影响。
1. 核心钩子函数详解
每个钩子函数对应特定触发时机，需结合场景合理使用，避免滥用导致性能问题：
钩子函数 | 触发时机 | 核心作用 | 注意事项 |
|---|---|---|---|
onLaunch | 小程序首次启动时触发，全局仅执行1次 | 初始化全局数据（如globalData）、获取用户授权（wx.login）、请求全局配置（用户openid、系统参数）、初始化第三方SDK | 避免在此处执行耗时操作（如复杂计算、大量接口请求），会阻塞小程序启动 |
onShow | 小程序启动/从后台切到前台时触发，可多次执行 | 刷新全局状态（如检查登录Token有效性）、重启定时器、恢复音频/视频播放、同步后台数据 | 每次切前台都会触发，需控制代码执行频率，避免重复请求 |
onHide | 小程序从前台切到后台时触发（如按Home键、切微信聊天、打开其他小程序） | 暂停定时器、保存临时数据、停止音频/视频播放、取消未完成的耗时操作 | 不可在此处执行异步请求，可能因小程序进入后台被中断 |
onError | 小程序发生脚本错误、API调用失败时触发 | 捕获全局错误、上报错误日志（含错误栈信息）、给用户展示友好提示 | 仅能捕获运行时错误，语法错误无法捕获，需配合开发工具调试 |
onPageNotFound | 访问不存在的页面时触发（仅在正式环境生效） | 页面跳转兜底（如重定向到首页、404页面），提升用户体验 | 本地开发时需手动配置不存在的路由测试，开发工具不会自动触发 |
二、页面生命周期（Page级）：单个页面的“生命周期”
页面生命周期是单个页面从「加载→渲染→显示→隐藏→卸载」的流程，通过页面JS文件中的Page()方法配置，是开发中最常用、最核心的生命周期，直接影响页面交互体验。
1. 核心钩子函数详解
页面钩子函数执行顺序固定，需根据页面业务场景选择合适的钩子编写代码，尤其注意DOM操作和接口请求的时机：
钩子函数 | 触发时机 | 核心作用 | 注意事项 |
|---|---|---|---|
onLoad | 页面首次加载时触发，页面生命周期内仅执行1次 | 接收页面跳转参数（options）、初始化页面数据（setData）、请求页面核心接口（如商品详情、列表数据）、绑定事件监听 | 此时页面DOM尚未渲染完成，不可操作DOM节点 |
onShow | 页面显示/从后台切回前台时触发，可多次执行 | 刷新页面数据（如返回列表页刷新数据）、启动页面定时器、恢复页面交互状态 | 页面跳转返回时会触发，可用于同步最新数据 |
onReady | 页面初次渲染完成时触发，仅执行1次 | 操作页面DOM/组件（如wx.createSelectorQuery获取节点信息）、初始化第三方组件（如地图、图表）、调整页面布局 | 仅保证当前页面渲染完成，若有嵌套组件，组件渲染可能滞后 |
onHide | 页面被隐藏时触发（如跳转到其他页面、小程序切后台） | 暂停页面定时器、保存临时表单数据、停止页面内音频播放 | 页面未卸载，数据仍保留，再次显示时会触发onShow |
onUnload | 页面被卸载时触发（如wx.redirectTo、wx.navigateBack、关闭当前页面） | 清除定时器（防止内存泄漏）、取消未完成的接口请求、解绑事件监听、释放组件资源 | 页面数据会被销毁，不可在此处执行setData（无效） |
onPullDownRefresh | 用户下拉刷新页面时触发（需在json配置enablePullDownRefresh: true） | 下拉刷新页面数据（重置分页、清空列表再请求） | 请求完成后需调用wx.stopPullDownRefresh()停止刷新动画 |
onReachBottom | 用户上拉页面触底时触发（可配置onReachBottomDistance调整触底距离） | 加载更多数据（分页请求）、触发加载动画 | 需控制加载状态，避免重复触发（如设置loading锁） |
onShareAppMessage | 用户点击页面右上角分享/按钮分享时触发 | 自定义分享内容（标题、路径、图片）、统计分享数据 | 仅在页面级配置生效，组件内需通过triggerEvent触发页面方法 |
三、应用生命周期与页面生命周期的关联
两者并非独立存在，而是存在明确的执行顺序关联，尤其在小程序启动、页面跳转、前后台切换时，需精准掌握其联动逻辑：
打开小程序首个页面：App.onLaunch → App.onShow → Page.onLoad → Page.onShow → Page.onReady
页面跳转（A页面→B页面）：A.onHide → B.onLoad → B.onShow → B.onReady
页面返回（B页面→A页面）：B.onUnload → A.onShow
小程序切后台：当前页面.onHide → App.onHide
小程序切前台：App.onShow → 当前页面.onShow
关闭小程序（所有页面）：当前页面.onHide → App.onHide → 小程序销毁（无卸载钩子）
四、开发避坑指南（高频问题）
在实际开发中，很多问题都源于对生命周期的理解偏差，以下是高频坑点及解决方案：
坑点1：在onLoad中操作DOM解决方案：DOM操作必须放在onReady中，onLoad时页面尚未渲染，无法获取节点信息。
坑点2：未清除定时器导致内存泄漏解决方案：在onUnload中清除所有定时器、计时器，避免页面卸载后仍占用资源。
坑点3：依赖onLaunch的异步请求，页面加载时数据未返回解决方案：可在页面onLoad中通过Promise或回调等待全局数据初始化完成，或使用事件总线（wx.onEvent）监听数据就绪。
坑点4：下拉刷新后未停止刷新动画解决方案：接口请求完成后（complete回调中），必须调用wx.stopPullDownRefresh()，否则刷新动画会一直显示。
坑点5：onHide中执行异步请求解决方案：onHide时小程序可能随时被销毁，异步请求大概率会失败，需将异步操作移至onShow或页面卸载前完成。
五、总结
小程序生命周期的核心是“时机把控”——应用生命周期管全局初始化与状态切换，页面生命周期管单个页面的渲染与资源释放。掌握以下核心原则，可大幅提升开发效率：
首次初始化逻辑放onLaunch（全局）、onLoad（页面），仅执行1次；
状态刷新、定时器启停放onShow/onHide，适配前后台切换；
DOM操作、组件初始化放onReady，确保页面渲染完成；
资源释放、定时器清除放onUnload，避免内存泄漏。
合理运用生命周期钩子，既能保证代码的执行效率，又能提升页面交互体验，是小程序开发的必备基础技能。
👉 **觉得有用的点点关注谢谢~**
)
)
