微信点击链接直接跳转手机默认浏览器下载APP的APK文件实现code

迷南。 2022-12-16 06:26 187阅读 0赞

**需求：由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，需要做一个提示用户在浏览器中打开下载。**

以下代码，拿来即用，好人代表O(∩\_∩)O

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>download</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 { 
            width: 200px;
            color: #fff;
            background-color: #0c6;
            border-color: #0c6;
            font-weight: 400;
            padding: 10px 20px;
            font-size: 40px;
            border-radius: 10px;
            text-decoration: none;
          }
    
          .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 =
                "链接地址";
            }
          }
    
          function wxTipClick() { 
            document.getElementById("weixinTip").style.display = "none";
          }
        </script>
      </head>
      <body>
        <div class="vx-body">
          <img src="./logo.png" style="height: 280px;" /><br />
          <div class="vx-font">download APP</div>
          <div style="margin-top: 85px;width: 100%;text-align: center;">
            <a href="#" class="vx-button" onclick="downloadAPP()">点击下载</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>