共计 3647 个字符，预计需要花费 10 分钟才能阅读完成。
做微信领取的时候因为需要让领取后跳转自家我的项目的页面，发现领取点击实现之后间接退出我的项目返回到了微信公众号页面，上网查了一下，发现曾经不反对这种自定义了，须要加入微信的点金打算, 这样领取胜利之后会跳转到小票页面，分为两种一种商家小票，一种是官网小票，我这里用的是商家小票。拜访这个地址能够查看对于点金打算的文档和配置教程：点金打算。
—> 首先配置商家小票链接：须要先把本人的页面文件上传到服务器，我的是上传了一个 html 文件，而后把该 html 文件对应的链接填写到商家小票链接 input 框就行了，微信的领取胜利页面会把该链接填进 ifram 标签外面，这样本人的页面就嵌入微信的领取胜利页了，代码会放在上面。
—> 这样所有的货色配置好之后就能在商家小票的调试工具进行调试了，填写好对应的参数扫描生成的二维码就能够。
而后就是嵌入页面的代码，这个也是我网上借鉴的，改了本人的款式就能用：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="referrer" content="origin">
<meta name="viewport"
content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<title> 领取实现测试 </title>
<script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
body {font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;}
.container{
padding: 15px;
display: flex;
height: 600px;
flex-direction: column;
align-items: center;
}
.icon{background: url('https://3ayj-oss.oss-cn-shenzhen.aliyuncs.com/pic/sprite_fm.png') 0 0 no-repeat;
background-size: 985px 650px;
width: 40px;
height: 40px;
margin: 15px;
border-radius: 50%;
background-position: -729px -215px;
}
.icon img{
display: inline-block;
height: 40px;
width: 40px;
border-radius: 20px;
}
.msg{
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}
#tips{margin-bottom: 15px;}
#cost{
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
#toOrder{
width: 100%;
line-height: 50px;
background-color: #00d660;
color: #fff;
border-radius: 7px;
}
#toOrder span{
display: inline-block;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
<div class="msg">
<span style="color: #00d660;"> 领取胜利 </span>
</div>
<div id="tips"></div>
<div id="cost"></div>
<div id="toOrder">
<span> 查看领取详情 </span>
</div>
</div>
<script>
// 初始化 console 调试商家小票最好关上这个，能够看到接口拜访工夫
var vConsole = new VConsole();
// 获取返回页面参数
function getQueryString(name) {var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");
if (pair[0] == name) {return pair[1];
}
}
return null;
}
// 获取参数
// "特约商户号（sub_mch_id）"、"商户订单号（out_trade_no）"
// ?sub_mch_id=123456G&che7&out_trade_no=ABCDEFck_code=39f0876dd58e4eb61b66250f69d02705
var sub_mch_id = getQueryString("sub_mch_id"); // 特约商户号
// console.log("sub_mch_id is" + sub_mch_id)
var out_trade_no = getQueryString("out_trade_no"); // 商户订单号
// console.log("out_trade_no is" + out_trade_no)
var check_code = getQueryString("check_code"); //md5 校验码 如果服务商是通过银行注册的，须要银行提供接口进行订单验证，该验证码须要依据银行那边进行非凡解决
// console.log("check_code is" + check_code)
$.ajax({
type: "POST",
url: 自家后端人员提供的相应接口,
data: {
subMchId: sub_mch_id,
outTradeNo: out_trade_no,
checkCode: check_code
},
dataType: "json",
success: function (res) {console.log('申请胜利',res)
if (res.code == 200) {
var detailLink = res.data.url; // 点击按钮跳转回本人我的项目页面
$("#cost").html("￥" + res.data.amount.toFixed(2))
$("#tips").html(res.data.schoolName)
console.log('学校',res.data.schoolName);
var initData = {
action: 'onIframeReady',
displayStyle: 'SHOW_CUSTOM_PAGE',
}
var initPostData = JSON.stringify(initData)
parent.postMessage(initPostData, "https://payapp.weixin.qq.com")
// 注册点击事件 (去详情)
document.querySelector('#toOrder').onclick = function () {
var mchData = {
action: 'jumpOut',
jumpOutUrl: detailLink // 跳转的页面
}
console.log('调用胜利',mchData);
var postData = JSON.stringify(mchData)
parent.postMessage(postData, "https://payapp.weixin.qq.com")
}
}
},
error: function(err){console.log('申请出错',err)
}
});
</script>
</body>
</html>
最初，我领取胜利点击实现呈现的页面是这样的：
正文完