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 学习笔记01 JQuery初接触
May 06 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
js Dialog 实践分享
2012/10/22 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
javaScript中"=="和"==="的区别详解
2018/03/16 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
vue 实现图片懒加载功能
2020/12/31 Vue.js
python中List的sort方法指南
2014/09/01 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
python保存网页图片到本地的方法
2018/07/24 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
大学生应聘自荐信
2013/10/11 职场文书
自我推荐书
2013/12/04 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS