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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
微信小程序实现购物车小功能
Dec 30 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计算排列组合的方法
2013/11/13 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
生成二维码方法汇总
2014/12/26 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
对python字典过滤条件的实例详解
2019/01/22 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
解决Python3下map函数的显示问题
2019/12/04 Python
为什么python比较流行
2020/06/19 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
中职生自荐信
2013/10/13 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
数学复习课教学反思
2016/02/18 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python