H5支付。返回重复调起支付和safari的兼容怎么解决

H5支付一句话总结就是后端给个跳转地址，前端跳去那个页面就可以了。

遇到的问题：

1.如果在跳转的页面后面加上redirect_url可以指定取消支付或者支付成功点击完成之后返回的页面。但是却遇到了问题：的确在取消支付或者支付成功点击完成，回到了redirect_url指定的页面。但是你再点一次返回竟然又重新调起了支付。

2.safari的跳转会有个中间页，然后取消支付回到页面的时候就停留在中间页，显示是空白的，然后再点一次返回才能回到支付的那个页面。

1.我就每次支付以后跳转没有写指定的页面，也就是没有加上redirect_url.加一个缓存的内容

他可能会跳去我的项目的首页，所以我在首页判断缓存里是否有这个参数，有的话直接跳转页面去支付页。也就是那个我们开始向指定跳转的页面

2.判断一下当前的浏览器是否是safari如果是的话就先打开一个空白页再去跳转到指定支付页。如果不是就是正常的跳转去支付页。

支付页order.vue

//判断是否是safari浏览器


isSafari(){
          var ua = navigator.userAgent.toLowerCase();
          if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
              ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
              ua.indexOf('ios') === -1 && ua.indexOf('browser') === -1) {
              return true;
          }else{
              return false;
          }
      },

H5Pay(para,params){
       try {
           if(this.isSafari()){
                  var winRef = window.open("", "_blank");
           }

           h5wechatpay(para).then(res=>{
               if(res.code==1){
                  var payInfo=Object.assign(res.data,params,para);
                  sessionStorage.setItem('payType',"h5pay");//

                   //safari浏览器打开页面方式
                   if(this.isSafari()){
                       setTimeout(()=>{
                          winRef.location = payInfo.mweb_url;
                       },10);
                   }else{
                       window.location.replace(payInfo.mweb_url);//redirect_url指定成功以后跳转的页面。但是加了之后导致点击返回重复走微信支付接口给的mweb_url页面。所以不加+ "&redirect_url=" + redirect_url
                   }

}

项目首页main.vue

created() {
   if(sessionStorage.getItem('payType')=="h5pay"){//如果已经调起过支付。就跳转页面
       this.$router.push({path:"/order"});//跳转链接
   }
},

H5支付。返回重复调起支付和safari的兼容怎么解决

Guess you like