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

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

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

一、核心定义与触发场景

二、执行流程与典型案例

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

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

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

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

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

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

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

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

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

三、关键区别对比

四、开发陷阱与避坑指南

1. 误用 onUnload 处理后台场景

   • ❌ 错误：在 onUnload 中保存用户草稿（可能因页面未卸载而重复保存）。
   • ✅ 正确：草稿保存应在 onHide 或 onBeforeUnload（需结合 wx.onAppHide）。

2. 地图组件的资源释放

   • 离开页面（onHide）：暂停定位（mapCtx.stopLocation）。
   • 卸载页面（onUnload）：销毁地图实例（mapCtx.destroy），避免内存泄漏。

3. 路由方式影响生命周期

   • 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 中清理定时器、关闭网络连接。