vue项目使用微信公众号支付总结及遇到的坑
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要介绍了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, // 支付签名 suess: function (res) { alert('成功') alert(JSON.stringify(res)) }, cancel: function (res) { alert('已取消支付') alert(JSON.stringify(res)) }, fail: function (res) { alert(JSON.stringify(res)) } }) } }
在支付页面中mit
// 存储微信支付数据data let data = res.body.data console.log('即将跳转微信支付') this.$store.mit({ timeStamp: data.timeStamp, nonceStr: data.nonceStr, type: 'wechatPay', package: data.package, signType: data.signType, paySign: data.paySign })
2. 支付点击完成按钮后,前端会收到JavaScript的返回值;
3. 后台收到来自微信开放平台的支付成功回调通知
踩坑
1. chooseWXPay:fail, the permission value is offline verifying
这是因为不能在在微信开发者工具上测试,需要真机测试
2. chooseWXPay:fail
需要配置正确的支付授权目录,vue的单页应用直接配置为域名就行。
其他需要配置为调用支付的上一级目录,以/结束
3. 下单账户与支付账户不一致
需要后台看一下openId配置
总结
以上所述是长沙网络推广给大家介绍的vue项目使用微信公众号支付总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程