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基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
javascript模块化简单解析
Apr 07 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
使用p5.js临摹动态图片
Nov 04 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中文乱码的解决方法
2006/12/17 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
JavaScript字符串对象
2017/01/14 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现的密码强度检测器示例
2017/08/23 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python列表的切片实例讲解
2019/08/20 Python
python logging通过json文件配置的步骤
2020/04/27 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
励志演讲稿600字
2014/08/21 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
努力工作保证书
2015/02/28 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA