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 相关文章推荐
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
angularJS 入门基础
Feb 09 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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笔记之常用文件操作
2010/10/12 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
用js解决数字不能换行问题
2010/08/10 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js Calender控件使用详解
2015/01/05 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Python中最大递归深度值的探讨
2019/03/05 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python装饰器使用实例详解
2019/12/14 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
大学生的网络创业计划书
2013/12/26 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL