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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
详解Angular 4.x Injector
May 04 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 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
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
轮播的简单实现方法
2016/07/28 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python如何基于redis实现ip代理池
2020/01/17 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
如何理解python面向对象编程
2020/06/01 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
简述python Scrapy框架
2020/08/17 Python
Python grpc超时机制代码示例
2020/09/14 Python
品牌服务方案
2014/06/03 职场文书
关于安全的标语
2014/06/10 职场文书
代理人委托书
2014/08/01 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
指导教师推荐意见
2015/06/05 职场文书
少年雷锋观后感
2015/06/10 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS