最近项目中用过微信JSAPI进行支付的小伙伴们又要头疼了，微信官方团队又莫名其妙的更新了一个叫“点金计划”的东西，升级其实也无所谓，你尽管升级不影响我使用就行了。可惜我们太天真了，你不升级使用这种支付模式我还真就要为你创造点生产事故来引起你们的注意了。
让我们来理解下“点金计划”，其实如果业务中直接支付完成流程结束的也没有影响，但是如果支付成功后需要指定自己的跳转页面进行后续业务的，抱歉出问题了，看一则充满商业气息的公告。
知道了问题产生的原因那就开始解决吧，在此之前先为大家简单介绍下微信几种常见而又容易混淆的支付方式。
JSAPI支付
用户通过微信扫码、关注公众号等方式进入商家H5页面，并在微信内调用JSSDK完成支付
H5支付
用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付
APP支付
商户APP中集成微信SDK，用户点击后跳转到微信内完成支付
小程序支付
用户在微信小程序中使用微信支付的场景
其中JSAPI支付和H5支付是最令人傻傻不清楚的，他们最大的区别就在于JSAPI支付必须在微信浏览器内进行支付，而H5支付可以在任意浏览器中进行支付，更多支付方式详见微信支付。
介绍完这些让我们来真正了解下JSAPI调起支付：
获取微信支付参数示例，记得在初始化时调用这个接口：
async weChatParams() {
try {
// 后端微信参数接口
const result = await getWeChatParams({
// 需要的参数
params1: "",
params2: "",
//...
});
console.log("result--", result);
// 根据后端返回成功的code
if (result.code == "200") {
// 保存参数
this.wxData = result.data
} else {
// 后端报错提示
this.$toast({ message: result.msg });
}
} catch (error) {
console.log(error);
}
}
使用微信JSAPI：
onBridgeReady() {
// 刚才保存的参数
const data = this.wxData;
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: data.appId,
timeStamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.packAge,
signType: data.signType,
paySign: data.paySign
},
function(res: { err_msg: string }) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
console.log("成功: ", res.err_msg);
// 无法进行指定路径跳转，默认跳出程序
} else {
console.log("失败: ", res.err_msg);
}
}
);
}
微信支付调起支付界面：
weChatPay() {
console.log("WeixinJSBridge--", typeof WeixinJSBridge);
if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
this.onBridgeReady,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady);
document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady);
}
} else {
this.onBridgeReady();
}
}
点击立即支付按钮：
goToBuy() {
// 判断微信环境
const isWeixin = window.navigator.userAgent.toLowerCase();
if (isWeixin.match(/MicroMessenger/i) === "micromessenger") {
this.weChatPay();
}
}
到这里微信支付流程已经结束，如果需要进行指定页面跳转必须配置“点金计划”。
点金计划产品介绍
点金计划产品文档
如图所示：
1、第一种情况对应未开通点金计划，支付完成后将直接退出程序回到微信主页面；
2、第二种情况对应开通点金计划和官方小票，支付完成停留在此页面；
3、第三种情况对应开通点金计划和商家小票，支付完成停留在此页面。
2和3两种情况的区别在于商家小票可以展示用户自定义的页面，知道了这个后我们就可以在页面上自定义按钮前往指定页面，但是必须以“点金计划”提供的JSAPI进行跳转。
点金计划页面 JSSDK
点金计划页面 JSAPI
1、按订单确认是否展示商家小票（onIframeReady 事件）：已开通商家小票功能的特约商户，服务商依然可以按照当前订单的情况决定是否展示商家小票（也可选择直接展示官方小票）。
2、调整 Iframe 框架高度（onIframeReady 事件）：供服务商调整商家小票区域的整体高度（规则：以宽度 640px 为基准，商家小票高度最小 600px，最大 960px。若服务商通过 jsapi 传入高度小于 600px，页面会展示 600px，传入大于 960px，页面仅展示 960px）。
3、外跳新页面（jumpOut 事件）：支持从点金计划页面上方的商家小票区域，点击外跳到商家的完整页面（此处不可模拟用户点击自动外跳，否则相关能力会被处罚）。
onIframeReady 事件：
示例（展示官方小票及自定义高度） ：
let mchData ={
action:'onIframeReady',
displayStyle:'SHOW_OFFICIAL_PAGE',
height: 960
}
let postData = JSON. stringify(mchData)
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
jumpOut 事件：
示例·：
let mchData ={
action:'jumpOut',
jumpOutUrl:'https://www.qq.com'
}
let postData = JSON. stringify(mchData)
parent.postMessage(postData, 'https://payapp.weixin.qq.com')