vue项目使用微信公众号支付总结及遇到的坑


Posted in Javascript onOctober 23, 2018

微信公众号支付

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
  let data = 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, the permission value is offline verifying

这是因为不能在在微信开发者工具上测试,需要真机测试

2. chooseWXPay:fail

需要配置正确的支付授权目录,vue的单页应用直接配置为域名就行。

其他需要配置为调用支付的上一级目录,以/结束

3. 下单账户与支付账户不一致

需要后台看一下openId配置

总结

以上所述是小编给大家介绍的vue项目使用微信公众号支付总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
Jun 25 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
JS实现简单日历特效
Jan 03 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 #Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 #Javascript
React 路由懒加载的几种实现方案
Oct 23 #Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 #Javascript
详解React 的几种条件渲染以及选择
Oct 23 #Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
php生成文件
2007/01/15 PHP
谨慎使用PHP的引用原因分析
2012/09/06 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
Node.js实现文件上传
2016/07/05 Javascript
js实现常用排序算法
2016/08/09 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
详解vue axios中文文档
2017/09/12 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python中assert用法实例分析
2015/04/30 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python 串口读写的实现方法
2019/06/12 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python设置中文界面实例方法
2020/10/27 Python
应届专科生个人的自我评价
2014/01/05 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书