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分钟内生效。