做微信领取的时候因为需要让领取后跳转自家我的项目的页面，发现领取点击实现之后间接退出我的项目返回到了微信公众号页面，上网查了一下，发现曾经不反对这种自定义了，须要加入微信的点金打算,这样领取胜利之后会跳转到小票页面，分为两种一种商家小票，一种是官网小票，我这里用的是商家小票。拜访这个地址能够查看对于点金打算的文档和配置教程：点金打算。
---> 首先配置商家小票链接：须要先把本人的页面文件上传到服务器，我的是上传了一个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>最初，我领取胜利点击实现呈现的页面是这样的：