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

小龟爬爬

浏览: 5148 次
性别:
来自: 不详

最近访客更多访客>>

summerwaves

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

手机应用 app 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