zoukankan html css js c++ java

扫描二维码自动识别手机系统（Android/IOS）

　　移动互联网发展迅速，各种APP的开发都会推出多个版本（多终端），比如：iPhone版、iPad版、Android版。有些APP还会考虑覆盖到多个国家（国际化），比如：中文版、英文版、日文版、韩文版等。此外，针对不同渠道（流量来源）也会提供不同的版本（多渠道），比如：百度版、Google版、阿里版、腾讯版等。

　　对于应用提供方，希望入口只有一个：扫描二维码直接下载。怎样让这张二维码承载这么丰富的信息量，让不同终端、不同国家、来自不同渠道的用户扫描同一个二维码能下载到对应的APP客户端呢？

　　这里参照Specs网友撰写的解决方案，做一个跳转页面（可以是最简单的HTML静态页面），所有逻辑控制都在该页面进行，比如判断终端、判断语言、判断渠道等，然后通过该页面URL生成一张二维码即可！

一、针对“多终端适配”&“APP国际化”

<!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.html

　　那么就可以通过该URL生成一张二维码，扫描该二维码后，不同终端、语言版本具体的下载地址，由terminal-language.html自动识别并跳转。

二、针对“多渠道适配”

<!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.html

　　那么对于不同的渠道，就需要生成不同的二维码。

　　假设APP官网（推广页面）为：http://www.baidu.com/app，那么运营PM可能会将该URL后面加上不同参数，然后在各大网站进行推广，比如：

　　　　在百度贴吧推广：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。

三、三种结合起来，同时对终端、语言、渠道进行识别：

<!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>

查看全文

相关阅读:
hadoop中namenode发生故障的处理方法
 开启虚拟机所报的错误：VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the program, access all directories the program uses, and access all directories for temporary fil
Hbase的安装与部署（集群版）
分别用反射、编程接口的方式创建DataFrame
用Mapreduce求共同好友
 SparkSteaming中直连与receiver两种方式的区别
 privot函数使用
 Ajax无刷新显示
 使用ScriptManager服务器控件前后台数据交互
 数据库知识

原文地址：https://www.cnblogs.com/dudumao/p/4201287.html