微信為啥不能直接下載.apk安裝包


今天遇到一個很蛋疼問題,我們的微信公眾號上想放一個下載自己公司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>

 

 

效果圖如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM