1.JSSDK（chooseWXPay）方法調用
該方式出現的版本比較晚，需要jssdk注入，不需要參數appId（個人理解為了跟其他js API接口統一）
JSSDK使用步驟 請看官網：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
接入前準備【支付授權目錄說明】：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
因調用支付的頁面較多，支付授權目錄 配置時，個人推薦配置 頂級目錄，可根據自己需求而定。
confirmPayOrder(orderInfo, pageType) {
if (isWx()) {
Toast.loading({
message: "加載中...",
forbidClick: true,
});
// 將訂單id傳遞給后臺
orderPayOrder({ id: orderInfo.id })
.then((resOrder) => {
getWxConfig().then(() => {
wx.ready(() => {
// chooseWXPay參數說明文檔 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
wx.chooseWXPay({
appId: resOrder.result.appId, //公眾號appId，chooseWXPay調用此處可省略，提醒后端注意大小寫
timestamp: resOrder.result.timestamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小，部分系統取到的值為毫秒級，需要轉換成秒(10位數字)
nonceStr: resOrder.result.nonceStr, // 支付簽名隨機串，不長于 32 位
package: resOrder.result.payPackage, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
signType: resOrder.result.signType, // 簽名方式：MD5,提醒后端用到加密的地方都用MD5
paySign: resOrder.result.paySign, // 支付簽名：后端注意生成規則 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
success: (res) => {
// 支付成功回調:微信團隊鄭重提示：不保證絕對可靠，切記！
// 據說部分ios手機，成功的回調不執行，所以為了保證回調執行，在complete里也做了回調執行
if (res.errMsg === "chooseWXPay:ok") {
Toast.success("支付成功");
this.refreshData(orderInfo.id, pageType);
}
},
complete: (res) => {
// 調用完成時的回調：成功或失敗都會執行
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: "請在微信環境下打開，否則無法付款",
className: "dialog-alert",
}).then(() => {
// close
});
}
},
// 獲取微信配置信息
export function getWxConfig() {
return new Promise((resolve, reject) => {
const url = encodeURIComponent(location.href.split("#")[0]); //獲取當前頁面路由
// 調用接口獲取微信簽名，入參url一般是當前頁面的url(不包括#及后面部分)
getWxSignature({ url })
.then((res) => {
if (Object.keys(res.result)) {
const { appId, nonceStr, signature, timestamp } = res.result;
wx.config({
debug: false, // 開啟調試模式
appId: appId, // appId 必填，公眾號的唯一標識
timestamp: "" + timestamp, // 必填，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名
jsApiList: ["getLocation", "chooseWXPay", "scanQRCode"], // 必填，需要使用的JS接口列表
});
}
resolve(res);
})
.catch((e) => {
reject(e);
console.log("微信配置信息調用失敗：" + e);
});
});
}
2.JSAPI調用支付（僅針對微信支付這個功能）
JSAPI出現的版本更早，無需引用jssdk，無需wx.config方法注入，需要參數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);
}
}
);
};
//調用微信支付接口
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: "請在微信環境下打開，否則無法付款",
className: "dialog-alert",
}).then(() => {
// close
});
}
}
3.在調試過程報錯解決
調用支付JSAPI，很多錯誤都會報缺少參數：total_fee
1、請檢查預支付會話標識prepay_id是否已失效，如果已經操作的訂單，可能在微信有記錄，最好換一條數據測試。
2、請求的appid與下單接口的appid是否一致，appid 是H5所在公眾號的appId，此處需要注意，后端調用微信返回的是appid，前臺需要配置的參數是appId，注意大小寫。
3、以下幾點都注意核對以下，金額是“分”等等.
image.png
支付簽名失敗
image.png
讓后端確認簽名生成規則，參考官網：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
簽名校驗驗證：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1
當前頁面URL未注冊
原因就是：授權目錄配置的不對，請仔細核對，配置好后，一般5分鐘內生效。
