微信小程序页面嵌套web-view点击系统导航返回时进行弹窗处理

实现效果 ：微信小程序页面嵌套web-view点击系统导航返回时进行弹窗处理

首先在web-view里是不可实现的（据我了解下来）

参考小程序文档：page-container

大致逻辑：

1、page-container可实现页面离开前拦截

2、由于web-view层级最高，导致page-container里弹窗展示不出来，可使用cover-view来做弹窗，page-container只做拦截作用

index.wxml:

javascript 复制代码

<!-- page.wxml -->
<web-view src="https://www.baidu.com"/>
<page-container
  show="{{showBackConfirm}}"
  bindbeforeleave="handleBackAttempt"
  bind:afterleave="resetInterceptor" 
>
</page-container>
<cover-view wx:if="{{isIntercepting}}" class="evaluate">
  <cover-view class="content">
    <cover-view>您觉得本次服务怎么样？</cover-view>
    <cover-view class="star-list">
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
      <cover-image class="star" src="/assets/collect-block.png"></cover-image>
    </cover-view>
    <cover-view class="btns">
      <button bind:tap="cancelBack">取消</button>
      <button bind:tap="confirmBack">已评价</button>
    </cover-view>
  </cover-view>
</cover-view>

index.js:

javascript 复制代码

Page({
  data: {
    showBackConfirm: true,
    isIntercepting: false // 状态锁，防止重复触发
  },

  // ✅ 核心拦截函数（修正导航栏返回不生效问题）
  handleBackAttempt() {
    if (!this.data.isIntercepting) {
      this.setData({
        showBackConfirm: true,
        isIntercepting: true // 加锁
      }, () => {
        // 确保弹窗渲染完成
        wx.nextTick(() => {
          return false; // 必须返回 false 才能拦截
        });
      });
    }
    return false; // 双重保险
  },

  // ✅ 用户确认返回
  confirmBack() {
    this.setData({
      showBackConfirm: false
    }, () => {
      setTimeout(() => wx.navigateBack(), 50); // 确保弹窗关闭后再返回
    });
  },
  // ✅ 用户取消返回
  cancelBack() {
    this.setData({
      showBackConfirm: true,
      isIntercepting: false // 解锁
    });
  },
  // ✅ Android 物理返回键专项处理
  onBackPress() {
    if (!this.data.isIntercepting) {
      this.setData({
        showBackConfirm: true
      });
      return true; // 必须返回 true 才能拦截
    }
    return false;
  },

  // ✅ 阻止 iOS 右滑穿透（关键！）
  preventSwipe() {
    return; // 空函数阻止默认滑动
  },

  // ✅ 重置拦截状态
  resetInterceptor() {
    this.setData({
      isIntercepting: false
    });
  }
})

代码片段：https://developers.weixin.qq.com/s/As1z2uma8Q0i