Lucaju 的技术笔记 - 前端
type: channel
link: https://www.lucaju.cn/index.php/category/%E5%89%8D%E7%AB%AF/
items: 微信小程序实现页面返回前确认弹窗：兼容左上角返回与右滑返回

微信小程序实现页面返回前确认弹窗：兼容左上角返回与右滑返回
type: item
date: 2025-09-09T14:13:34+08:00
description: 在小程序开发中，经常会遇到这样的场景：用户在填写表单、编辑数据等页面操作时，若误触左上角返回按钮或右滑返回，可能导致未保存的数据丢失。本文将详细介绍如何基于微信小程序原生组件 page-container，实现页面离开前的确认弹窗功能，确保用户操作安全。一、功能核心：为什么选择 page-container？实现返回确认的关键在于拦截页面的返回行为，而微信小程序原生组件 page-container 提供了 bindbeforeleave 事件，能完美监听以下两种返回场景：左上角原生返回按钮点击右滑手势返回（包括安卓物理返回键）相比自定义导航栏 + 拦截路由的方案，page-container 无需修改页面路由结构，且能原生兼容所有返回方式，稳定性更高。官方文档参考：page-container | 微信开放文档二、实现步骤：三步完成返回确认1. 页面结构：嵌套 page-container 与条件渲染核心思路是用 wx:if 控制页面整体显示 / 隐藏，内部嵌套 page-container 组件拦截返回事件，具体结构如下： 用户名： 备注： 关键属性说明：属性名作用取值建议show控制 page-container 显示 / 隐藏与外层 wx:if 的 isShow 同步，确保状态一致overlay是否显示背景遮罩表单页建议设为 false（避免遮罩遮挡表单），弹窗类页面可设为 truecustom-style自定义组件样式必须设置 height:100vh（占满屏幕），加 overflow:scroll 确保页面内容可滚动bindbeforeleave返回前触发的事件核心事件，用于弹出确认弹窗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 }); } });逻辑关键点：先隐藏页面：调用 setData({ isShow: false }) 后，页面会暂时消失，避免用户在弹窗显示时继续操作页面；用户选择分支：确认退出：调用 wx.navigateBack() 返回上一页，同时添加 fail 回调处理异常；取消退出：重新设置 isShow: true，恢复页面显示；异常兜底：在 showModal 的 fail 回调中恢复页面显示，避免因弹窗调用失败导致页面永久隐藏。3. 样式优化：确保页面正常显示为避免 page-container 嵌套导致的样式异常，需添加基础样式确保页面占满屏幕且布局正常：/* 页面外层容器：确保无默认边距 */ page { margin: 0; …