乐趣区

关于前端:微信点金计划

做微信领取的时候因为需要让领取后跳转自家我的项目的页面,发现领取点击实现之后间接退出我的项目返回到了微信公众号页面,上网查了一下,发现曾经不反对这种自定义了,须要加入微信的点金打算, 这样领取胜利之后会跳转到小票页面,分为两种一种商家小票,一种是官网小票,我这里用的是商家小票。拜访这个地址能够查看对于点金打算的文档和配置教程:点金打算。

—> 首先配置商家小票链接:须要先把本人的页面文件上传到服务器,我的是上传了一个 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>

最初,我领取胜利点击实现呈现的页面是这样的:

退出移动版