微信小程序退出确认对话框的实现与应用场景

在使用微信小程序时，用户常常会遇到一些需要填写信息或进行操作的页面。比如填写表单、上传文件、编辑文档等办公场景下，如果误触返回键导致内容丢失，体验就很不好。这时候，加入一个退出确认对话框就显得很有必要。

为什么需要退出确认

想象一下，你在公司用小程序填报报销单，填了十几分钟，结果手一滑点了返回，所有内容都没了。这种崩溃感很多人都经历过。通过在页面离开前弹出确认框，可以有效防止误操作，提升用户体验。

如何实现退出确认对话框

微信小程序本身没有直接提供“拦截返回”的API，但可以通过监听页面的 onUnload 或 onHide 来配合逻辑判断。更实用的方式是结合 onBackPress（基础库2.9.4起支持）来实现自定义返回行为。

在页面的 JS 文件中添加如下代码：

onBackPress() {
  if (this.data.hasUnsavedChanges) {
    wx.showModal({
      title: '提示',
      content: '您有未保存的内容，确定要退出吗？',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确定，允许返回
          wx.navigateBack();
        } else if (res.cancel) {
          // 用户取消，不执行返回
          // 可以什么都不做
        }
      }
    });
    return true; // 阻止默认返回
  }
  return false; // 允许默认返回
}

上面这段代码的意思是：当页面检测到有未保存的更改时，点击返回会弹出模态框询问。只有用户明确选择“确定”，才会真正退出。

适用场景举例

除了报销单，类似的场景还有很多。比如在企业内部使用的审批流程小程序里，员工正在起草一份请假申请；或者行政人员在整理会议室预约信息时，中途想退出，系统弹出提醒：“当前内容尚未提交，是否确认离开？” 这种细节虽然小，但能大大减少出错概率。

需要注意的是，onBackPress 只能在某些特定页面栈层级生效，且不适用于 tabBar 页面的跳转。因此在实际开发中，建议结合具体业务逻辑判断是否启用该功能。

用户体验的平衡

并不是所有页面都需要退出确认。如果每个页面都弹，反而会让用户烦躁。合理的做法是只在存在“状态变更”或“数据输入”的页面启用此功能。比如纯展示类的公告页，就没必要加确认框。

另外，弹窗文案也要写得清楚明了。避免使用“是否退出？”这样模糊的提示，换成“您修改的内容还未保存，离开后将无法恢复”，用户更容易理解后果。