项目场景：
因项目需求需要对接微信公众号支付，支付完成返回指定页面，根据微信官方发布的公告，现在支付完成以后不能直接跳转指定页面了，需要加入点金计划，跳到小票页面，再通过小票页面返回商家指定的页面
问题描述
加入点金计划支付完成跳转商家小票页面出现了问题；
原因分析：
点金计划商家小票部分不显示，提示“无法获取订单信息”页面可以按以下几个步骤检查：
1、已打开特约商户的商家小票及点金计划开关
2、商家小票页面需调用父页面“onIframeReady事件”的jsapi，具体请查看商家小票开发指引
3、从加载商家小票到调用JSAPI之间的用时不可超过3s
4、调试时，扫描二维码的微信号和支付该笔测试订单的微信号需为同一个
5、商家小票页面可正常访问
6、检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问
7、如果是使用VUE，onIframeReady不能放在created里执行
8、如果上述方法都不行，请先编写一个最简单的demo页面，看看demo页面是否成功
9、商家URL是否有进行重定向，是否重定向到http的链接点金计划商家小票部分不显示，提示“无法获取订单信息”页面可以按以下几个步骤检查：
根据官方的提示检查了也没找到原因，逛微信开发者社区找到了一些新发现
解决方案：
第一个：js代码尽量放在head标签里边；
第二个：
parent.postMessage(postData,'https://payapp.weixin.qq.com')改成
top.postMessage(postData, '*')第三个：先把ajax请求全部注释了，看看能否打开小票页面；
下边代码是一个静态页面，如果出现无法加载订单信息的话，可以先用我这段代码试试看看能不能打开小票页面
<!DOCTYPE html>
<html lang="en">
<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" src="./js/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
</script>
<style>
body {
font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
}
.order_box {
text-align: center;
padding-top: 60px;
}
.order_box .bussiness_avt img {
width: 68px;
height: 68px;
border-radius: 100%;
}
.b_name {
font-size: 14px;
font-weight: 500;
color: #999999;
margin-top:14px;
}
.btns {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
/* 页面底下有两个按钮时，放开这个来进行均匀排版 */
/* justify-content: space-between; */
/* 只有一个按钮就居中处理 */
justify-content: center;
margin-top: 80px;
}
.btns .btn {
width: 147px;
height: 35px;
line-height: 35px;
font-size: 14px;
border-radius: 39px;
border: 1px solid #5a9cf7;
box-sizing: border-box;
color: #CD2314;
}
.btns .btn.detail {
background:#5a9cf7;
color: #fff;
}
</style>
<script>
/***
* @description Dom树执行完后加载 {所有订单必须响应 onIframeReady 事件，否则无法正常进行商家小票的展示。}
* @param action 事件名称：onIframeReady
* @param displayStyle：1.展示商家小票 SHOW_CUSTOM_PAGE 2.展示官方小票 SHOW_OFFICIAL_PAGE
* @param height 范围 600-960px 默认高度 600px；
* 具体看样商家小票 开发指引 https://wx.gtimg.com/pay/download/goldplan/goldplan_developer_guideline.pdf
**/
// 初始化
//var vConsole = new VConsole();
$(function(){
// 初始化小票
let initData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
let postData = JSON.stringify(initData);
//与ifarem 交互
//parent.postMessage(postData,'https://payapp.weixin.qq.com')
top.postMessage(postData, '*')
});
/***
* 跳转至其他页面
***/
function Back(){
const showUrl ='https://www.baidu.com?state=0';
let mchData ={action:'jumpOut', jumpOutUrl:showUrl}
let postData = JSON.stringify(mchData)
//parent.postMessage(postData,'https://payapp.weixin.qq.com')
top.postMessage(postData, '*')
}
// 获取地址栏参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]);
return null; //返回参数值
}
</script>
</head>
<body>
<div class="order_box">
<div class="bussiness_avt">
<img id="b_avt" src="./images/img.png"
alt="">
</div>
<div class="b_status" id="b_status">
支付成功
</div>
<div class="btns">
<div id="toOrder" class="btn detail" onclick="Back()">返回商户</div>
</div>
</div>
</body>
</html>
