微信小程序实现页面返回前确认弹窗：兼容左上角返回与右滑返回

在小程序开发中，经常会遇到这样的场景：用户在填写表单、编辑数据等页面操作时，若误触左上角返回按钮或右滑返回，可能导致未保存的数据丢失。本文将详细介绍如何基于微信小程序原生组件 page-container，实现页面离开前的确认弹窗功能，确保用户操作安全。

一、功能核心：为什么选择 page-container？

实现返回确认的关键在于拦截页面的返回行为，而微信小程序原生组件 page-container 提供了 bindbeforeleave 事件，能完美监听以下两种返回场景：

• 左上角原生返回按钮点击
• 右滑手势返回（包括安卓物理返回键）

相比自定义导航栏 + 拦截路由的方案，page-container 无需修改页面路由结构，且能原生兼容所有返回方式，稳定性更高。

官方文档参考：page-container | 微信开放文档

二、实现步骤：三步完成返回确认

1. 页面结构：嵌套 page-container 与条件渲染

核心思路是用 wx:if 控制页面整体显示 / 隐藏，内部嵌套 page-container 组件拦截返回事件，具体结构如下：

<!-- 最外层用 wx:if 控制页面是否显示 -->
<view wx:if="{{isShow}}">
  <!-- page-container 核心组件：拦截返回行为 -->
  <page-container 
    show="{{isShow}}"          <!-- 控制组件显示，与页面显示状态同步 -->
    overlay="{{false}}"       <!-- 关闭遮罩层（根据需求选择，true则显示半透明遮罩） -->
    custom-style="height:100vh;overflow:scroll"  <!-- 让组件占满屏幕并支持滚动 -->
    bindbeforeleave="onBeforeLeave"  <!-- 返回前触发的事件 -->
  >
    <!-- 你的业务页面内容 -->
    <view class="page-content">
      <view class="form-item">
        <label>用户名：</label>
        <input placeholder="请输入用户名" value="{{username}}" bindinput="handleInput" />
      </view>
      <view class="form-item">
        <label>备注：</label>
        <textarea placeholder="请输入备注" value="{{remark}}" bindinput="handleTextarea" />
      </view>
      <!-- 其他业务组件... -->
    </view>
  </page-container>
</view>

关键属性说明：

2. JS 逻辑：处理返回确认与页面状态

通过 onBeforeLeave 事件拦截返回行为，弹出确认弹窗，根据用户选择决定是否真正返回；同时用 isShow 控制页面显示状态，避免弹窗消失后页面残留。

Page({
  /**
   * 页面初始数据
   */
  data: {
    isShow: true,    // 控制页面显示/隐藏
    username: '',    // 示例：表单数据
    remark: ''       // 示例：表单数据
  },

  /**
   * 页面返回前触发：核心逻辑
   */
  onBeforeLeave() {
    const that = this;
    // 先隐藏页面（避免弹窗显示时页面仍可操作）
    that.setData({ isShow: false });

    // 弹出确认弹窗
    wx.showModal({
      title: '确认退出吗？',
      content: '当前数据未保存，退出后将丢失',
      cancelText: '取消',    // 自定义按钮文本（可选）
      confirmText: '确认退出',
      success: (res) => {
        if (res.confirm) {
          // 用户确认退出：返回上一页
          wx.navigateBack({
            delta: 1,  // 返回层级（1=上一页）
            fail: (err) => {
              // 异常处理：若返回失败，强制关闭当前页面
              wx.redirectTo({ url: '/pages/index/index' });
            }
          });
        } else if (res.cancel) {
          // 用户取消退出：重新显示页面
          that.setData({ isShow: true });
        }
      },
      fail: (err) => {
        // 弹窗调用失败时，恢复页面显示
        that.setData({ isShow: true });
        console.error('弹窗调用失败：', err);
      }
    });
  },

  // 示例：表单输入事件（根据业务需求添加）
  handleInput(e) {
    this.setData({ username: e.detail.value });
  },
  handleTextarea(e) {
    this.setData({ remark: e.detail.value });
  }
});

逻辑关键点：

1. 先隐藏页面：调用 setData({ isShow: false }) 后，页面会暂时消失，避免用户在弹窗显示时继续操作页面；

2. 用户选择分支：

   • 确认退出：调用 wx.navigateBack() 返回上一页，同时添加 fail 回调处理异常；
   • 取消退出：重新设置 isShow: true，恢复页面显示；
3. 异常兜底：在 showModal 的 fail 回调中恢复页面显示，避免因弹窗调用失败导致页面永久隐藏。

3. 样式优化：确保页面正常显示

为避免 page-container 嵌套导致的样式异常，需添加基础样式确保页面占满屏幕且布局正常：

/* 页面外层容器：确保无默认边距 */
page {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;  /* 与页面内容背景协调 */
}

/* 业务页面内容样式：根据需求调整 */
.page-content {
  padding: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}

.form-item label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.form-item input,
.form-item textarea {
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 26rpx;
}

三、效果演示

当用户触发返回行为（左上角按钮 / 右滑）时，会弹出如下确认弹窗：

• 点击「取消」：弹窗关闭，页面重新显示，用户可继续操作；
• 点击「确认退出」：弹窗关闭，页面返回上一页，未保存数据提示生效。

四、总结

本文基于微信小程序原生组件 page-container，通过 “条件渲染 + 事件拦截 + 状态控制” 三步，实现了兼容所有返回方式的确认弹窗功能。核心优势在于：

1. 原生兼容：无需自定义导航栏，直接支持左上角返回和右滑返回；
2. 状态安全：通过 isShow 控制页面显示，避免弹窗交互时的页面异常；
3. 易于扩展：可根据业务需求修改弹窗文案、添加数据保存逻辑（如点击 “确认” 前自动保存草稿）。

如果需要进一步优化，可考虑添加 “自动保存草稿” 功能，或根据页面是否有修改过的内容动态判断是否需要弹出确认弹窗（避免无操作时冗余弹窗）。