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第二章
Sep 30 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
如何用JavaScript实现动态修改CSS样式表
May 20 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
详解webpack babel的配置
Jan 09 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
js中switch语句的学习笔记
Mar 25 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
PHPMailer邮件发送的实现代码
2013/05/04 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python flask实现分页效果
2017/06/27 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Python @property使用方法解析
2019/09/17 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python pip 常用命令汇总
2020/10/19 Python
小学生自我评价范文
2014/01/25 职场文书
保护动物倡议书
2014/04/15 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
网络销售员岗位职责
2015/04/11 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
社会实践单位意见
2015/06/05 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
教你nginx跳转配置的四种方式
2022/07/07 Servers