在做微信公眾號頁面開發里，觸發微信返回事件的時候有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及瀏覽器的返回、后退、上一頁按鈕的事件方法