序言 在开发微信小程序时，很多人都会遇到这样的需求：例如，监听用户左滑返回操作，并弹窗确认是否真的要退出页面。 当我们就会吭哧吭哧的去百度寻找相关的资料，但得到的答案都是[代码]不能[代码]。 [图片] [图片] 然而是真的不能监听手势返回吗？答案是否定的，利用 page-container 组件是可以实现监听手势返回， 对应的文档在这：page-container。 下面是该组件描述： 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 [代码]popup[代码] 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 [代码]navigateBack[代码] 接口。 原理就是通过页面引入 page-container 组件和实现其 beforeleave 方法。 如果我们需要在多个页面中监听手势返回事件，只能在各个页面一遍遍引入组件和声明 beforeleave 方法。如何方便快捷的实现监听手势返回？于是 [代码]mp-weixin-back[代码] 诞生了，提供了一种简单、高效的解决方案。 mp-weixin-back [代码]mp-weixin-back[代码] 是基于 uniapp + vite 实现的 vite 插件，通过该插件可以丝滑的实现一键监听微信小程序左滑和返回事件。 特性 基于 uniapp + vite 实现 一键监听左滑和返回事件 灵活的配置选项 支持全局和页面级事件处理 安装 [代码]npm i mp-weixin-back [代码] 配置 vite配置 在 [代码]vite.config.js[代码] 中引入： [代码]import mpBackPlugin from 'mp-weixin-back' export default defineConfig({ plugins: [ mpBackPlugin({ preventDefault: true }) ], }) [代码] 配置参数 参数 类型 默认值 描述 [代码]preventDefault[代码] boolean falsa 是否阻止默认回退事件 [代码]frequency[代码] number 1 阻止回退事件的次数 [代码]debug[代码] boolean false 是否开启调试模式 [代码]onPageBack[代码] (params: BackParams) => void - 回退事件时触发 使用方法 更多用法可以查看文档哦 [代码]用法一（compositionAPI）[代码] [代码]<template> <view>我是普通页面</view> </template> <script setup lang="ts"> import onPageBack from 'mp-weixin-back-helper' // onPageBack传入的参数会覆盖全局传入的参数， onPageBack(() => { console.log('触发了手势返回') }, { preventDefault: false }) </script> [代码] [代码]用法二（optionsAPI）[代码] [代码]<template> <div>我是默认的界面</div> </template> <script> export default { data() { return {} }, onPageBack() { console.log('触发了手势返回') }, } </script> <style></style> [代码] 引入类型 在项目目录中的 [代码]src/env.d.ts[代码] 或[代码]src/shime-uni.d.ts[代码] 文件中引入 [代码]/// <reference types="mp-weixin-back/client" /> [代码] 或在 [代码]tsconfig.json[代码] 的 [代码]compilerOptions[代码] 下配置 [代码]{ "compilerOptions": { "types": ["mp-weixin-back/client"] } } [代码] 开源地址 如果 [代码]mp-weixin-back[代码] 对你有帮助，欢迎在 GitHub 上给项目点个 Star ⭐️！ Star 是对开源项目最直接、最有价值的支持方式： 增加项目的可见度 鼓励开发者继续维护和改进 帮助其他开发者发现这个有用的工具 你的每一个 Star 都是对开源社区的贡献！ 点击链接查看更详细文档：地址