1.JSSDK（chooseWXPay）方法調(diào)用

該方式出現(xiàn)的版本比較晚舔痪，需要jssdk注入津滞，不需要參數(shù)appId（個人理解為了跟其他js API接口統(tǒng)一）

JSSDK使用步驟 請看官網(wǎng)：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

接入前準(zhǔn)備【支付授權(quán)目錄說明】：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

因調(diào)用支付的頁面較多铝侵，支付授權(quán)目錄 配置時，個人推薦配置 頂級目錄触徐，可根據(jù)自己需求而定咪鲜。

confirmPayOrder(orderInfo, pageType) {
        if (isWx()) {
          Toast.loading({
            message: "加載中...",
            forbidClick: true,
          });
          // 將訂單id傳遞給后臺
          orderPayOrder({ id: orderInfo.id })
            .then((resOrder) => {
              getWxConfig().then(() => {
                wx.ready(() => {
                  // chooseWXPay參數(shù)說明文檔 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
                  wx.chooseWXPay({
                    appId: resOrder.result.appId, //公眾號appId，chooseWXPay調(diào)用此處可省略锌介，提醒后端注意大小寫
                    timestamp: resOrder.result.timestamp, // 支付簽名時間戳嗜诀，注意微信jssdk中的所有使用timestamp字段均為小，部分系統(tǒng)取到的值為毫秒級孔祸，需要轉(zhuǎn)換成秒(10位數(shù)字)
                    nonceStr: resOrder.result.nonceStr, // 支付簽名隨機串隆敢，不長于 32 位
                    package: resOrder.result.payPackage, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=\*\*\*）
                    signType: resOrder.result.signType, // 簽名方式：MD5,提醒后端用到加密的地方都用MD5
                    paySign: resOrder.result.paySign, // 支付簽名：后端注意生成規(guī)則 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
                    success: (res) => {
                      // 支付成功回調(diào):微信團隊鄭重提示：不保證絕對可靠崔慧，切記拂蝎！
                      // 據(jù)說部分ios手機，成功的回調(diào)不執(zhí)行惶室，所以為了保證回調(diào)執(zhí)行温自，在complete里也做了回調(diào)執(zhí)行
                      if (res.errMsg === "chooseWXPay:ok") {
                        Toast.success("支付成功");
                        this.refreshData(orderInfo.id, pageType);
                      }
                    },
                    complete: (res) => {
                      // 調(diào)用完成時的回調(diào)：成功或失敗都會執(zhí)行
                      if (res.errMsg === "chooseWXPay:ok") {
                        Toast.success("支付成功");
                        this.refreshData(orderInfo.id, pageType);
                        console.log("complete支付成功:", res);
                      } /*else if (res.errMsg === "chooseWXPay:cancel") {
                        Toast.fail("取消支付");
                        this.refreshData(orderInfo.id, pageType);
                        console.log("complete取消支付:",res);
                      } else if (res.errMsg === "chooseWXPay:fail") {
                        Toast.fail("支付失敗");
                        this.refreshData(orderInfo.id, pageType);
                        console.log("complete支付失敗:",res);
                      }*/
                    },
                    fail: (res) => {
                      Toast.fail("支付失敗");
                      console.log("支付失敗:", res);
                      this.refreshData(orderInfo.id, pageType);
                    },
                    cancel: (res) => {
                      Toast.fail("取消支付");
                      console.log("取消支付:", res);
                      this.refreshData(orderInfo.id, pageType);
                    },
                  });
                });
              });
            })
            .catch((err) => {
              // 后臺報錯 彈框提示
              this.showTipDialog = true;
              this.errTip = err.errorDesc;
            });
        } else {
          Dialog.alert({
            message: "請在微信環(huán)境下打開，否則無法付款",
            className: "dialog-alert",
          }).then(() => {
            // close
          });
        }
    },

// 獲取微信配置信息
export function getWxConfig() {
  return new Promise((resolve, reject) => {
    const url = encodeURIComponent(location.href.split("#")[0]); //獲取當(dāng)前頁面路由
    // 調(diào)用接口獲取微信簽名皇钞，入?yún)rl一般是當(dāng)前頁面的url(不包括#及后面部分)
    getWxSignature({ url })
      .then((res) => {
        if (Object.keys(res.result)) {
          const { appId, nonceStr, signature, timestamp } = res.result;
          wx.config({
            debug: false, // 開啟調(diào)試模式
            appId: appId, // appId 必填悼泌，公眾號的唯一標(biāo)識
            timestamp: "" + timestamp, // 必填，生成簽名的時間戳
            nonceStr: nonceStr, // 必填夹界，生成簽名的隨機串
            signature: signature, // 必填馆里，簽名
            jsApiList: ["getLocation", "chooseWXPay", "scanQRCode"], // 必填，需要使用的JS接口列表
          });
        }
        resolve(res);
      })
      .catch((e) => {
        reject(e);
        console.log("微信配置信息調(diào)用失斂墒痢：" + e);
      });
  });
}

2.JSAPI調(diào)用支付（僅針對微信支付這個功能）

JSAPI出現(xiàn)的版本更早鸠踪，無需引用jssdk，無需wx.config方法注入复斥，需要參數(shù)appId

confirmPayOrder(orderInfo, pageType) {
  if (isWx()) {   
      Toast.loading({
            message: "加載中...",
            forbidClick: true,
          });
          orderPayOrder({ id: orderInfo.id }).then((resOrder) => {
            let _this = this;
            var onBridgeReady = () => {
              // eslint-disable-next-line
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: resOrder.result.appId, //公眾號ID营密，此處必傳
                  timeStamp: resOrder.result.timestamp, //時間戳，timeStamp S需要大寫
                  nonceStr: resOrder.result.nonceStr, //隨機串
                  package: resOrder.result.payPackage,
                  signType: resOrder.result.signType, //微信簽名方式MD5
                  paySign: resOrder.result.paySign, //微信簽名
                },
                function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功后返回ok目锭，但并不保證它絕對可靠评汰。
                    _this.refreshData(orderInfo.id, pageType);
                  }
                  if (res.err_msg == "get_brand_wcpay_request:fail") {
                    Toast.fail("支付失敗");
                    _this.refreshData(orderInfo.id, pageType);
                  }
                  if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    Toast.fail("支付取消");
                    _this.refreshData(orderInfo.id, pageType);
                  }
                }
              );
            };
            //調(diào)用微信支付接口
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener(
                  "WeixinJSBridgeReady",
                  onBridgeReady,
                  false
                );
              } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
              }
            } else {
              onBridgeReady();
            }
          });
        } else {
          Dialog.alert({
            message: "請在微信環(huán)境下打開，否則無法付款",
            className: "dialog-alert",
          }).then(() => {
            // close
          });
        }
  }

3.在調(diào)試過程報錯解決

調(diào)用支付JSAPI侣集，很多錯誤都會報缺少參數(shù)：total_fee

1键俱、請檢查預(yù)支付會話標(biāo)識prepay_id是否已失效，如果已經(jīng)操作的訂單世分，可能在微信有記錄编振，最好換一條數(shù)據(jù)測試。
2臭埋、請求的appid與下單接口的appid是否一致踪央，appid 是H5所在公眾號的appId，此處需要注意瓢阴，后端調(diào)用微信返回的是appid畅蹂，前臺需要配置的參數(shù)是appId，注意大小寫荣恐。
3液斜、以下幾點都注意核對以下累贤，金額是“分”等等.

image.png

支付簽名失敗

image.png

當(dāng)前頁面URL未注冊

原因就是：授權(quán)目錄配置的不對少漆，請仔細核對臼膏，配置好后，一般5分鐘內(nèi)生效示损。