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 最佳实践
Oct 30 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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数组中删除元素的实现代码
2012/06/22 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
php源码的使用方法讲解
2019/09/26 PHP
类之Prototype.js学习
2007/06/13 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
js调用css属性写法
2013/09/21 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
Vue页面骨架屏注入方法
2018/05/13 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python制作刷网页流量工具
2017/04/23 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python实现按中文排序的方法示例
2018/04/25 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python实现倒计时小工具
2019/07/29 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
医院我们的节日活动实施方案
2014/08/22 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers