Vue 移动端微信内H5调起支付（WeixinJSBridge内置对象）详解程序员

支付主要是调用微信的内置对象 WeixinJSBridge
具体用法：
WeixinJSBridge.invoke(‘getBrandWCPayRequest’,data,function (res) {})
方法名：getBrandWCPayRequest
参数：data
返回结果处理：function (res) {}
其中data；
‘appId’: data.appId, // 公众号名称，由商户传入
‘timeStamp’: data.timeStamp, // 时间戳
‘nonceStr’: data.nonceStr, // 随机串
‘package’: data.package, // 预支付id
‘signType’: data.signType, // 微信签名方式
‘paySign’: data.paySign // 微信签名
就两个方法
后台生成支付所需要的数据data数据

creatWXPayOrderInfo () {

 axios.post(WXORDERCREATE_API, {

 orderId: this.orderId 

 }).then(this.handleGetDataSucc)//data支付数据生成功后 再调用这个方法 

handleGetDataSucc (res) {

 res = res.data 

 var vm = this 

 var data = res.data 

 if (res.code === 200 data) {

 // 下面是解决WeixinJSBridge is not defined 报错的方法 

 if (typeof WeixinJSBridge === undefined) {

 // 微信浏览器内置对象。参考微信官方文档 

 if (document.addEventListener) {

 document.addEventListener(WeixinJSBridgeReady, vm.onBridgeReady(data), false) 

 } else if (document.attachEvent) {

 document.attachEvent(WeixinJSBridgeReady, vm.onBridgeReady(data)) 

 document.attachEvent(onWeixinJSBridgeReady, vm.onBridgeReady(data)) 

 } else {

 console.log(准备调用微信支付) 

 vm.onBridgeReady(data) 

 onBridgeReady (data) {

 console.log(调用微信支付WeixinJSBridge) 

 var vm = this 

 WeixinJSBridge.invoke( 

 getBrandWCPayRequest, {

 // 下面参数内容都是后台返回的 

 appId: data.appId, // 公众号名称，由商户传入 

 timeStamp: data.timeStamp, // 时间戳 

 nonceStr: data.nonceStr, // 随机串 

 package: data.package, // 预支付id 

 signType: data.signType, // 微信签名方式 

 paySign: data.paySign // 微信签名 

 function (res) {

 // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 

 if (res.err_msg === get_brand_wcpay_request:ok) {

 Dialog.alert({

 message: 下单成功 

 }).then(() = {

 vm.$router.push(/order) }) 

 } else {

 Dialog.alert({

 message: 下单失败 

 }).then(() = {

 vm.$router.push(/order) }) 

我是这样写的 成功了
eslint 本地编译会报WeixinJSBridge未定义 不用管
注意 支付成功后不能用get_brand_wcpay_request:ok 作为支付成功的凭证 需要查询订单或者填通知notify_url字段让微信发起异步支付通知才算支付成功

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/1729.html