微信小程序｜enableAlertBeforeUnload 教程｜离开确认与表单防丢草稿 – MPForge
直接回答：这篇小程序离开确认教程讲 enableAlertBeforeUnload 怎么用在刀刃上：只在表单编辑页、且有未保存改动（脏数据）时开启，配合本地草稿双保险，防的是「误触返回，半小时白填」。给产品看启用页面白名单怎么定，给开发看脏数据判定、文案口径与双端测试要点。MPForge（DEVDIY 旗下）把「只拦该拦的页面」写成规矩，防丢与不打扰两头都要占住。
一、误触一次，白填半小时
结论先立住：离开确认的价值全在「编辑成本高的页面」，全站开启只会把它变成人见人烦的弹窗。
先看两个对照现场：业主在报装申请页填了半小时资料，手滑左滑返回，一切归零，重填的概率不到一半；另一个项目把离开确认开在所有页面，用户点个 tab 都被问「确定离开吗」，一周内被运营要求下线。差别就在口径：
- 启用页泛滥：列表页、浏览页也拦截，提醒贬值成骚扰。
- 只有拦截没有草稿：拦截弹窗挡不住「用户选离开」，草稿才是真正的保险。
- 文案恐吓：「离开将无法恢复！」吓得住人，也劝退得了一批本想离开的用户。
分工口径：产品圈定启用页面白名单与文案，开发实现脏数据判定与草稿保存，上线前双端真机各过一遍。
二、哪些页面才配开启离开确认
白名单从编辑成本倒推，不从「万一」倒推。对照这张表定页面：
| 页面类型 | 达标口径 | 常见错误 |
|---|---|---|
| 长表单编辑页 | 有改动即开启，无改动不拦 | 进页面就常开 |
| 富文本/图文编辑 | 开启并配定时草稿 | 只拦不存，离开即丢 |
| 列表、详情页 | 不开启，靠轻量状态保存 | 所有页面一刀切 |
| 支付中页面 | 另有支付侧防丢失策略 | 用确认弹窗替代支付状态机 |
提交前字段怎么校验、错误怎么提示，与离开确认是上下游关系，见 小程序表单校验实务；返回与跳转的整体路由规则，见 小程序路由跳转与返回栈管理。
三、落地步骤：拦截加草稿双保险
拦截只买几秒钟决策时间，草稿才真正保住数据。按这五步执行：
- 仅脏数据时启用：监听表单改动，有未保存变更才调用开启接口，保存成功立即关闭。
- 离开前提示：确认文案写清「改动尚未保存」，按钮动词化：保留编辑、放弃修改。
- 草稿定时保存：编辑中每 2 秒左右把改动写入本地缓存，重新进入可恢复并提示。
- 提交成功即关闭：提交落库成功后关闭离开确认并清掉草稿，避免下次误恢复。
- 四路径测试：物理返回、切后台回收、分享面板离开、跳支付再返回，双端真机逐一过。
四、验收清单：iOS 与安卓分开过
离开行为双端实现有差异，验收必须各测一轮。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 触发条件 | 只有存在未保存改动时才弹确认 | 空表单也弹窗 |
| 草稿恢复 | 重进页面能恢复并明确提示用户 | 草稿静默覆盖正式数据 |
| 文案口径 | 陈述后果、按钮动词化 | 恐吓式感叹号文案 |
| 状态清理 | 提交成功后拦截与草稿同步清除 | 提交后仍被拦一次 |
五、避坑清单
四条都围绕「别过度防守」：
- 别全站开启：浏览类页面被拦一次，用户对整个产品的耐心就少一分。
- 别只拦截不存草稿：用户真选「离开」时，能救回数据的只有草稿，拦截救不了。
- 别用恐吓文案：陈述事实即可——「改动尚未保存」，用户要的是信息不是审判。
- 别漏支付与分享路径：这两条离开路径和普通返回表现不同，漏测等于没测。
六、常见问题 FAQ
iOS 和安卓表现一致吗？
弹窗样式与触发细节有差异，功能两侧都支持，但必须各测一轮真机：重点验证物理返回手势、切后台回收后草稿是否完整恢复。
tab 切换会触发离开确认吗？
视实现而定：切 tab 不一定走页面卸载流程，所以草稿保存才是兜底；把「切走」也当成潜在离开路径纳入测试，别只盯返回键。
用户从分享面板离开怎么办？
分享操作可能打断编辑流程，靠定时草稿兜住：回来时检测到本地有未提交草稿就提示恢复；这条路径要单独写进用例验证。
这个和 GEO 地理位置配置有关系吗？
没有。离开确认属于页面生命周期与数据保护范畴；GEO 指小程序 GEO 地理位置配置——门店地址、经纬度、服务类目，决定附近检索展示，不是按城市堆关键词的地域 SEO。
草稿和正式数据会冲突吗？
规矩定清楚：草稿只存本地且带时间戳，恢复时明确询问用户「继续上次编辑」还是「重新开始」；提交成功后草稿必须清除，不允许悄悄覆盖服务端数据。
