微信小程序页面返回操作拦截

已于 2023-11-30 15:07:36 修改
阅读量3.3k 收藏 5
点赞数 1
分类专栏： 小程序 文章标签： 微信小程序 小程序
于 2023-04-06 17:18:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45295253/article/details/129993578
版权

返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口
微信小程序没有提供类似 onBackPress 监听页面返回的api，在某些特定场景下，业务收到了限制

为了解决这一限制，本文提供了两种较为常用的解决方案

方案一

重写navigationBar

目的是重写左上角返回按钮，可以加入自己的业务判断拦截
首先要在 pages.json 文件加配置

"navigationStyle": "custom", // 使用自定义 navigationBar

业务代码

<view @click="back">navigationBar返回<
最低0.47元/天 解锁文章
z.week
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
微信小程序登录全局状态401处理
08-10
"微信小程序登录全局状态401处理"这个话题主要聚焦于如何处理用户未授权或者授权失效时，服务器返回的401错误状态码。401（Unauthorized）是HTTP协议中的一个状态码，表示客户端请求需要用户认证，但用户提供的凭证...
微信小程序阻止页面返回（包滑动、自动返回键）
^_^
02-20 1万+
这个场景还是挺有意思的，比如某多多，只要你点左上角的返回 好家伙，满满又花不了的优惠券就来了，让你拥有一种消费最划算的感觉。 如果你的场景比较简单，只是对左上角的返回进行监听，只需要关闭自带的导航栏，手写导航栏或用ui库的写好的导航栏就好了。然后给写好的导航栏的返回按钮添加一个返回的事件做自己想要实现的场景就好了。​ 如果你的场景比较复杂，手机都会有自带的滑动返回，例如ios的滑动返回，安卓的滑动返回和back返回键，就需要用到page-container，他的效果类似于弹窗的形式存在着。 ​
vue实现微信浏览器左上角返回按钮拦截功能
10-15
主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序之禁用返回上一页面按钮
最新发布
2401_83691559的博客
05-17 495
微信小程序对应页面上方返回按钮选项即可隐藏。
uniapp微信小程序默认的返回按钮没有监听事件
qq_46523127的博客
01-06 459
uniapp的onBackPress生命周期支持h5、app、支付宝小程序，返回到指定页面可以用。微信小程序可以用onUnload。
iOS禁用右滑返回的两种方法
01-04
本文实例为大家分享了iOS禁用右滑返回的具体代码，供大家参考，具体内容如下 方式一： 前提：如果使用的自定义UINavigationController基类，请不要在此基类里写相关的手势操作方法。 代码如下： -(void)viewDidAppear:(BOOL)animated{ if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.navigationController.interactivePopGestureRecogni
uniapp 之 uniapp的返回事件 onBackPress 在微信小程序中不生效的问题
热门推荐
YZRHANYU的博客
12-02 1万+
uniapp 之 uniapp的返回事件 onBackPress 在微信小程序中不生效的问题
uniapp学习之【uniapp的返回事件 onBackPress 在微信小程序中不生效的问题】
weixin_38673922的博客
07-05 3896
页面中点击左上角的返回按钮,监听返回操作,页面返回前执行了一些操作, uniapp 页面生命周期中有 onBackPress ,因此将操作写在了 onBackPress () 页面生命周期钩子当中, H5 测试一切正常,但是微信开发工具中调试的时候发现没有执行。微信小程序现阶段并没有提供监听左上角返回事件的函数,查阅资料发现 uniapp 中的 onUnload 页面生命周期是支持微信小程序的,在当前业务中可以使用。: uniapp的onBackPress生命周期是不支持微信小程序的。
微信小程序 -- 阻止小程序返回
LiuPangZi6的博客
03-03 5249
返回操作包括：顶部导航、右滑手势、安卓物理返回键和调用 navigateBack 接口。本次项目为uniapp开发，原生小程序也可以参考这两个方法。这是一个类似弹框的组件，具体参数可以去官网查看。缺点：无法自定义样式、按钮文字及样式。优点：可以自定义返回框。
关于uni-app微信小程序监听顶部左上角的返回事件
Twistedzs的博客
04-06 2414
关于uni-app微信小程序监听顶部左上角的返回事件
微信小程序之页面拦截器
03-29
对需求进行抽象，其实要的就是一个过滤器，对小程序页面的访问进行过滤，符合条件的通过，不符合条件进行其他处理。       场景 小程序有52个页面，其中13个页面无需任何身份，另外39个页面需要系统角色。对于这...
微信小程序返回箭头跳转到指定页面实例解析
10-16
主要介绍了微信小程序返回箭头跳转到指定页面实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序框架（个人总结）
04-22
微信小程序框架是腾讯推出的一种轻量级应用开发平台，它允许开发者通过编写JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）来构建用户界面，并且能够实现与微信服务端的交互。这个框架具有独特...
微信小程序页面禁止滑动
辽辽无期的博客
06-01 1960
【代码】微信小程序页面禁止滑动。
小程序阻止手机自带的滑动返回退出事件（uni-app，微信小程序，page-container）
weixin_47211345的博客
03-11 5593
阻止手机自带滑动返回事件的需求实现 和 page-container的使用
微信小程序阻止返回事件
weixin_45799605的博客
10-23 1544
微信小程序阻止返回事件
h5或uniapp或微信小程序，实现左上角返回到指定页面，侧滑左滑返回指定页面，安卓物理返回键返沪指定页面解决思路的思考
qq_40739261的博客
12-08 7260
思路，因为uniapp写的微信小程序用onBackPress监听不到不支持监听安卓物理返回，所以换了个想法，默认认为是安卓物理键或者侧滑左滑返回：如果是我自己的按钮，就走goBackFn的方法，把androidReturn设置为true，离开页面就不会执行beforeDestroy里面的方法；如果是物理按钮返回，那么离开页面，会触发生命周期函数beforeDestroy，所以在销毁页面前，判断是否为物理按键返回，是则调用goBack。自定义的左上角返回按钮。自己写的左上角返回按钮。自定义左上角安检的返回。
微信小程序阻止用户返回上一页，并弹窗给用户确定是否要返回上一页
xiaokangna的博客
08-07 1636
在onload中调用微信的enableAlertBeforeUnload方法，在首次进入会自动监听当前的页面，在返回的时候会自动弹出弹窗阻止用户返回上一页，点击确定则返回上一页，取消则停留在当前页。
微信小程序返回拦截
qq_40591925的博客
04-14 1004
微信小程序返回拦截弹窗 1.自定义顶部，并改写`navigateBack` 2.使用微信提供的`page-container`
微信小程序tab进入页面前拦截
08-30
微信小程序的tab进入页面前拦截是指在用户点击小程序底部的tab栏切换页面时，可以通过一些方法来拦截切换行为，然后执行相应的操作。 在实现tab进入页面前拦截的过程中，我们可以利用小程序提供的生命周期函数、页面栈等来实现。下面是一种可能的实现方式： 1. 在app.js文件的onLaunch或onShow方法中，监听小程序的tab切换事件。 ```js App({ onLaunch: function () { wx.onTabItemTap((item) => { // 在此处进行拦截操作 }) } }) ``` 2. 在拦截操作中，我们可以获取到当前被点击的tab信息，例如通过item.index获取当前tab的索引值。然后可以根据这个索引值来判断用户是否有权限进入该页面，或者执行其他操作。 ```js wx.onTabItemTap((item) => { // 判断用户是否有权限进入该页面 if (item.index === 2 && !hasPermission) { wx.showToast({ title: '您没有权限访问该页面', icon: 'none' }) return false; // 返回false可以阻止tab切换 } }) ``` 3. 如果需要拦截后显示提示信息，可以通过调用小程序的showToast方法来显示相关的提示信息。 ```js wx.showToast({ title: '您没有权限访问该页面', icon: 'none' }) ``` 通过以上方式，我们可以在用户切换底部tab栏时进行页面拦截操作，并根据需要执行相应的逻辑。当然，具体的实现方式还需根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z.week

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值