vue微信公众号h5微信支付

可以配合https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1微信支付。

一.配置好公众号的基本配置（网页域名授权，你需要填写正确的可以访问的项目域名，js安全域名都要配）还有公众号的设置

二.配置微信商户平台的内容才可以开始支付

商户平台需要进行的配置是：商户号，支付密钥

商户号一般都是和自己公众号的商户号是一样的

商户支付目录是可以配置一个泛目录

如果出现这种情况就是支付目录没配好

三.安装js-sdk的或者weixin-jsapi包，这有个坑点就是项目如果是vue你要用weixin-jsapi，用js-sdk会有别的坑问题

（用npm 或yarn安装npm install weixin-js-sdk --save 或者npm install weixin-jsapi --save）import wx from “weixin-jsapi” 在main.js里面引入;

四.配置微信wx.config文件，调用官方api完成支付

  //  微信支付
   async getConfig() {
      let result = await apiWxConfig({
        url: window.location.href.split("#")[0], // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
      });
      if (result.code == 200) {
        var timestamp = result.data.timestamp;
        var noncestr = result.data.nonceStr;
        var signature = result.data.signature;
        var appId = result.data.appId;
        console.log("rresult.data.timestamp", result.data.timestamp);

        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: ["checkJsApi", "chooseWXPay"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        }); // 错误时
        wx.error(function (res) {
          alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });
        // 成功
        // let ip = returnCitySN["cip"];
        // console.log('returnCitySN',returnCitySN)
        let order = this.getOrder();
        let extra = JSON.stringify({ openId: getToken("openId") });
        console.log("order", order);
        let resData = await apiPaying({
          channelId: "WX_JSAPI",
          storeId: this.$store.state.storeId,
          mchId: "**",
          mchOrderNo: order,
          amount: +this.myMoneyList * 100,
          subject: "***",
          body: "***",
          extra: extra,
        });

        console.log("dytata-------------openid", resData);
        this.wxPay = resData.data.payParams;
        let { timeStamp, nonceStr, signType, paySign } = resData.data.payParams;
        let package1 = resData.data.payParams.package;

        if (resData.code != 0) {
          this.$toast.fail("支付参数获取失败");
          return;
        }
        wx.ready(function () {
          wx.checkJsApi({
            jsApiList: ["chooseWXPay"],

            success: function (res1) {
              wx.chooseWXPay({
                timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                package: package1,
                signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  if (res.errMsg == "chooseWXPay:ok") {
                    //支付成功
                    alert("支付成功");
                    setTimeout(() => {
                      window.location.reload();
                    }, 2000);
                  } else {
                    alert(res.errMsg);
                  }
                },
                cancel: function (res) {
                  //支付取消
                  alert("支付取消");
                },
              });
            },
          });
        });
      } else {
        this.$toast.fail("微信配置失败");
      }
    },

对大家有帮助的话，点个赞谢谢，爱你们哦