vue项目使用微信公众号支付总结及遇到的坑
微信公众号支付
1.使用jssdk调用微信支付，具体查看开发文档；
使用的vuex，在mutations中
wechatPay(state,data){
state.payObject=data
console.log('微信支付开始请求')
if(wechat){
wx.chooseWXPay({
timestamp:state.payObject.timeStamp,//支付签名时间戳
nonceStr:state.payObject.nonceStr,//支付签名随机串，不长于32位
package:state.payObject.package,//统一支付接口返回的prepay_id参数值
signType:state.payObject.signType,//签名方式使用新版支付需传入'MD5'
paySign:state.payObject.paySign,//支付签名
success:function(res){
alert('成功')
alert(JSON.stringify(res))
},
cancel:function(res){
alert('已取消支付')
alert(JSON.stringify(res))
},
fail:function(res){
alert(JSON.stringify(res))
}
})
}
}
在支付页面中commit
//存储微信支付数据data
letdata=res.body.data
console.log('即将跳转微信支付')
this.$store.commit({
timeStamp:data.timeStamp,
nonceStr:data.nonceStr,
type:'wechatPay',
package:data.package,
signType:data.signType,
paySign:data.paySign
})
2.支付点击完成按钮后，前端会收到JavaScript的返回值；
3.后台收到来自微信开放平台的支付成功回调通知
踩坑
1.chooseWXPay:fail,thepermissionvalueisofflineverifying
这是因为不能在在微信开发者工具上测试，需要真机测试
2.chooseWXPay:fail
需要配置正确的支付授权目录，vue的单页应用直接配置为域名就行。
其他需要配置为调用支付的上一级目录，以/结束
3.下单账户与支付账户不一致
需要后台看一下openId配置
总结
以上所述是小编给大家介绍的vue项目使用微信公众号支付总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！