vue 微信公众号支付接口_vue页面在微信公众号调用支付接口

// 点击了点击购买按钮

async handlePurchase() {

const vm = this

// 获取选中的套餐信息，用的是axios的post方法，因此要包装一下params

const index = this.activeIndex

const currentItem = this.rechargeOptionData[index]

const params = new URLSearchParams()

params.append('mall_id', currentItem.mall_id)

// 交互，这里的request是自己封装的axios

const res = await request.post('/createOrder', params)

// console.log(res)

if(res.data.status) {

if (typeof WeixinJSBridge == "undefined") {

if (document.addEventListener) {

document.addEventListener('WeixinJSBridgeReady', vm.jsApiCall, false)

} else if (document.attachEvent) {

document.attachEvent('WeixinJSBridgeReady', vm.jsApiCall)

document.attachEvent('onWeixinJSBridgeReady', vm.jsApiCall)

}

} else {

this.jsApiCall(res.data.info);

} else {

// 使用了vue-toast

this.$toasted.show(res.data.msg, {

position: 'top-center',

duration: 3000

})

}

}

},

// 调用微信JS api 支付

jsApiCall(json) {

WeixinJSBridge.invoke(

'getBrandWCPayRequest',

json,

function(res){

WeixinJSBridge.log(res.err_msg);

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

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

this.$toasted.show(res.err_code + res.err_desc + res.err_msg, {

position: 'top-center',

duration: 3000

})

} else{

//显示错误信息

this.$toasted.show(res.err_code + res.err_desc + res.err_msg, {

position: 'top-center',

duration: 3000

})

}

}

)

}

参考资料