小程序【页面离开、页面卸载】对比区分

- - 微信小程序「页面离开」与「页面卸载」的深度对比
  - **一、核心定义与触发场景**
  - **二、执行流程与典型案例**
  - - [**场景 1：跳转到新页面（页面离开）**](#场景 1：跳转到新页面（页面离开）)
    - [**场景 2：返回上一页（页面卸载）**](#场景 2：返回上一页（页面卸载）)
    - [**场景 3：小程序进入后台（页面离开）**](#场景 3：小程序进入后台（页面离开）)
  - **三、关键区别对比**
  - **四、开发陷阱与避坑指南**
  - **五、生命周期流程图**
  - **六、总结：一句话区分**

微信小程序「页面离开」与「页面卸载」的深度对比

在微信小程序中，**页面离开（onHide）和页面卸载（onUnload）**是两个关键的生命周期阶段，虽然都涉及页面不可见，但触发场景、资源状态和用途差异显著。以下是详细对比：

一、核心定义与触发场景

阶段	生命周期函数	触发场景	页面栈状态
页面离开	`onHide`	1. 跳转到其他页面（如 `navigateTo`） 2. 小程序进入后台（如按Home键）	页面仍在栈中，未被销毁
页面卸载	`onUnload`	1. 返回上一页（如 `navigateBack`） 2. 关闭小程序（冷启动后销毁）	页面从栈中移除，彻底销毁

二、执行流程与典型案例

场景 1：跳转到新页面（页面离开）

plaintext 复制代码

当前页 A → 跳转到页 B（navigateTo）
执行顺序：A.onHide → B.onLoad → B.onShow → B.onReady

A 处于「离开」状态 ：A 仍在页面栈中，可通过 navigateBack 返回，此时触发 A.onShow。
典型操作：暂停动画、保存临时状态（如未提交的表单）。

场景 2：返回上一页（页面卸载）

plaintext 复制代码

当前页 B → 返回页 A（navigateBack）
执行顺序：B.onUnload → A.onShow

B 处于「卸载」状态：B 从页面栈中移除，无法通过返回键恢复，需重新加载。
典型操作：清除定时器、取消未完成的请求、释放地图/音视频资源。

场景 3：小程序进入后台（页面离开）

plaintext 复制代码

所有前台页面触发 onHide → 应用触发 onHide

页面未卸载：短时间内返回（热启动），页面恢复显示，触发 onShow。
长期后台：系统可能销毁小程序，再次进入为冷启动，页面重新加载。

三、关键区别对比

维度	页面离开（`onHide`）	页面卸载（`onUnload`）
触发频率	可多次触发（每次隐藏）	仅一次（页面销毁时）
资源状态	页面保留在内存，组件实例存活	页面彻底销毁，组件、数据、定时器全部释放
返回逻辑	可通过 `navigateBack` 或 `switchTab` 恢复	无法恢复，需重新加载页面
典型场景	跳转到其他页面、小程序切后台	返回上一页、关闭小程序（冷启动前）
最佳实践	暂停非必要任务（如轮询、动画）	清理资源（如 `clearInterval`、`closeSocket`）

四、开发陷阱与避坑指南

误用 onUnload 处理后台场景
- ❌ 错误：在 onUnload 中保存用户草稿（可能因页面未卸载而重复保存）。
- ✅ 正确：草稿保存应在 onHide 或 onBeforeUnload（需结合 wx.onAppHide）。
地图组件的资源释放
- 离开页面（onHide）：暂停定位（mapCtx.stopLocation）。
- 卸载页面（onUnload）：销毁地图实例（mapCtx.destroy），避免内存泄漏。
路由方式影响生命周期
- navigateTo：触发当前页 onHide，新页 onLoad。
- redirectTo：当前页 onUnload（页面栈被替换），适合无需返回的场景（如登录后跳转主页）。

五、生命周期流程图

graph TD A[页面加载 onLoad] --> B[页面显示 onShow] B --> C{用户操作} C -->|跳转到新页| D[当前页 onHide] C -->|返回上页| E[当前页 onUnload] D --> F[新页 onLoad → onShow] E --> G[上页 onShow] C -->|小程序切后台| H[所有页 onHide → 应用 onHide] H -->|热启动| B H -->|冷启动| I[小程序销毁，页面卸载]

六、总结：一句话区分

页面离开（onHide）：页面"暂时隐藏"，仍在内存中，随时可能回来（如切后台、跳转其他页）。
页面卸载（onUnload）：页面"永久消失"，从内存清除，无法直接返回（如返回上一页、小程序冷启动前销毁）。

合理利用这两个阶段，可避免内存泄漏、提升性能，例如：

在 onHide 中暂停轮询、保存临时状态；
在 onUnload 中清理定时器、关闭网络连接。