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作用域链使用介绍
Aug 29 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
详解vue引入子组件方法
Feb 12 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php短址转换实现方法
2015/02/25 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
vue.js组件之间传递数据的方法
2017/07/10 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python中IPYTHON入门实例
2015/05/11 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
发布你的Python模块详解
2016/09/15 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
2014年副班长工作总结
2014/12/10 职场文书
党建工作汇报材料
2014/12/24 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
高三教师工作总结2015
2015/07/21 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书