问 题
场景：微信公众号开发，使用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");
求救：希望哪位大神能帮忙解决问题，完善下效果，可以让监听事件只针对“返回”，本地页面跳转正常，本人不胜感激！
解决方案
看来是我的问题死了，幸好自己找到了办法。
前提条件：当然由于微信端的很多不稳定表现。尤其是，很多在PC端可以使用的，到移动端就不行，比如history.go之类的；还有时而起作用时而失效的localstrorage，具体也不清楚，也就不多说了。针对这里需要一个相对稳定的储存信息的办法，cookie。(感谢来自/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');
//替换(用null模拟删除)url记录，实现返回一级页面 直接关闭
window.history.replaceState(null, null, toUrl);
结语：于是就这么实现了，原来这么简单。。。其实，中间也进了坑，尤其是关于H5的history,用过history.go(),history.back()。都起过作用，但是后面莫名其妙的失效了，暂时用的这个方法也不知道能坚持多久。希望有路过的大神，如是看不过眼，请指点一二，给出更好的办法。
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起
weixin公众号页面返回上一层_微信开发 - 微信公众号开发 监听返回事件 影响到了本页面的锚点跳转...
