【uni-app】H5的返回拦截经验分享

项目需求，要在用户试图关闭或者返回的时候拦截，并弹出提示框。

uni-app的onBackPress只能拦截左上角的返回，物理按键和左滑返回拦截不了，需要另外的解决方案。

研究了一下，采用popState，大致实现了功能。

在想要拦截返回的页面的mounted新增代码

methods:{onBack(){//检测到返回再插一条window.history.pushState(null, null, document.URL);//在这里弹个弹框什么的uni.showModal(...)}
},
mounted(){//页面加载后先插一条记录window.history.pushState(null, null, document.URL);window.addEventListener("popstate", this.onBack(), false);
}

在destroyed销毁监听事件，不然会影响其他页面

destroyed() {window.removeEventListener("popstate", this.onBack, false);
},

保险起见，在跳转到其他页面的时候，也销毁监听

methods:{toIndex(){window.removeEventListener("popstate", this.onBack, false);uni.navigateTo({url:'/pages/index/index'})}
}

注意事项：

1.其他页面的返回事件，要改为 history.back() ,不能是 uni.navigateBack()。

2.有个插件 vue-prevent-browser-back 也是用类似方案，不过不能实现自定义监听。

3.部分浏览器，如果用户进入页面啥也不干就返回，是监听不到的，最好是弹一个框，让用户关闭从而产生交互。这个暂时找不到更好的办法。

经过测试归纳如下：

safari浏览器、firefox浏览器、uni-app ios的webview、企业微信浏览器、opera浏览器、miui浏览器。页面一打开就能监听到popstate。

微信浏览器、chrome浏览器、uni-app android的webview、uc浏览器、搜狗浏览器等大多数chroumin内核浏览器，需要页面交互才能监听popstate

(可能存在版本高低的差异，不一定准确)

【uni-app】H5的返回拦截经验分享相关推荐

uni App+H5 实现人脸识别
uni App+H5 实现人脸识别通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
app软件著作权版权和上架经验分享
各大应用市场基本都需要软件著作权,没有那著作权版权证书的app就不准上架.目前个人的app已经通过腾讯应用宝和华为应用审核并已上架. 应用宝的华为的从后台服务器程序到app制作都是个人完成,以后还 ...
怎样降低微信h5棋牌游戏类app域名被微信拦截封杀屏蔽的几率
微信h5棋牌游戏类app域名被微信拦截封杀屏蔽域名被微信封杀,显示的是链接无法访问. 域名被微信拦截是跟淘宝一样一般提示"如需浏览,请长按网址复制后使用浏览器访问".域名被微信屏 ...
新东方APP技术架构演进， C端技术经验分享
新东方APP技术架构演进, C端技术经验分享作者:张建鑫, 曾任IBM高级软件架构师, 滴滴高级技术专家, 现任新东方集团高级技术总监古代东西方的思想家都产生过一个终极的追问,世界的本元到底是什么 ...
【百度点石（WSDM）】 Retention Rate of Baidu Hao Kan APP Users 小白经验分享
先说结论线上 AUC:0.7466 这是我正儿八经参加的第一个数据科学竞赛,心路历程也是十分艰辛,队友经历几次更换,自己也是经常游走在崩溃的边缘,同门都说我头发又见秃,总之不是很顺利的,最后结果不是 ...
建筑绘图软件测试自学,自考建筑用什么软件刷题?自考建筑考试APP复习备考经验分享...
自考建筑用什么软件刷题?自考建筑考试APP复习备考经验分享 2020-03-3014:23:16 来源: 作者:zenglimei 1 //自考建筑用什么软件刷题?自考建筑考试APP复习备考经验分享 ...
转载：App Store生存法则:iOS开发者经验分享
1. 整体市场我准备写至少两篇.本篇为对iPhone的整体的看法.以后会写对中国市场的看法,市场销售的看法,和在中国开发的看法. 先自我介绍.我从08年9月就开始做iPhone.之前做PC的软件,做 ...

【uni-app】H5的返回拦截经验分享

【uni-app】H5的返回拦截经验分享相关推荐

最新文章

热门文章