(微信,微信公众号)跳转链接下载(安卓，ios)APP,附带遮罩层
<!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，没了，这就能用了。如果有好的建议请留言。如果想实现打开链接直接跳转到浏览器进行下载，请留言告知，我也想了解一下，哈哈。
