vue h5 对接支付宝，微信支付，微信js支付

vue h5 实现支付（支付宝，微信）

h5端实现支付难度不大，只是有些小的点需要注意下，其他的看文档撸就行了。 支付宝很简单，后端返回一个 html ，前端插入调用就行了，微信支付分两种：1、微信内支付（jsapi，微信内浏览器）2、微信外支付（h5支付）。

一、支付宝支付

1// 前端啥都不用管，交给后端去干，返回 html 调用点击就好了
2// 插入 v-html
3this.alipayWap = payRes.data.body
4// dom 就绪
5await this.$nextTick()
6// 调用点击
7this.$refs.alipayWap.children[0].submit()

支付宝支付，支付成功后，后端可以配置回跳地址（ 貌似ios和微信一样，需要用户自己去返回 ），但是没法在url上拼接参数（ 我的后端是这么说多，咱不管 ），可以单独设置一个支付成功页面

二、微信支付 ---- h5 微信外

微信外其他浏览器支付也简单，由后端去干，返回一个 url 前端去跳转，然后拉起微信支付，同时可以在url上拼接支付成功后回跳的地址（ 需要 encode 编码，有个点要注意，文档描述，当没有调起微信支付，或者超过5s，微信任然会跳转到拼接的地址上，关于这点文档有详细描述，同时 vue 哈希路由模式，微信回跳会把 # 后全部干掉，等于直回跳个域名，所以能不用哈希就不用哈希模式 ）

1// tips: 如果实在用了 哈希模式，可以自己拼接，把#省去，浏览器在访问时，会自动加上
2let redirect_url = `${this.w_origin}/xxx/?PayType=h5wx`
3window.location.replace(`${payRes.url}&redirect_url=${encodeURIComponent(redirect_url)}`)
4// 同时，尽量用 window.location.replace

三、微信内支付

微信内支付就简单多了，利用微信内置对象，加上后端返回的一些信息就可以了，前提是要微信授权获取openid (这个也分两种，1、跳转授权页 2、静默授权，只获取code,后端凭借code换取openid，也称静默授权，其实看的到登录的 loding 圈)，获取code和微信外支付差不多，都是跳转微信提供的地址，拼接回调地址，所以哈希永远的痛

1// 调用微信内支付
2        callWxPay(data) {
3            let that = this
4            if (typeof WeixinJSBridge == "undefined") {
5                if (document.addEventListener) {
6                    document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(data), false);
7                } else if (document.attachEvent) {
8                    document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(data));
9                    document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(data));
10                }
11            } else {
12                this.onBridgeReady(data);
13            }
14        },
15        // 微信浏览器支付
16        onBridgeReady(payData) {
17            let that = this
18            WeixinJSBridge.invoke('getBrandWCPayRequest', {
19                "appId": payData.appId,
20                //公众号名称，由商户传入     
21                "timeStamp": payData.timeStamp,
22                //时间戳，自1970年以来的秒数     
23                "nonceStr": payData.nonceStr,
24                //随机串     
25                "package": payData.packageString,
26                "signType": payData.signType,
27                //微信签名方式：     
28                "paySign": payData.paySign //微信签名 
29            },
30            function(res) {
31                that.$router.push( { name: "PayInfo"} )
32                // if (res.err_msg == "get_brand_wcpay_request:ok") {
33                //     // 使用以上方式判断前端返回,微信团队郑重提示：
34                //     //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
35                //     that.$router.push( { name: "PayInfo"} )
36                // }else{
37                //     // 微信支付失败
38                //     that.$router.push({ name:"PayInfo"})
39                // }
40            });
41        }