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 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
悬浮数字的实现案例
Feb 19 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
浅谈js原生拖放
Nov 21 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
javascript中layim之查找好友查找群组
Feb 06 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生成唯一订单号的方法汇总
2015/04/16 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
Python中处理时间的几种方法小结
2015/04/09 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
银行类自荐信
2014/02/04 职场文书
小学毕业感言50字
2014/02/16 职场文书
大学生自我鉴定书
2014/03/24 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
通知函的格式
2015/04/27 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
MySQL GTID复制的具体使用
2022/05/20 MySQL