今天遇到一個很蛋疼問題，我們的微信公眾號上想放一個下載自己公司app的點擊按鈕，如果是蘋果手機點擊這個按鈕就直接跳轉到蘋果的appstore，如果是android手機的話，就直接跳我們的服務器下載apk鏈接，可是一個很蛋疼的問題出現了，微信 不支持 ，所以，我們就想了一個辦法，點擊這個按鈕，然后讓其在瀏覽器上打開，最后這個問題就ok完美解決了，下面分享一下代碼和截圖：
源碼下載github：https://github.com/TopGuo/weixinpop
在線演示：yipin361.com/zyappd/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>周翼單車app下載</title> <script src="js/bootstrap/js/Jquery.js"></script> </head> <body> <div align="center"> <img src="img/bg.png" style="margin: 0 auto "> <a id="imgId"><img src="img/btn.png"></a> </div> <script language="javascript"> $(function () { $("#imgId").click(function () { download(); }); }); function download() { var cssText = "#weixin-tip{position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;} #weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}"; var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手機 //判斷使用環境 if (is_weixin()) { loadHtml(); loadStyleText(cssText); } else { window.location.href = "http://android.zhouyibike.com/app-release.apk"; } } else if (u.indexOf('iPhone') > -1) { //蘋果手機 window.location.href = "https://itunes.apple.com/cn/app/id1239249767?mt=8"; } else if (u.indexOf('Windows Phone') > -1) { //winphone手機 alert("機型不匹配！"); } } function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } } function loadHtml() { var div = document.createElement('div'); div.id = 'weixin-tip'; div.innerHTML = '<p><img src="live_weixin.png" alt="請在微瀏覽器打開"/></p>'; document.body.appendChild(div); } function loadStyleText(cssText) { var style = document.createElement('style'); style.rel = 'stylesheet'; style.type = 'text/css'; try { style.appendChild(document.createTextNode(cssText)); } catch (e) { style.styleSheet.cssText = cssText; //ie9以下 } var head = document.getElementsByTagName("head")[0]; //head標簽之間加上style樣式 head.appendChild(style); } </script> </body> </html>
效果圖如下：
