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"})
// }
});
}
