<!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，沒了，這就能用了。如果有好的建議請留言。如果想實現打開鏈接直接跳轉到瀏覽器進行下載，請留言告知，我也想了解一下，哈哈。