需求:
微信公众号开发的时候,可能会出现这种需求:
微信公众号内指定某个网页在点击返回键时不回退到上一级,而是直接关闭微信浏览器窗口,用户点击返回按钮本身就是一个返回事件。
解决方案:利用监听返回事件window.addEventListener("popstate", function(e) {//你的逻辑}, false)
两种监听返回关闭方法:
(1)需要微信授权
//当点击返回键时,不返回到上一页,而是直接关闭微信浏览器function onBackCloseWindow() {pushHistory();window.addEventListener("popstate", function(e) {//关闭当前浏览器 //关闭当前浏览器或跳转重定向页面wx.closeWindow();//需微信授权}, false);function pushHistory() {var state = {title: "title",url: "#"};window.history.pushState(state, "title", "#");}
(2)无需微信授权
//当点击返回键时,不返回到上一页,而是直接关闭微信浏览器function onBackCloseWindow() {pushHistory();window.addEventListener("popstate", function(e) {//关闭当前浏览器或跳转重定向页面WeixinJSBridge.call("closeWindow");}, false);function pushHistory() {var state = {title: "title",url: "#"};window.history.pushState(state, "title", "#");} }
关于部分安卓机使用手势返回/物理返回键监听不了的问题
上面的代码在IOS中是没有问题的,但是在调试的时候发现部分安卓尽然监听不了popstate;
关于此问题,微信社区也看到了,但是工作人员都没有给出一个满意的解决方案(直接搜一下popstate,会出现关于这个问题的讨论):
公众号中监听popstate 事件在vivoY3手机中不执行?安卓手机测试发现至少需要手指点击页面任何部分之后返回才会触发popstate
然后也在网上搜一下这个问题(相关文章):
微信内置浏览器返回键popstate事件监听不触发问题(安卓)很多安卓手机微信浏览器无法监听 popstate、hashchange 事件
粗略说一下网上大神们说的问题的根源:
根源:微信的安全策略 / 微信浏览器内核解决办法:必须用户点击当前界面(真人交互界面)
关于有人说引入了一些js就解决了(收费),各位大佬可以自行处理这个问题
我的解决方法
遇到这个问题挺束手无策的,当然最后也是解决了,大家可以参考一下
解决:既然说是要真人交互,那就在监听的界面,弹个窗(自定义的窗口),诱导用户点击就行,此时如果安卓机使用物理返回啥的,就可以监听到了;
不足:
上面的方法是实在没辙的方法了,如果用户仍然不点击弹窗的话,直接按返回的话依然监听不了的;其次弹窗这个东西,并不是说加就加,需要跟产品商量,正巧我监听的那个界面可以弹个窗啥的还说的过去;
上面的方法就是属于诱导性方法,如果大神们有找到好的方法也可以讨论讨论~