vue前后分离调起微信支付


Posted in Javascript onJuly 29, 2019

本文实例为大家分享了vue前后分离调起微信支付的具体代码,供大家参考,具体内容如下

@ VUE调起微信支付

VUE前后分离调起微信支付

支付很简单,但每次都是在网上直接扒下来使用,老年人记忆,于是就自己记录一下,方便以后快速的粘贴复制;

第一步: VUE 需要安装 微信支付模块

// npm install weixin-js-sdk
import wx from "weixin-js-sdk";

第二步:封装 微信支付方法

wexinPay(data, cb, errorCb) {
  //获取后台传入的数据
  let appId = data.appId;
  let timestamp = data.timeStamp;
  let nonceStr = data.nonceStr;
  let signature = data.signature;
  let packages = data.package;
  let paySign = data.paySign;
  let signType = data.signType;
  console.log('发起微信支付')
  //下面要发起微信支付了
  wx.config({
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
   appId: appId, // 必填,公众号的唯一标识
   timestamp: timestamp, // 必填,生成签名的时间戳
   nonceStr: nonceStr, // 必填,生成签名的随机串
   signature: signature, // 必填,签名,见附录1
   jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  });
  wx.ready(function () {
   wx.chooseWXPay({
    timestamp: timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: nonceStr, // 支付签名随机串,不长于 32 位
    package: packages, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
    signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
    paySign: paySign, // 支付签名
    success: function (res) {
     // 支付成功后的回调函数
     cb(res);
    },
    fail: function (res) {
     //失败回调函数
     errorCb(res);
    }
   });
  });
  wx.error(function (res) {
   // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
   /*alert("config信息验证失败");*/
  });
 }

第三步:向后台请求数据 成功获取 转入微信支付方法 调起 微信支付

//请求后台接口获取数据 准备进行微信支付 
  that.axios.post("user/recommend", data).then(res => {
  //成功状态下 
  if (res.data.status) {
   // 存储微信支付数据data
   let data = res.data.data;
   console.log("即将跳转微信支付");
   //函数为分装过得 (就是调用微信支付)
   http.wexinPay(
   {
    appId: data.appId,
    nonceStr: data.nonceStr,
    package: data.package,
    paySign: data.paySign,
    signType: data.signType,
    timeStamp: data.timeStamp
   },
   //成功回调函数
   res => {
    that.$router.push({ path: "/vip" });
   }
   );
  } 
  else {
   that.$message.error(res.data.message);
 }
});

PS: 注意查看数据是够对应 ,后台有时候可能会把提现和支付搞混,保证数据正确性;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
简单的JS轮播图代码
Jul 18 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
详解vue-property-decorator使用手册
Jul 29 #Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 #Javascript
微信小程序 WXML节点信息查询详解
Jul 29 #Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 #Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 #Javascript
vue.js 2.0实现简单分页效果
Jul 29 #Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
使用PHP实现密保卡功能实现代码<打包下载直接运行>
2011/10/09 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
详解Vite的新体验
2021/02/22 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
linux 下实现python多版本安装实践
2014/11/18 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
python实现顺时针打印矩阵
2019/03/02 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
化妆品店促销方案
2014/02/24 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
行政申诉状范文
2015/05/20 职场文书
毕业生入职感言
2015/07/31 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python