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 07 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
javascript实现表单验证
Jan 29 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python实现小球弹跳效果
2019/05/10 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
门诊挂号室室长岗位职责
2013/11/27 职场文书
如何填写个人简历自我评价
2013/12/10 职场文书
个人委托书怎么写
2014/04/04 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
入党个人总结范文
2015/03/02 职场文书
少年犯观后感
2015/06/11 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
使用python绘制分组对比柱状图
2022/04/21 Python