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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
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源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
php实现微信企业转账功能
2018/10/02 PHP
JavaScript高级程序设计
2006/12/29 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python中while循环语句用法简单实例
2015/05/07 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
Linux常见面试题
2016/10/04 面试题
《母亲的恩情》教学反思
2014/02/13 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
教师见习报告范文
2014/11/03 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle