监听微信返回

在做微信公众号页面开发里，触发微信返回事件的时候有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及浏览器的返回、后退、上一页按钮的事件方法

如何判断页面是通过链接打开还是通过后退按钮返回打开的？

IOS微信浏览器返回事件popstate监听 会立即执行一次

IOS微信浏览器返回事件popstate监听