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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
js+css实现打字效果
Jun 24 Javascript
js实现开关灯效果
Mar 30 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
详解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 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python函数返回值实例分析
2015/06/08 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
财务主管的岗位职责
2013/12/30 职场文书
单位委托书范本
2014/04/04 职场文书
工作经历证明书范文
2014/11/02 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
初中重阳节活动总结
2015/05/05 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
TS 类型兼容教程示例详解
2022/09/23 Javascript
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers