微信返回刷新數據

在作微信公衆號頁面開發裏，遇到一個問題。

就是我如今有個數據叫作money，在a頁面裏面顯示money，在b頁面裏面操做money，好比說提現。我如今提現完以後，在b頁面咱們經過點擊微信自帶的返回或者手機上的返回跳轉到a頁面，money的數額並無變化。由於它並無刷新。咱們怎麼在a頁面監控到它是從b頁面返回來的呢？

下面是我在網上找的幾種方法，經本人測試，只有最後一個方法是有用的。其餘的，若是各位測試有效，歡迎留言。

方法1：利用history+popstate

原文地址：

不少人都不知道的監聽微信、支付寶等移動app及瀏覽器的返回、後退、上一頁按鈕的事件方法

主要代碼以下：

$(function () {
    pushHistory();
    var bool = false;
    setTimeout(function () {
        bool = true;
    }, 1500);
    window.addEventListener("popstate", function (e) {
        if (bool) {
            alert("我監聽到了瀏覽器的返回按鈕事件啦"); //根據本身的需求實現本身的功能
        }
        pushHistory();

    }, false);

    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
});

 

方法2：利用event.persisted

原文地址：

微信web頁面返回刷新

主要代碼：

window.onpageshow = function(event){
     if (event.persisted) {
         window.location.reload();
     }
}

經過使用 PageTransitionEvent 對象的 persisted 屬性來判斷頁面是直接從服務器上載入仍是從緩存中讀取，若是頁面從瀏覽器的緩存中讀取該屬性返回 ture，不然返回 false 。可是本人測試發現返回都是false。

 

方法3：利用window.performance.navigation.type（本人採用的該方法）

原文地址：

如何判斷頁面是經過連接打開仍是經過後退按鈕返回打開的？

主要代碼：

window.addEventListener('pageshow', function(event) {
    if (event.persisted || window.performance && window.performance.navigation.type == 2) {
        window.location.reload();
    }
}, false);

實現原理：

window.performance.navigation.type包含三個值：

0 : TYPE_NAVIGATE (用戶經過常規導航方式訪問頁面，好比點一個連接，或者通常的get方式)

1 : TYPE_RELOAD (用戶經過刷新，包括JS調用刷新接口等方式訪問頁面)

2 : TYPE_BACK_FORWARD (用戶經過後退按鈕訪問本頁面)

 

我的感受上面這3種方法都不是最佳的實現方式。各位看官若是有更好的實現方案，但願不吝賜教~~