概览：
微信环境 H5 的公众号jsapi支付，支付成功之后，点击支付成功页面的完成，没有回到原来的，原页面被关闭了，解决方案
灵感来源：
公司需要使用公众号，在公众号H5中拉起微信单次支付功能，支付对接好了，竟然出现了点击完成按钮直接把原始页面给关闭掉了。
问题解决历程：
1、先查看了支付代码中是否有关闭的页面的逻辑，下面是公众号拉起jsapi支付的具体代码，看了N遍，代码都是没有问题的。
var payParams = {
"appId": "wx1559ab2c3112219f", //公众号ID，由商户传入
"timeStamp": res.data.data.h5_url.timeStamp + "", //时间戳，自1970年以来的秒数
"nonceStr": res.data.data.h5_url.nonceStr, //随机串
"package": res.data.data.h5_url.package,
"signType": res.data.data.h5_url.signType, //微信签名方式：
"paySign": res.data.data.h5_url.paySign //微信签名
// "redirectUrl": encodeURIComponent('xxx')
};
WeixinJSBridge.invoke('getBrandWCPayRequest', payParams,
function(res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 支付成功，可以添加一些用户反馈
// uni.showToast({
// title: '购买成功',
// icon: 'none',
// duration: 1500
// });
wx.showModal({
title: '支付结果',
content: '购买成功！',
showCancel: false,
success (res) {
if (res.confirm) {
// 用户确认后可以进行页面跳转或其他操作
//更新会员信息
if (uni.getStorageSync('phone') && uni.getStorageSync('authorization')) {
queryUserPage();
}
}
}
});
} else {
// 支付失败，可以提示用户重新尝试
uni.showToast({
title: '支付失败,请重新拉起支付！',
icon: 'none',
duration: 2000
});
// 可以在这里添加重试支付的逻辑
}
}
);
2、第二次尝试使用回调链接redirectUrl，依然无效
3、多次查询资料和尝试之后，因为是服务商模式对接的微信JSAPI支付，发现微信支付官方关闭了JSAPI支付成功后的跳转指定页面的功能，目的是为了推广点金计划。点金计划是一个广告推广系统，服务商可以在其管理平台为特约商户开通或关闭点金计划，并配置同业过滤标签和广告内容。文档：产品介绍_点金计划|微信支付合作伙伴文档中心
解决方案：
知道了问题点，那就好解决了，直接让服务商给打开点金计划，然后配置上自己订单页面。订单页面参考下面代码：（使用的uniapp搞得项目）
<template>
<view class="content">
<view class="text-area">
<text class="title">购买成功</text>
</view>
<view @click="btnBack()" class="btn-class">返回</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
loading: true,
detail: {},
list: {},
codee: ''
};
},
async onLoad() {
const urlone = window.location.href;
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; //当前页面的全部信息
const route = currentPage.route; //当前路由的路径 pages/login/login
const options = currentPage.options; //url里面的参数json类型
},
async created() {
try {
document.querySelector("html").style.fontSize = "10px"; // 解决进入小票html 的font-size = 0 的问题
const urlone = window.location.href; //获取当前路径
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; //当前页面的全部信息
const route = currentPage.route; //当前路由的路径 pages/login/login
const options = currentPage.options; //url里面的参数json类型
let subMchId = options.sub_mch_id;
let outTradeNo = options.out_trade_no;
let checkCode = options.check_code;
} catch (err) {
console.log(err)
}
},
mounted() {
const mchData = {
action: "onIframeReady",
displayStyle: "SHOW_CUSTOM_PAGE",
};
const postData = JSON.stringify(mchData);
window.parent.postMessage(postData, "*");
},
methods: {
btnBack(){
// 跳转到指定的h5页面
const mchData = {
action: "jumpOut",
jumpOutUrl: `xxxxx`,//这里是要自己跳转之后的页面地址
}; // 跳转到指定的页面并携带参数
const postData = JSON.stringify(mchData);
window.parent.postMessage(postData, "*");
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300rpx;
}
.title {
font-size: 36rpx;
color: #A26B1C;
}
.btn-class{
width: 400rpx;
height: 90rpx;
background: linear-gradient( 90deg, #FFE395 0%, #FFB066 100%);
border-radius: 96rpx 96rpx 96rpx 96rpx;
font-weight: 700;
font-size: 36rpx;
color: #A26B1C;
line-height: 52rpx;
text-align: left;
font-style: normal;
text-transform: none;
display: flex;
align-items: center;
justify-content: center;
}
</style>
1、需要先配置域名，也就是自己需要点击完成跳转的订单页面的域名，需要服务商提供域名校验文件，上传到自己服务器根目录
2、添加好域名，并且配置好商家小票链接之后，需要在提供特约商户号、商家订单号、微信支付订单号，生成预览商家小票效果的二维码，微信扫码二维码，即可看到在微信支付完成，用户点击完成之后的效果了。
3、具体效果，如下图
