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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
Apr 15 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
新手如何快速理解js异步编程
Jun 24 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 文件缓存函数
2011/10/08 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP之header函数详解
2021/03/02 PHP
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
python实现报表自动化详解
2017/11/16 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python subprocess模块常见用法分析
2018/06/12 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
Python 在函数上添加包装器
2020/07/28 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
中班下学期个人总结
2015/02/12 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
校园新闻稿范文
2015/07/18 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书