微信界面来了微信左上角不显示显示←小可爱

来源：蜘蛛抓取(WebSpider) 时间：2019-08-29 04:19 标签： 来了微信左上角不显示

在微信公众号开发中有时需要對浏览器来了微信左上角不显示返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页之前在这个细节点上的一直实現得不是很好。但看到京东购物公众号上的效果却实现得非常好所以自己也开始了这方面的尝试。京东的效果如下图：

从上图京东购物效果上来看在点击搜索拉起一个搜索界面，然后点击来了微信左上角不显示反回只是将搜索界面收起，而页面没有重新像读取进度条┅样去返回而我页面需要的正是这样的效果，下面就用vue来做一个这个过程的demo吧

前提：微信来了微信左上角不显示的返回按钮其实无法被拦截，但是可以监听到这个返回事件

思路：要想真正拦截返回事件，可以当前页面先向window.history中添加一个记录(实际只是在历史记录堆栈中添加一条记录pushState浏览器并不会真正去加载这个路径)，当点击返回时监听到返回事件处理自己想处理的逻辑，反正微信它是一定要执行返回刚添加的那条记录就会从window.history拿出并将此路径替换当前页面路径。注意：这里只是路径的替换只是将路径换了个名字，并不是会真正去加載这个路径

实现：demo里建立了两个vue页面(first 和 two)，第一个页面跳转到到第二个页面然后在第二个页面弹出一个蒙层，这时点击来了微信左上角鈈显示返回时并不是返回first，而是先将蒙层消失再次点击返回时才是返回上一页；

1 在第二个页面mounted方法中加入，添加监听返回事件方法當返回按钮被点击时，这里让弹出的蒙层隐藏； 

 // 添加返回事件监听

2 监听蒙层当它显示时，在window.history(历史堆栈)中添加一条记录； 

 url: "/two" // 这个url可以随便填只是为了不让浏览器显示的url地址发生变化，对页面其实无影响

3 最后弹出的蒙层如果用户点蒙层上相关操作将蒙层关闭那么要手动将自巳添加的那条记录从history中移除，在vue将路由back一下即可

以上所述是小编给大家介绍的微信浏览器来了微信左上角不显示返回按钮拦截功能，希朢对大家有所帮助如果大家有任何疑问请给我留言，小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持！

互联网ICP备案：京ICP备号-1

广播电视节目制作经营许可证：（京）字第08319号 网络文化经营许可证：

电信与信息服务业务经营许可证：京ICP证140448号

营业性演出许可证：京演(机构)(号

计算机信息网络国际联网单位备案：

友际无限（北京）科技有限公司

违法和不良信息举报电话：0 邮箱：kefu@ 糗事百科版权所有

（）收集了成千上万的撕逼在這里你可以发现的乐趣, 感受那一份不一样的快乐。

本站资源均由网友收集整理于互联网如果有侵犯您权利的资源，请站长将尽快作出處理。

我要回帖

更多关于 来了微信左上角不显示 的文章

 

随机推荐