欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 公众号教程 >

    拦截微信浏览器左上角返回按钮的方法

    2018-04-26 17:37 来源/作者:懒人模板 分类:公众号教程  « »
      在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好。最让人头疼就是返回直接页面就关闭。下次进入用户都找不到入口。下面用vue 来实现进行拦截逻辑处理。看看京东购物公众号效果:

      
    操作思路:

      demo 里建立了两个 vue 页面( first 和 two ),第一个页面跳转到到第二个页面。然后在第二个页面弹出一个蒙层,这时点击左上角返回时,并不是返回 first,而是先将蒙层消失,再次点击返回时才是返回上一页;实现效果如下:

     

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

    mounted() {
        let that = this;
        // 添加返回事件监听
        window.addEventListener("popstate", function(e) {
          that.isShowTestDiv = false;
        }, false);
      },


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

     watch: {
        isShowTestDiv: function(newVal, oldVal) {
          if (newVal === true) {
            this.pushHistory();
          }
        }
      }



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

     

    pushHistory() { // 修改history
          var state = {
            title: "",
            url: "/two" // 这个url可以随便填,只是为了不让浏览器显示的url地址发生变化,对页面其实无影响
          };
          window.history.pushState(state, state.title, state.url);
        },

    注意:window.addEventListener 添加的事件回调会一直存在,因为 Vue 实例销毁时,window 对象并不会销毁。可以在它的回调里打印,会发现在 two 之外的页面点返回也会进入它的方法。但因为 two 页面内对象数据都已销毁,所以进了此方法也无任何问题。如果不想让其进入,可以用存储一些全局变量加入 if 判断,在 two 页面 destroyed 等相关勾子函数将这个全局变量置成想要状态;或者在全局路由勾子方法中设置相关全局变量也可以。

      之前有尝试在 two 的 destroyed 方法内,通过 window.removeEventListener 移除添加的方法,但发现无效果。可能 popstate 是微信内置方法,不能被移除。
    本来转载:http://www.cnblogs.com/buerjj/p/7868739.html

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议