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

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

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

一、支付宝支付

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

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

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

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

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

三、微信内支付

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

// 调用微信内支付
        callWxPay(data) {
            let that = this
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(data), false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(data));
                    document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(data));
                }
            } else {
                this.onBridgeReady(data);
            }
        },
        // 微信浏览器支付
        onBridgeReady(payData) {
            let that = this
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": payData.appId,
                //公众号名称，由商户传入     
                "timeStamp": payData.timeStamp,
                //时间戳，自1970年以来的秒数     
                "nonceStr": payData.nonceStr,
                //随机串     
                "package": payData.packageString,
                "signType": payData.signType,
                //微信签名方式：     
                "paySign": payData.paySign //微信签名 
            },
            function(res) {
                that.$router.push( { name: "PayInfo"} )
                // if (res.err_msg == "get_brand_wcpay_request:ok") {
                //     // 使用以上方式判断前端返回,微信团队郑重提示：
                //     //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                //     that.$router.push( { name: "PayInfo"} )
                // }else{
                //     // 微信支付失败
                //     that.$router.push({ name:"PayInfo"})
                // }
            });
        }