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 限制输入脚本大全
Nov 03 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JavaScript事件委托技术实例分析
2015/02/06 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python制作简易注册登录系统
2016/12/15 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python数据归一化及三种方法详解
2019/08/06 Python
python实现梯度下降法
2020/03/24 Python
浅析Python 条件控制语句
2020/07/15 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
2015年惩防体系建设工作总结
2015/05/22 职场文书