掃描二維碼自動識別手機系統（Android/IOS）

時間 2019-11-12

標籤掃描二維自動識別手機系統 android ios 欄目 Android 简体版

原文原文鏈接

移動互聯網發展迅速，各類APP的開發都會推出多個版本（多終端），好比：iPhone版、iPad版、Android版。有些APP還會考慮覆蓋到多個國家（國際化），好比：中文版、英文版、日文版、韓文版等。此外，針對不一樣渠道（流量來源）也會提供不一樣的版本（多渠道），好比：百度版、Google版、阿里版、騰訊版等。javascript

　　對於應用提供方，但願入口只有一個：掃描二維碼直接下載。怎樣讓這張二維碼承載這麼豐富的信息量，讓不一樣終端、不一樣國家、來自不一樣渠道的用戶掃描同一個二維碼能下載到對應的APP客戶端呢？php

　　這裏參照Specs網友撰寫的解決方案，作一個跳轉頁面（能夠是最簡單的HTML靜態頁面），全部邏輯控制都在該頁面進行，好比判斷終端、判斷語言、判斷渠道等，而後經過該頁面URL生成一張二維碼便可！html

1、針對「多終端適配」&「APP國際化」java

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手機APP下載頁面：根據終端辨別下載地址</title>
    <script type="text/javascript">
        // 獲取終端的相關信息
        var Terminal = {
            // 辨別移動終端類型
            platform : function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    // android終端或者uc瀏覽器
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    // 是否爲iPhone或者QQHD瀏覽器
                    iPhone: u.indexOf('iPhone') > -1 ,
                    // 是否iPad
                    iPad: u.indexOf('iPad') > -1
                };
            }(),
            // 辨別移動終端的語言：zh-cn、en-us、ko-kr、ja-jp...
            language : (navigator.browserLanguage || navigator.language).toLowerCase()
        }
 
        // 根據不一樣的終端，跳轉到不一樣的地址
        var theUrl = 'http://www.XXX.com';
        if(Terminal.platform.android){
            theUrl = '你的Android APP對應下載地址：apk文件地址';
        }else if(Terminal.platform.iPhone){
            theUrl = '你的iPhone APP對應下載地址：APP Store地址';
        }else if(Terminal.platform.iPad){
            // 還能夠經過language，區分開多國語言版
            switch(Terminal.language){
                case 'en-us':
                    theUrl = '你的iPad APP（英文版）對應下載地址：APP Store地址';
                    break;
                case 'ko-kr':
                    theUrl = '你的iPad APP（韓語版）對應下載地址：APP Store地址';
                    break;
                case 'ja-jp':
                    theUrl = '你的iPad APP（日文版）對應下載地址：APP Store地址';
                    break;
                default:
                    theUrl = '你的iPad APP（中文版-默認）對應下載地址：APP Store地址';
            }
        }
 
        location.href = theUrl;
    </script>
</head>
<body>
    <!--
 
    -->
</body>
</html>

　假設如上網頁文件對應的URL爲：http://www.XXX.com/app-install/terminal-language.htmlandroid

　　那麼就能夠經過該URL生成一張二維碼，掃描該二維碼後，不一樣終端、語言版本具體的下載地址，由terminal-language.html自動識別並跳轉。web

2、針對「多渠道適配」瀏覽器

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手機APP下載頁面：根據渠道辨別下載地址</title>
    <script type="text/javascript">
 
        // 若是要分渠道，也是能夠的，渠道區分：?from=xx
        var From = (function(){
            var searchInfo = location.search.substr(1).split('&'),item,from;
            for(var i= 0,len=searchInfo.length;len > 1 && i<len;i++){
                item = searchInfo[i].split('=');
                if(item[0] == 'from') {
                    from = item[1];
                    break;
                }
            }
            return from;
        })();
 
        // 根據不一樣渠道，去向不一樣的下載地址
        var theUrl = 'http://www.XXX.com';
        switch(From){
            case 'baidu':
                theUrl = '你的APP：針對 baidu 的定製版';
                break;
            case 'google':
                theUrl = '你的APP：針對 google 的定製版';
                break;
            default:
                theUrl = '你的APP：官方 版';
                break;
        }
        location.href = theUrl;
 
    </script>
</head>
<body>
    <!--
 
    -->
</body>
</html>

　對於上面這種多渠道適配的，會稍微複雜一些，假設上面網頁文件的URL地址爲：http://www.XXX.com/app-install/channel.htmlapp

　　那麼對於不一樣的渠道，就須要生成不一樣的二維碼。網站

　　假設APP官網（推廣頁面）爲：http://www.baidu.com/app，那麼運營PM可能會將該URL後面加上不一樣參數，而後在各大網站進行推廣，好比：google

　　　　在百度貼吧推廣：http://www.XXX.com/app?from=baidu

　　　　在新浪微博推廣：http://www.XXX.com/app?from=sina

　　　　在騰訊微博推廣：http://www.XXX.com/app?from=qq

　　上面的from參數，就是渠道，針對上面的三個渠道，我們就須要用以下三個URL來生成二維碼：

　　　　來源網站爲百度：http://www.XXX.com/app-install/channel.html?from=baidu

　　　　來源網站爲新浪：http://www.XXX.com/app-install/channel.html?from=sina

　　　　來源網站爲騰訊：http://www.XXX.com/app-install/channel.html?from=qq

　　而且須要在APP官網（http://www.XXX.com/app）顯示二維碼的地方，經過from參數加載不一樣渠道的二維碼，這樣，掃描該二維碼後，便會獲得該渠道定製版本的APP。

3、三種結合起來，同時對終端、語言、渠道進行識別：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>手機APP下載頁面：根據終端&渠道辨別下載地址</title>
    <script type="text/javascript">
        // 獲取終端的相關信息
        var Terminal = {
            // 辨別移動終端類型
            platform : function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    // android終端或者uc瀏覽器
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    // 是否爲iPhone或者QQHD瀏覽器
                    iPhone: u.indexOf('iPhone') > -1 ,
                    // 是否iPad
                    iPad: u.indexOf('iPad') > -1
                };
            }(),
            // 辨別移動終端的語言：zh-cn、en-us、ko-kr、ja-jp...
            language : (navigator.browserLanguage || navigator.language).toLowerCase()
        }
 
        // 若是要分渠道，也是能夠的，渠道區分：?from=xx
        var From = (function(){
            var searchInfo = location.search.substr(1).split('&'),item,from;
            for(var i= 0,len=searchInfo.length;len > 1 && i<len;i++){
                item = searchInfo[i].split('=');
                if(item[0] == 'from') {
                    from = item[1];
                    break;
                }
            }
            return from;
        })();
 
        // 根據不一樣的終端，跳轉到不一樣的地址
        var theUrl = 'http://www.XXX.com';
        // android系統APP
        if(Terminal.platform.android){
            // 這裏區分渠道
            switch(From){
                case 'baidu':
                    theUrl = '你的APP：baidu定製版';
                    break;
                case 'google':
                    theUrl = '你的APP：google定製版';
                    break;
                default:
                    theUrl = '你的APP：官方版'
            }
        }
 
        location.href = theUrl;
    </script>
</head>
<body>
    <!--
 
    -->
</body>
</html>