vue微信公衆号h5微信支付

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

一.配置好公衆号的(de)基本配置（網頁域名授權，你需要(yào / yāo)填寫正确的(de)可以(yǐ)訪問的(de)項目域名，js安全域名都要(yào / yāo)配）還有公衆号的(de)設置

二.配置微信商戶平台的(de)内容才可以(yǐ)開始支付

商戶平台需要(yào / yāo)進行的(de)配置是(shì)：商戶号，支付密鑰

商戶号一般都是(shì)和(hé / huò)自己公衆号的(de)商戶号是(shì)一樣的(de)

商戶支付目錄是(shì)可以(yǐ)配置一個(gè)泛目錄

如果出(chū)現這(zhè)種情況就(jiù)是(shì)支付目錄沒配好

三.安裝js-sdk的(de)或者weixin-jsapi包，這(zhè)有個(gè)坑點就(jiù)是(shì)項目如果是(shì)vue你要(yào / yāo)用weixin-jsapi，用js-sdk會有别的(de)坑問題

（用npm 或yarn安裝npm install weixin-js-sdk --save 或者npm install weixin-jsapi --save）import wx from “weixin-jsapi” 在(zài)main.js裏面引入;

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

  //  微信支付
   async getConfig() {
      let result = await apiWxConfig({
        url: window.location.href.split("#")[0], // 獲取當前掃碼界面的(de)url，url後面不(bù)能攜帶任何參數及#号，所以(yǐ)在(zài)此進行分割
      });
      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, // 開啓調試模式,調用的(de)所有api的(de)返回值會在(zài)客戶端alert出(chū)來(lái)，若要(yào / yāo)查看傳入的(de)參數，可以(yǐ)在(zài)pc端打開，參數信息會通過log打出(chū)，僅在(zài)pc端時(shí)才會打印。
          //                                debug : true, // 開啓調試模式,調用的(de)所有api的(de)返回值會在(zài)客戶端alert出(chū)來(lái)，若要(yào / yāo)查看傳入的(de)參數，可以(yǐ)在(zài)pc端打開，參數信息會通過log打出(chū)，僅在(zài)pc端時(shí)才會打印。
          appId: appId, // 必填，公衆号的(de)唯一标識
          timestamp: timestamp, // 必填，生成簽名的(de)時(shí)間戳
          nonceStr: noncestr, // 必填，生成簽名的(de)随機串
          signature: signature, // 必填，簽名，見附錄1
          jsApiList: ["checkJsApi", "chooseWXPay"], // 必填，需要(yào / yāo)使用的(de)JS接口列表，所有JS接口列表見附錄2
        }); // 錯誤時(shí)
        wx.error(function (res) {
          alert("出(chū)錯了(le／liǎo)：" + res.errMsg); //這(zhè)個(gè)地(dì / de)方的(de)好處就(jiù)是(shì)wx.config配置錯誤，會彈出(chū)窗口哪裏錯誤，然後根據微信文檔查詢即可。
        });
        // 成功
        // 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, // 支付簽名時(shí)間戳，注意微信jssdk中的(de)所有使用timestamp字段均爲(wéi / wèi)小寫。但最新版的(de)支付後台生成簽名使用的(de)timeStamp字段名需大(dà)寫其中的(de)S字符
                nonceStr: nonceStr, // 支付簽名随機串，不(bù)長于(yú) 32 位
                package: package1,
                signType: signType, // 簽名方式，默認爲(wéi / wèi)'SHA1'，使用新版支付需傳入'MD5'
                paySign: paySign, // 支付簽名
                success: function (res) {
                  // 支付成功後的(de)回調函數
                  if (res.errMsg == "chooseWXPay:ok") {
                    //支付成功
                    alert("支付成功");
                    setTimeout(() => {
                      window.location.reload();
                    }, 2000);
                  } else {
                    alert(res.errMsg);
                  }
                },
                cancel: function (res) {
                  //支付取消
                  alert("支付取消");
                },
              });
            },
          });
        });
      } else {
        this.$toast.fail("微信配置失敗");
      }
    },

對大(dà)家有幫助的(de)話，點個(gè)贊謝謝，愛你們哦