Vue 移动端微信内H5调起支付(WeixinJSBridge内置对象)
支付主要是调用微信的内置对象 WeixinJSBridge具体用法:WeixinJSBridge.invoke(‘getBrandWCPayRequest’,data,function (res) {})方法名:getBrandWCPayRequest参数:data返回结果处理:function (res) {}其中data;‘appId’: data.appId, // 公众号名称...
支付主要是调用微信的内置对象 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字段让微信发起异步支付通知才算支付成功
更多推荐
所有评论(0)