前端关于微信支付的坑

微信h5支付一般是不建议在app内使用的，本文讨论在应用内嵌的webview使用h5支付所遇到的问题，只讨论前端。

原理：window.location.href = '跳转微信链接'，总的来说就是向后端发起请求，后端处理好微信h5请求后返回给我们一个链接，前端直接唤醒这个链接打开微信支付。

配置redirect_url路径，在返回的链接拼接 redirect_url=encodeURIComponent('同一支付域名下的路径?参数1&参数2')即可在支付后返回链接，注意也要与支付域名一致

商家存在未配置的参数

可能原因：1、微信公众号未配置h5支付域名  2、唤起微信支付的网站域名跟配置的不对

这一步需要后端处理，前端一般只需要处理唤醒这一步。

安卓和ios的差异

实测在安卓机型中跳转完取消或者完成能够正常回到redirect_url所拼接的路径，苹果存在许多问题

ios苹果微信h5支付返回safari浏览器。这个问题一直存在，在网上目前有两种解决方式，一是留在微信将redirect_url拼接的域名中协议给取消比如你拼接了 'https://域名'，将https://去掉，这样将在支付取消或完成后留在微信。二是配置scheme地址跳转回app，需要将Referer设置成scheme格式。

ios苹果留在微信后，原app内页面白屏。这是我遇到的另一个问题，window.location.href跳转后原app页面白屏了，几经折腾下来没办法换方案(有解决了的大佬评论区留个言)，在原app单独写一个页面，用作自动跳转app，让苹果跳转到safari后在这个单独页再次拉起scheme到应用，相当于上面的第二种方法的简略版，不用设置Referer了，知道app的scheme就行，在空白页的js中作处理判断，如果是原app内就直接使用this.$route.push跳转回主页，参数在路径中都能拿得到。

微信内置jsapi支付

这种方式相对友好很多，直接在微信的内置浏览器使用，WeixinJSBridge在微信浏览器中内置，可以根据WeixinJSBridge有无值直接使用，对于的参数也是需要后端传递，注意使用前需要openid,而且支付者openid要与下单者对应。

WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: data.appId,
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign
        },
        function (res) {
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        }
      )