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 面向对象编程 聊聊对象的事
Sep 17 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
基于node.js实现微信支付退款功能
Dec 19 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
用javascript实现画板的代码
2007/09/05 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python协程的用法和例子详解
2017/09/09 Python
python与字符编码问题
2019/05/24 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
运动会通讯稿500字
2014/02/20 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
个人贷款收入证明
2014/10/26 职场文书
承兑汇票延期证明
2015/06/23 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js