微信支付的坑(jsapi)
具体流程网上都有,主要说一下前端开发者应该主要的,简单的说就两步。
1,获取所需要的参数信息(和后台开发沟通)
getWxPayInf() { PayApi.GetWxPay({ money: Math.abs(+this.payNumber), Title: this.title }) .then(res => { if (res.ErrorCode == 1) { if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener( "WeixinJSBridgeReady", onBridgeReady, false ); } else if (document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", onBridgeReady); document.attachEvent("onWeixinJSBridgeReady", onBridgeReady); } } else { this.onBridgeReady(res.Data); } } }) .catch(err => { console.log(err); }); },
2,调用微onBridgeReady(wxdata) { let { appId, timeStamp, nonceStr, paySign } = wxdata;
let _that = this; let paySuccess = JSON.stringify({ MerchantID: +window.localStorage.getItem("userID"), Payment: Math.abs(+this.payNumber), Title: this.title, BillDetails: this.payIdArray, PayMethodName: "WXZF", OrderNo: wxdata.orderno }); WeixinJSBridge.invoke(//在微信环境下就有这个对象,不用担心 "getBrandWCPayRequest", { appId: appId, //公众号名称,由商户传入 timeStamp: timeStamp, //时间戳,自1970年以来的秒数 nonceStr: nonceStr, //随机串 package: wxdata.package, signType: "MD5", //微信签名方式: paySign: paySign //微信签名 }, function(res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示: //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 let wxcode = window.localStorage.getItem("wxcode"); window.location.href = '根据业务逻辑进行跳转';
这个里面很坑,不能写逻辑,目前我发现只能跳转页面,
使用vue的this.$router.push是不可以的
alert()都不填出来
window.location.href才可以跳转,如果跳转发现url传参有坑可以看我上一篇文章
} else if (res.err_msg == "get_brand_wcpay_request:cancel") { _that.$vux.alert.show({ content: "用户取消支付" }); } else { _that.$vux.alert.show({ content: "支付失败" }); } } ); },