(微信,微信公众号)跳转链接下载(安卓，ios)APP,附带遮罩层

时间：2024-02-20 15:33:04
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>此处填写标题例如：XXAPP下载</title>
    <link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css">
 </head>
<body>
 <div class="example">
     <div class="t-bg"></div>
         此处样式自己掌控
     </div>
    <a id="JdownApp2" class="btn-warn">下载APP</a>
     <div class="wxtip" id="JweixinTip">
         <span class="wxtip-icon"></span>
         <p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
    </div>
 </div>
 <script type="text/javascript">    
     function weixinTip(ele){
         var ua = navigator.userAgent;
         var isWeixin = !!/MicroMessenger/i.test(ua);
         if(isWeixin){
             ele.onclick=function(e){
                 window.event? window.event.returnValue = false : e.preventDefault();
                 document.getElementById(\'JweixinTip\').style.display=\'block\';
             }
             document.getElementById(\'JweixinTip\').onclick=function(){
                 this.style.display=\'none\';
             }
         }
     }
    var btn2 = document.getElementById(\'JdownApp2\');
     var u = navigator.userAgent;
    if (u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1) {//安卓手机
         btn2.href="此处填写你的安卓apk下载地址"
     } else if (u.indexOf(\'iPhone\') > -1) {//苹果手机
        btn2.href="此处填写你的ios下载地址"
     }
     weixinTip(btn2);
 </script>
 <style type="text/css">
     *{margin:0; padding: 0;}
     body{font:normal 14px/1.5 Arial,Microsoft Yahei; color:#333;}
    .example p{margin: 20px 0;}
    a{
        display: inline-block; 
        background: #fff; 
        color:#fff; 
        padding: 0 10px;
        border-radius: 4px;
       text-align: center; 
       margin: 0 5px; 
       line-height: 22px; 
       font-size: 15px; 
        text-decoration: none;
   }
    a.btn-warn{    
        background: #E68F2F;
         position: relative;
        height: 41px;
         width: 90%;
        bottom: -36vh;
        margin: auto;
         display: flex;
       align-items: center;
        justify-content: center;
    }
     a:hover{opacity: 0.8;}
     /*核心css*/
       .wxtip{background: rgba(0,0,0,0.8); 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(http://caibaojian.com/d/uploads/2016/01/weixin-tip.png) no-repeat; display: block; position: absolute; right: 30px; top: 20px;}
        .wxtip-txt{padding-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
     </style>
</body>
</html>

 

微信和微信公众号中配置链接跳转页面实现在微信中下载app，相信大家会有类似的需求。

刚开始我也很疑惑不懂配置应该怎么处理。但是实际才做之后其实很简单。

上面的html的代码是点开之后会有一个页面，点击按钮后会出现遮罩层提示在浏览器打开。然后点击浏览器会在此跳进此页面，然后点击下载按钮，

会根据上面配置的apk下载地址或者ios的下载地址，进行下载。    下面是操作步骤

1，随意创建一个html空白文件，将上面的代码复制进去，根据自己公司的需求样式进行修改。

2，将html文件放入自己的服务器某个路径，能访问即可。

3，如果是微信公众号跳转，需要在微信公众平台中配置自己的菜单，并将你的访问html路径放在菜单跳转链接中即可。如果访问不到，可能你的微信公众号没有配置相关的域名。

4，没了，这就能用了。如果有好的建议请留言。如果想实现打开链接直接跳转到浏览器进行下载，请留言告知，我也想了解一下，哈哈。

 

相关文章