## 简要说明
微信公众号微信支付完成后页面跳转 即 点金计划 商家小票的开发
## 内容
#### 1.什么是点金计划和点金计划接入前准备
注：配置商家小票链接不能带参数
什么是点金计划：点金计划是微信支付官方提供的支付后回调能力的升级计划。
点金计划接入前准备：
https://pay.weixin.qq.com/wiki/doc/apiv3_partner/open/pay/chapter3_5_2.shtml
PDF开发文档：
https://wx.gtimg.com/pay/download/goldplan/goldplan_product_description_v2.pdf
#### 2.问题描述
最近在使用uniapp 开发微信公众号页面，有支付订单功能，在完成支付后，发现支付后的success，一直无法响应，原因是微信支付完成后的回调能力被回收，已强制性的由点金计划的功能来替代（广告创收）。
#### 3.问题代码
```
wx_pay: function(msg,data) {
var that = this
WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": data.appId, //公众号名称，由商户传入
"timeStamp": data.timeStamp, //时间戳
"nonceStr": data.nonceStr, //随机串
"package": data.package, //扩展包
"signType": data.signType, //微信签名方式:MD5
"paySign": data.paySign //微信签名
}, function(respay) {
if (respay.err_msg === "get_brand_wcpay_request:ok") {
// 就是这里，无法操作跳转。
//微信之前（公众号支付/H5网页支付）支付成功，点击完成可直接跳转指定页面。
// 后已修改。如果没有开通点金计划的服务商，支付后就会直接关闭商家页面。
// 开通点金计划可直接在服务商功能的点金计划查看
} else if (respay.err_msg === "get_brand_wcpay_request:cancel") {
that.msg("取消支付") //用户取消支付的时候这里会执行
} else if (respay.err_msg === "get_brand_wcpay_request:fail") {
}
}, function(err) {
});
}
```
#### 4.uniapp开发小票
UNIAPP开发有坑需要注意几个坑：
第一个坑：支付成功之后跳转到小票页面安卓手机没有问题，但是IOS的小票页面显示空白并且会闪一下，网上说的方法都试过了整不好于是只能使用原生H5开发了。
第二个坑：这个点金计划商家小票页面必须在page.json配置中的第一个，由于第一个是启动页只能在页面里面做判断，思路根据数据缓存添加一个值进行判断（例如用户进入系统判断这个值是否存在，存在的话让他跳转跳转小票页面，在onLoad里面做判断即可）
```
<template>
<view style="display: grid;">
<view>
<view style="">
<u-icon name="checkbox-mark" color="#2979ff" size="50"></u-icon>
</view>
<view>
您的订单支付完成
</view>
</view>
<u-button type="primary" size='medium' shape="circle" @click='toOrder()' :plain="true">返回订单列表</u-button>
</view>
</template>
<script>
export default {
data() {
return {
sub_mch_id: '',
out_trade_no: '',
// orderInfo: {},
}
},
onLoad(option) { //option里面的参数微信返回这里自动接收
this.sub_mch_id = option.sub_mch_id; //特约商户号
this.out_trade_no = option.out_trade_no; //商户订单号
},
onReady() {
const customPageHeight = document.body.scrollHeight; // 单位 px
let mchData = {
action: 'onIframeReady',
displayStyle: 'SHOW_CUSTOM_PAGE',
height: customPageHeight
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, 'https://payapp.weixin.qq.com');
},
methods: {
toOrder: function() {
var code = this.code
var mchData = {
action: 'jumpOut',
jumpOutUrl: 'https://www.text.com/mobile/state=STATE#/pages/house/house_repair' //需要跳转的路径
}
var postData = JSON.stringify(mchData)
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
},
}
}
</script>```
#### 5.H5开发小票
```
<!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" 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;
}
*{
margin: 0;
padding: 0;
}
.order_box {
/* text-align: center; */
}
.b_name {
font-size: 18px;
font-weight: 500;
color: #ffffff;
padding: 10px 0;
width: 100%;
background: #439CFE;
text-align: center;
}
.col_box {
display: flex;
align-items: center;
flex-direction: column;
padding: 10px;
}
.col_box .col_box_img{
width: 50px;
height: 50px;
/*border: 1px solid red;*/
}
.col_box .lab {
font-size: 25px;
margin-top: 20px;
}
.num{
color: #B8B8B8;
font-size: 15px;
width: 75%;
margin: 0 auto;
}
.num_2{
margin-top: 10px;
}
.btns {
width: 80%;
text-align: center;
background-color: #26b983;
margin: 0 auto;
border-radius: 50px;
margin-top: 30px;
}
.btns .btn {
padding: 9px 0;
color: #FFFFFF;
}
</style>
</head>
<body >
<div class="order_box">
<div class="col_box">
<img class="col_box_img" src="https://test.com/static/theme/img/8ad7e63c0d362ef38f9eefa923ec81d.png" >
<div class="lab" style="">支付成功 !</div>
</div>
<div id="" class="num">
<div id="order_amount" class="num_2"></div>
<div id="order_no" class="num_2"></div>
<div id="date" class="num_2"></div>
</div>
<div class="btns">
<div id="backHome" class="btn home" onclick="shouye()">回到首页</div>
</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;
};
var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
var out_trade_no = getQueryString("out_trade_no"); //商户订单号
var check_code = getQueryString("check_code"); //md5 校验码
$(function(){
$.ajax({
url:"/applet/api.preowned/act_session",
data:{out_trade_no: out_trade_no},
dataType:'json',
type:'post',
async:true,
error:function(e){
console.log(e);
},
success:function(res){
console.log(res.data.date)
$("#order_no").html('订单编号：'+res.data.order_no)
$("#date").html('交易时间：'+res.data.create_at)
$("#order_amount").html('订单金额：￥'+res.data.order_amount)
}
})
})
</script>
<script>
//var homeLink = "http://test.com/mobile/#/pages/oneMy/myBuyOrder";//首页（例子）
var homeLink = "https://test.com/test/#/";//首页（例子）
function init(){
//初始化小票
var initData = {
action: 'onIframeReady',
displayStyle: 'SHOW_CUSTOM_PAGE',
height:600
}
var initPostData = JSON.stringify(initData)
parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
console.log("初始化");
}
init();
//注册点击事件(去首页)
function shouye() {
var mchData = {
action: 'jumpOut',
jumpOutUrl: homeLink //跳转的页面
}
var postData = JSON.stringify(mchData)
parent.postMessage(postData, 'https://payapp.weixin.qq.com')
console.log("首页");
}
</script>
</body>
</html>```