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浏览器选项卡效果
Aug 25 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
AngularJS实现多级下拉框
Mar 25 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使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
初学Python函数的笔记整理
2015/04/07 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python编写一个优美的下载器
2018/04/15 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
python如何写出表白程序
2020/06/01 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
Java如何支持I18N?
2016/10/31 面试题
幼儿园门卫岗位职责
2014/02/14 职场文书
先进单位申报材料
2014/12/25 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
劳动仲裁调解书
2015/05/20 职场文书
汉字听写大会观后感
2015/06/12 职场文书
装修公司管理制度
2015/08/05 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android