微信公众号开发,监听返回事件,影响到了本页面的锚点跳转

Petu
  • 55

场景:微信公众号开发,使用angular,登录以后,进入H5页面,监听返回事件,当用户点击返回时,关闭本页面进入主菜单
代码:监听返回事件,使用的是此方法,其中也有判断,下文会进行解释

    //监听返回事件
    listenBack : function ()
    {
        var self = this;
        
        self.pushHistory();
        //微信防止连续点击 返回登录页
        var bool = false;
        setTimeout(function()
        {
            bool = true;
        },1500);
        
        window.addEventListener("popstate", function(e)
        {
            if(bool)
            {
                //在返回事件中 由于pushHistory方法 history.statue 发生了改变 而hash没有改变history.statue
                //更明显的e.state发生了同样的变化
                if(!isEmpty(e.target.history.state))
                //if(!isEmpty(e.state))
                {
                    WeixinJSBridge.call("closeWindow");
                }
            }
            
            self.pushHistory();
            
        },false);
        
    },
    
    //增加一个本页url 压入history
    pushHistory : function ()
    {
        var state =
        {
            title : "title",
            url : "#",
        };
        window.history.pushState(state, "title", "#");
    },

问题:此方法确实监听到了返回事件,但是也同时影响到了 本页面锚点跳转,进行跳转也会执行WeixinJSBridge.call("closeWindow"); 关闭当前页面

        //返回顶部
        self.scope.onClickToTop = function()
        {
            window.location.hash = "#patient-top";
        }
        
        //首字母检索
        self.scope.onClickToArea = function($index)
        {
            //Object.keys获取对象的key值并输出一个数组
            var letter = Object.keys(self.expertPatientModel.myPatients)[$index];
            window.location.hash = "#" + letter;
        }

本人思路:进行检测后,发现在 pushHistory() 中,若是返回事件,会改变 e.target.history.statue 外面的 e.statue 也发生了改变,以此判断。但这个改变也是偶尔才显示出来的,本人不清楚到底是自己真是个渣渣,还是 微信开发者工具 的缓存一直这么狗血、、、

图片描述

效果:只能保证在 刚刚进入页面,不点击其他本页面跳转,点击返回能关闭当前页面;但在点击其他本页面跳转后,再点击返回,则target一直变成了null,没有进入 if 判断,无法执行 WeixinJSBridge.call("closeWindow");

求救:希望哪位大神能帮忙解决问题,完善下效果,可以让监听事件只针对“返回”,本地页面跳转正常,本人不胜感激!

回复
阅读 5.5k
2 个回答
✓ 已被采纳

看来是我的问题死了,幸好自己找到了办法。
前提条件:当然由于微信端的很多不稳定表现。尤其是,很多在PC端可以使用的,到移动端就不行,比如history.go之类的;还有时而起作用时而失效的localstrorage,具体也不清楚,也就不多说了。针对这里需要一个相对稳定的储存信息的办法,cookie。(感谢来自https://my.oschina.net/crazym...的分享)

//解决微信不定时localstrorage失效问题
//传入cookie c_name:键名 value:值(字符串) expiredays:有效时间
var setCookie = function(c_name,value,expiredays)
{
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

//取出cookie
var getCookie = function(c_name)
{
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
    return ""
}

新思路
首先直接在一级页面设置好锚点,然后用setCookie储存页面名,比如index.html

setCookie('loginTo', 'index.html', 7);

然后在登录成功后,自动跳转"来"的页面

window.location.href = getCookie('loginTo');

最后前面BB那么多,其实就这个有用 (感谢来自http://blog.csdn.net/lyh_9511...的分享)

//替换(用null模拟删除)url记录,实现返回一级页面 直接关闭
window.history.replaceState(null, null, toUrl);

结语:于是就这么实现了,原来这么简单。。。其实,中间也进了坑,尤其是关于H5的history,用过history.go(),history.back()。都起过作用,但是后面莫名其妙的失效了,暂时用的这个方法也不知道能坚持多久。希望有路过的大神,如是看不过眼,请指点一二,给出更好的办法。

Msea
  • 3
新手上路,请多包涵

store.js 移动端 挺好使的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏