如何生成一個安卓和蘋果手機都能識別的二維碼

原創

moxiaoran5753

2020-06-29 09:32

問題

開發一款app後，有android和ios兩個版本，如何讓這兩個版本的app生成一個二維碼？即ios的客戶掃碼下載ios版本，android客戶掃碼下載android版本。

解決方案

方案一：放在服務器上

（1）新建一個html文件，通過JavaScript來判斷用戶的手機系統（IOS或Android），判斷之後，根據不同的手機系統，跳轉到不同的鏈接去下載
（2）然後，使用這個html文件的鏈接去生成一個二維碼圖片
（3）最後，拿出手機掃一掃二維碼圖片會跳轉到相應的下載鏈接。

具體步驟

（1）新建名爲down.html文件，代碼如下，並將該文件保存在服務器中。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>二維碼下載</title>

    <script type="text/javascript">
        /*  
         * 智能機瀏覽器版本信息:    
         */
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return { //移動終端瀏覽器版本信息  
                    trident: u.indexOf('Trident') > -1, //IE內核  
                    presto: u.indexOf('Presto') > -1, //opera內核  
                    webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核  
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核  
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否爲移動終端  
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端  
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器  
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否爲iPhone或者QQHD瀏覽器  
                    iPad: u.indexOf('iPad') > -1, //是否iPad  
                    webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部  
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }

        if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
            window.location = "https://apps.apple.com/cn/app/xxxxxxx";  //改地址放入IOS跳轉鏈接
        } else if (browser.versions.android) {　　　　　　　　　　　　　　 //該地址放入Android下載包鏈接
            window.location = "http://ip:port/app/xxxx.apk";
        }

                //    document.writeln("語言版本: " + browser.language +"<br/>");  
             //       document.writeln(" 是否爲移動終端: " + browser.versions.mobile+"<br/>");  
             //      document.writeln(" ios終端: " + browser.versions.ios+"<br/>");  
             //      document.writeln(" android終端: " + browser.versions.android+"<br/>");  
            //       document.writeln(" 是否爲iPhone: " + browser.versions.iPhone+"<br/>");  
            //        document.writeln(" 是否iPad: " + browser.versions.iPad+"<br/>");  
              //      document.writeln(navigator.userAgent);
    </script>
</head>
<body>
</body>
</html>

(2)保存在服務器中的路徑如下：