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 相关文章推荐
splice slice区别
Oct 09 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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计划任务、定时执行任务的实现代码
2011/04/23 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
一篇不错的Python入门教程
2007/02/08 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python的标准模块包json详解
2017/03/13 Python
python 格式化输出百分号的方法
2019/01/20 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
标记环介质访问控制协议
2016/03/27 面试题
半年思想汇报
2013/12/30 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
运动会广播稿20字
2014/02/18 职场文书
保护环境倡议书100字
2014/05/19 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
班级口号大全
2014/06/09 职场文书
企业员工集体活动方案
2014/08/17 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Python Pandas 删除列操作
2022/03/16 Python
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
数据设计之权限的实现
2022/08/05 MySQL