在做微信公众号页面开发里，触发微信返回事件的时候有2个需求。
我现在大概的页面流程是页面a->页面b，在页面b操作数据，在页面b点击返回，会回到a页面并刷新。在页面a点击返回，直接退回到公众号页面。
所以我需要监听2个事件。1是监听a页面的返回事件，2是判断页面a是不是从上个页面返回来的。
监听返回事件可以利用history+popstate实现。
监听页面a 是不是从上个页面返回来的可以使用 window.performance.navigation.type 实现。
a页面的主要代码如下：
$(function () {
let pushStateBool = false;
//判断用户是不是通过后退按钮访问本页面的
window.addEventListener('pageshow', function() {
pushStateBool = false;
setTimeout(function() {
pushStateBool = true;
}, 1000) //延迟1秒 防止ios微信返回立即执行popstate事件，文末有解释
pushHistory();
if (event.persisted || window.performance && window.performance.navigation.type == 2) {
//刷新当前页面
window.location.reload()
}
})
//监听返回按钮事件
window.addEventListener("popstate", function(e) {
if (pushStateBool) {
//返回直接到公众号主页
WeixinJSBridge.call('closeWindow');
}
pushHistory();
},
false
);
function pushHistory() {
let state = {
title: "",
url: "#"
};
window.history.pushState(state, "我的钱包", "#");
}
});
实现原理：
window.performance.navigation.type包含三个值：
0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
关于IOS微信返回立即执行popstate事件原因：
因为在IOS微信浏览器里，返回上一个页面时，必定会触法popstate事件，就会导致立即返回到公众号。
通过pageshow事件先延迟1秒的事件，让执行popstate事件时无法返回，等定时器把pushStateBool的值改成true，然后再点击返回按钮，就会再次执行popstate事件，就可以执行你想要的操作了。
参考博客：
很多人都不知道的监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法