当前位置：首页 > article >正文

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

article 2025/9/9 19:37:46

实现效果：微信小程序页面嵌套web-view点击系统导航返回时进行弹窗处理
首先在web-view里是不可实现的（据我了解下来）
参考小程序文档：page-container

大致逻辑：
1、page-container可实现页面离开前拦截
2、由于web-view层级最高，导致page-container里弹窗展示不出来，可使用cover-view来做弹窗，page-container只做拦截作用

index.wxml:

<!-- page.wxml -->
<web-view src="https://www.baidu.com"/>
<page-containershow="{{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:

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});}
})