前端做微信支付（vue）

最新推荐文章于 2025-08-11 10:24:55 发布

原创

最新推荐文章于 2025-08-11 10:24:55 发布 · 2.8k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

微信支付主要工作量在后端，前端就是调用后端给的微信支付接口，获取微信支付的相关参数：

首先你的安装微信支付模块并引入它

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

接下来你需要后端给你一个接口文档

类似于这样的
在这里插入图片描述
在就是你调用接口了，看代码吧：

1，点击立即支付的代码

toPay() {
      //请求后台接口获取数据 准备进行微信支付
      let param = {
        openId: sessionStorage.getItem("openId"),
        orderCode: this.orderInfo.orderCode,
        insuredAmt: this.orderInfo.insuredAmt,
        orderBody: "订单" + this.orderInfo.orderCode,
        tradeType: "JSAPI",
        clientIp: this.cip,
        remarks: "测试微信支付"
      };
      apiWechatData(param).then(res => {
        //成功状态下
        if (res.code == 200) {
          // 存储微信支付数据data
          let data = res.data;
          console.log(data);
          //调用微信支付
          this.wexinPay(