利用浏览器 UA 信息解决多平台手机应用下载问题

1、问题：

公司合作伙伴提出，希望公司提供一个二维码，实现用户在扫描二维码以后 android 直接下载对应 apk 文件，而 ios 平台能直接跳转至 itunes 软件显示页。

 

2、初步方案：

合作伙伴的要求其实是要求一个下载地址，可以提供多平台手机应用的下载。我们可以在二维码里面放置一个静态页面，而在这个静态页面可以根据用户的 UA 信息，进行不同的操作。

1）获取用户的 UA 信息；

2）判断 用户为 ios 或者 mac 系统时，跳转至软件对应 itunes 页面；

3）其他情况直接下载对应 apk 文件。

代码如下：

<script type="text/javascript">
     var android = 'http://q.kuaipai.cn/quickpai.apk';
     var ios = 'http://itunes.apple.com/cn/app/id519048827?mt=8';
     var ua = navigator.userAgent.toLowerCase();  
     var isandroid=1;
     if (ua.indexOf('iphone') > 0) {
 isandroid = 0;
    }  else  if (ua.indexOf('mac os') > 0) {
 isandroid = 0;
    }           
     if (isandroid == 1) {
 window.location.href= android;
    }  else {
 window.location.href= ios;
    }
</script> 

 

3、升级方案：

初步解决方案只对 UA 进行了初步的判断，整理逻辑也不够正确。如果用户是在 mac 环境中使用 android 手机，或者是结合 windows 系统使用 iphone ，都会出现不符合用户期望结果的发生。

1）获取用户的 UA 信息；

2）判断 用户为 ios 系统时，跳转至软件对应 itunes 页面；

3）判断 用户为 android 系统时，直接下载 apk 文件；

4）其他情况不做跳转，在静态页面上同时显示软件对应 itunes 页面连接和 apk 软件下载地址供用户自己选择。

代码如下：

  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title >北京灵动快拍信息技术有限公司 </ title >
</ head >
< body >
< script  type ="text/javascript" >
     var android_down_url = 'http://q.kuaipai.cn/quickpai.apk';
     var ios_down_url = 'http://itunes.apple.com/cn/app/id519048827?mt=8';

     var ua = navigator.userAgent.toLowerCase();  
     if (ua.indexOf('iphone') > 0) {                         // 需对所有 ios 系统 UA 信息进行判断
        window.location.href = ios_down_url;
    }  else  if (ua.indexOf('android') > 0) {                 // 需对所有 android 系统 UA 信息进行判断
        window.location.href = android_down_url;
    } 
</ script >
< a  href ="http://q.kuaipai.cn/quickpai.apk" >点击下载“快拍二维码” android 版 </ a >
< a  href ="http://itunes.apple.com/cn/app/id519048827?mt=8" >点击下载“快拍二维码” iphone 版 </ a >
</ body >
</ html >

四平台首发：
个人博客 http://xiaogui.org/one-page-down-the-app.html
CSDN博客 http://blog.csdn.net/xgpapa/article/details/8011622
博客园  http://www.cnblogs.com/xgpapa/archive/2012/09/24/2699623.html
ItEye博客  http://xgpapa.iteye.com/blog/1684090

 

转载于:https://www.cnblogs.com/xgpapa/archive/2012/09/24/2699623.html