微信跳轉瀏覽器來下載不同系統的app


  在微信里面,是不能通過應用寶以外的方式去直接下載app的,但是卻可以通過跳轉到瀏覽器去下載app,因此如果剛好各位公司有剛剛上線的app,來不及放到微信應用寶那里,可以試試這種辦法。

  實現思路:

  1.在頁面加載的時候去判斷是否在微信瀏覽器里面,如果是就彈出模態框圖片提示用戶跳去瀏覽器下載

      var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 彈出模態框提示用戶 
                 document.getElementById('download-modal').style.visibility = "visible";
            }

 

  效果圖:

  

  圖片參考:https://github.com/kujian/weixinTip?utm_source=caibaojian.com

  2.判斷是否哪種系統(android,ios)

      // 判斷系統客戶端
            var u = navigator.userAgent; 
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 
            if(isAndroid == true){
                // alert('Android!');
                window.location = 'android.apk';
            }
            else {
                if(isiOS == true){
                    // alert('ios!');
                    window.location = 'https://itunes.apple.com/';
                }else{
                    alert('請在手機端打開');
                }
            }

  

其實都是東拼西湊的代碼...最后附上代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript">
        function down(){
            // 判斷是否微信瀏覽器
            var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 彈出模態框提示用戶 
                 document.getElementById('download-modal').style.visibility = "visible";
            }else{
                // 判斷系統客戶端
                var u = navigator.userAgent; 
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端 
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 
                if(isAndroid == true){
                    // alert('Android!');
                    window.location = 'litme.apk';
                }
                else {
                    if(isiOS == true){
                        // alert('ios!');
                        window.location = 'https://itunes.apple.com/';
                    }else{
                        alert('請在手機端打開');
                    }
                }
            }
            
        }
        function closeModal(){
            var modal = document.getElementById('download-modal');
            modal.style.visibility = "hidden";
        }
    </script>
    <style type="text/css">
        .download-modal{
            visibility: hidden;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            position: absolute;
            text-align: center;
            background-color:rgb(30,30,30); 
            top: 0;
            left: 0;
            z-index: 9999;
        }
        .download-modal-mess{
            
        }
        #jump-to-browser{
            width: 90%;
        }
    </style>
</head>
<body onload="down()">
    <div id="download-modal" class="download-modal" onclick="closeModal()">
        <div class="download-modal-mess">
            <!-- 提示跳轉用戶的圖片 -->
            <img src="./img/live_weixin.png" id="jump-to-browser">
        </div>
    </div>
</body>
</html>

 


免責聲明!

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



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