微信内置浏览器内底部返回栏问题汇总

概述：最近在做一个商城支付项目，遇到IOS微信客户端底部返回栏的问题，项目中是要求支付后只能返回到订单页面，而微信内置浏览器保存了历史记录，可以返回到上一个支付页面，经过各种百度与研究，提供以下解决方案。

项目需求

uni-app开发的H5商城项目在微信中打开

解决方案

1.将微信内置浏览器中的返回按钮禁用

onLoad() {		
    if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener("popstate", this.show, false);
    }
},
onUnload() {
    window.removeEventListener("popstate", this.show, false);
},
method() {
    show(){
         history.pushState(null, null, document.URL);
    },
}

2.微信内置浏览器返回上一页刷新

onLoad() {
    //对页面显示进行监听
    window.addEventListener("pageshow", function(){
            if(sessionStorage.getItem("need-refresh")){
                    location.reload();
                    sessionStorage.removeItem("need-refresh");
            }
    });
}
//点击下一页时，存储相应的键值
sessionStorage.setItem("need-refresh", true);

3.微信内置浏览器进入下一页时关闭其它页面

(1)uni-app自带跳转方法

注意：一般有效，在该场景下测试使用无效！！！
场景解析：当在微信中如果授权后的返回页面与你打开的初始页面一致时，这个时候浏览器中存储了两条历史记录，当进行微信支付成功后，这个时候无法删除掉初始页面，建议授权由后端进行发起。

uni.redirectTo关闭当前页面，跳转到相应页面

uni.reLaunch(OBJECT)关闭所有页面，跳转到相应页面

（2）replace方法

this.$router.replace或者window.location.replace方法均可