微信点金计划中的商家小票交互

最新推荐文章于 2024-06-16 19:06:38 发布

我不爱编程

最新推荐文章于 2024-06-16 19:06:38 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：小程序微信点金计划

本文链接：https://blog.csdn.net/weixin_39475476/article/details/109673903

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

微信的点金计划其实就是我们嵌入微信的一个页面，被称之为商家小票，以下是我的商家小票的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>支付成功</title>
    <link href="style/paySuccess.css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 平台会对嵌入点金计划页面的商家小票链接（含跳转链接）进行记录，同时会对商家小票页面内容进行安全监测。 -->
    <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> -->
  
</head>

<body>
    <div class="wrapper-scroll">
        <div class="status-failure status-complete">
            <div class="form-cont-item">
                <div class="ele-icon-left"><i class="iconfont ui-business">&#xe616;</i>
                     <span class="form-left-icon-tit" id="payPos" ></span></div>
                <div class="status-box status-success"><i class="iconfont status-wechat">&#xe689;</i>
                     <span  class="payment-money"><em class="amount-yuan">￥</em> <em class="amount-money" id="payMoney"></em></span>
                </div>
            </div>
            <div class="payment-records">
                <!---->
                <ul class="payment-list payment-interface" style="border-bottom: 0px;">
                    <li class="payment-item"><label for="" class="payment-item-tit">支付方式</label> <span
                            class="payment-item-text" id="payWay"></span></li>
                    <li class="payment-item">
                        <label for="" class="payment-item-tit">交易时间</label>
                         <span class="payment-item-text" id="payTime"></span>
                        </li>
                    <li class="payment-item">
                        <label for="" class="payment-item-tit">交易单号</label>
                         <span  class="payment-item-text" id='payOrder'></span>
                    </li>
                    <li class="payment-item">
                        <label for="" class="payment-item-tit">备注</label>
                         <span class="payment-item-text" id="payRemark"></span>
                    </li>
                </ul>
            </div>
            <div class="btns" id="showBtn"  style="display: none;">
                <div id="backHome" class="btn home" onclick='Back()'>返回商户</div>
            </div>
        </div>
    </div>
</body>
<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
 **/
$(function(){
     getData();
});
const _url='https://xxxxxxx/h5pay/completeGolden';
let  _showUrl;

let  _params={
    sub_mch_id:getUrlParam('sub_mch_id'),//特约商户号
    out_trade_no:getUrlParam('out_trade_no'),//商户订单号
    check_code:getUrlParam('check_code'),//md5 校验码
}
function getData(){
    $.ajax({
        method: 'post',
        url: _url,
        data: _params,
        success: function(data) {
            console.log(data);
            let res=data.entity;
            if(!data.isSucc) return;
            $("#payPos").text(res.subject)
            let way=res.payWay;
            let html=way=='122'?'微信付款码支付':way=='121'?'微信扫码支付':way=='701'?"微信公众号支付":'微信小程序支付';
            $("#payWay").text(html)
            $("#payMoney").text(res.totalFee)
            $("#payOrder").text(res.orderNo)
            $("#payTime").text(res.transTime)
            if(res.remark){
                $("#payRemark").text(res.remark)
            }
            if(res.showUrl){
                _showUrl=res.showUrl;
                $("#showBtn").show();
            }
           // 初始化小票
           let initData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
           let postData = JSON.stringify(initData);
            //与ifarem  交互
           parent.postMessage(postData,'https://payapp.weixin.qq.com');
        },
        error: function(err) {
            //console.log(err)
        },
        complete: function(XMLHttpRequest, status) { //请求完成后最终执行参数
            console.log(status);
            
        }
    });
}


/***
 * 跳转至其他页面
 ***/
function Back(){
    let mchData ={action:'jumpOut', jumpOutUrl:_showUrl}
    let postData = JSON.stringify(mchData)
    parent.postMessage(postData,'https://payapp.weixin.qq.com')
}


// 获取地址栏参数
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>
</html>

为什么做原生的呢？因为微信的文档上说得很清楚，如果加载页面超过3s 就会显示微信自己的错误页面，上面也会有加载按钮会再次区加载我们的页面，所以就用了原生的，加载很快，不会有其它的以来啥的。

这是微信的点金计划商家小票开发指引可以查看查看其中的配置啊啥的

最后效果图

我不爱编程

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
微信点金计划中的商家小票交互

微信的点金计划其实就是我们嵌入微信的一个页面，被称之为商家小票，以下是我的商家小票的代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device.
复制链接

扫一扫

专栏目录