vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题

 // 调用后端接口拿到JSAPI支付所需参数，我在beforeRouteEnter的时候调用。 api.apply.jsApiPay(obj).then(res => { if (res.data.code === '0000') { vm.params = res.data.bean } else { alert('微信支付调起失败！') } }).catch(err => { alert(err) }) // 点击支付时候调用 if (typeof WeixinJSBridge === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(this.params), false) } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(this.params)) document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(this.params)) } } else { this.onBridgeReady(this.params) } onBridgeReady (params) { const that = this WeixinJSBridge.invoke( 'g<i style="color:transparent">本文来源gaodai$ma#com搞$代*码6网</i>etBrandWCPayRequest', { appId: params.appId, // 公众号名称，由商户传入 timeStamp: params.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: params.nonceStr, // 支付签名随机串，不长于 32 位 package: params.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） signType: params.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: params.paySign // 支付签名 }, function (res) { if (res.err_msg === 'get_brand_wcpay_request:ok') { that.queryOrder() // 这里是查询订单是否支付完成，然后执行成功和失败的业务逻辑 } else if (res.err_msg === 'get_brand_wcpay_request:fail') { alert('支付失败！') } } ) }, 

 api.apply.h5Pay({ title: '' orderNum: '', expireMinute: 10, redirectUrl: `${window.location.origin}/pay/card?orderId=${vm.orderId}` }).then(res => { vm.h5PayUrl = res.data.bean // 查询订单 }).catch(err => { alert(err) }) 

 window.location.href = this.h5PayUrl