vue-微信付款

最新推荐文章于 2024-05-11 22:10:03 发布

jared.wang

最新推荐文章于 2024-05-11 22:10:03 发布

阅读量659

点赞数 2

分类专栏：前端 vue 文章标签：微信支付 vue微信支付

本文链接：https://blog.csdn.net/weixin_45289067/article/details/95197312

版权

前端同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

微信支付方法

微信付款不需要初始化功能, 只需要在使用的时候调用就可以了

一. 引包

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
    <title></title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
  </head>

  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

二. 编写支付公共方法

里面一些必传的参数, 是通过后台获取的

// 微信支付的公共方法
async function weChatPay(weChatPayData, payFormTypes, vinCodeIn) {
  let appId = weChatPayData.appId;
  let timestamp = weChatPayData.timeStamp;
  let nonceStr = weChatPayData.nonceStr;
  //let signature = weChatPayData.signature;
  let packages = weChatPayData.packages;
  let paySign = weChatPayData.paySign;
  let payFormType = payFormTypes;
  let vinCode = vinCodeIn;
  let orderNum = weChatPayData.orderTradeNo;
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成 签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    paySign: paySign, // 必填，签名，见附录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: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
      paySign: paySign, // 支付签名
      success: function(res) { // 支付成功后的操作
        if (payFormType === "Y") {
          window.location.href =
            "http://xxxxx.com/nwcc/historylist2";
        } else if (payFormType === "W") {
          // W Z
          window.location.href = 
             "http://xxxx.com/nwcc/maintainreport?reportType=W&vinCode=" +
            vinCode +
            "&orderTradeNo=" +
            orderNum; 
        } else if (payFormType === "Z") {
          // W Z
          window.location.href = 
            "http://xxxx.com/nwcc/maintainreport?reportType=Z&vinCode=" +
            vinCode +
            "&orderTradeNo=" +
            orderNum; 
        }
      },
      fail: function(res) {
        alert("支付失败!");
      }
    });
  });
  wx.error(function(res) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    alert("config信息验证失败");
  });
}

// 微信支付
Vue.prototype.$wxPay = weChatPay;

三. 调起支付

通过后台获取到微信config签名然后调用上面的方法, 只要签名正确就可以调起支付界面了

var params = {
  userId: localStorage.getItem("openid"),// 微信openid
   good: "xxxxx", // 商品名
   price: "600", // 价格, 单位分
   vinCode: this.vinCodeIn,
   orderType: "W"
 };
let res = await axios.postTest("/order/matinTainAdd", params);
if (res.data.errcode === 0) {
    // 下单成功
    this.$wxPay(res.data.data, "W", this.vinCodeIn); // 调起支付
    setTimeout(() => {
      this.isDisable = false;
    }, 5000);
  } else {
    this.$message.error(res.data.errmsg);
    setTimeout(() => {
      this.isDisable = false;
    }, 5000);
  }

觉得有用的话就点个赞吧

jared.wang

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-微信付款

微信支付方法微信付款不需要初始化功能, 只需要在使用的时候调用就可以了一. 引包<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1...
复制链接

扫一扫

专栏目录