下载App页面

目录

说明

下载app页面，在微信中分享，很容易被拦截。这里作了一个处理，当在微信中打开链接，自动跳转到浏览器中打开提示下载。

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>XXX客户端</title>
    <style type="text/css">
      .wxtip {
        background: rgb(104 102 102 / 80%);
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
      }

      .wxtip-icon {
        width: 52px;
        height: 67px;
        background: url(weixin-tip.png) no-repeat;
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
      }

      .wxtip-txt {
        margin-top: 100px;
        color: #fff;
        font-size: 35px;
        line-height: 1.5;
        float: right;
        margin-right: 50px;
        text-align: left;
      }

      .vx-body {
        position: absolute;
        top: 25%;
        text-align: center;
        width: 100%;
      }

      .vx-font {
        font-size: 55px;
        font-weight: bold;
        text-align: center;
        margin-top: 10px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      }

      .vx-button {
        color: #fff;
        background-color: #3498DB;
        border-color: #3498DB;
        font-weight: 400;
        padding: 10px 20px;
        font-size: 40px;
        text-decoration: none;
        width: 90%;
        display: inline-block;
        height: 80px;
        line-height: 80px;
        border-radius: 52px;
      }

      .vx-tips-text {
        background: #e9e8e9;
        width: 80px;
        border-radius: 10px;
        height: 45px;
        color: #000;
        font-weight: bold;
        text-align: center;
        display: inline-block;
      }
    </style>
    <script type="text/javascript">
      function downloadAPP() {
        var ua = navigator.userAgent;
        var isWeixin = !!/MicroMessenger/i.test(ua);
        if (isWeixin) {
          document.getElementById("weixinTip").style.display = "block";
        } else {
          window.location.href = "https://a.b.c/dowanload/4fde027e-948d-44e3-89f0-28114de52f7e.apk";
        }
      }

      function wxTipClick() {
        document.getElementById("weixinTip").style.display = "none";
      }
    </script>
  </head>
  <body>
    <div class="vx-body">
      <img src="../static/logo.jpg" style="height: 280px;" /><br />
      <div class="vx-font">这里写slogan</div>
      <div style="margin-top: 85px;width: 100%;text-align: center;">
        <a href="#" class="vx-button" onclick="downloadAPP()">下载App</a>
      </div>
    </div>
    <div class="wxtip" id="weixinTip" onclick="wxTipClick()">
      <div class="wxtip-txt">
        请点击右上角
        <div class="vx-tips-text">
          ···
        </div>
        按钮选择<br />使用浏览器进行下载
      </div>
    </div>
  </body>
</html>
posted @ 2023-04-20 16:30  Bruce.Chang.Lee  阅读(65)  评论(0)  编辑  收藏  举报