需求：
扫描同一个二维码，在苹果系统下面，直接跳转到苹果的appstore应用对应的页面，在安卓系统下，直接浏览器下载。
代码如下：
思路是根据useragent判断浏览器的类型，从而判断系统的类型。
下面的代码是http://appurl/生成的代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head lang="en">
<link href="/images/favicon.ico?v=20150706" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta content="email=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script src="http://libs.baidu/jquery/1.9.1/jquery.min.js"></script>
<meta property="og:type" content="webpage" />
<meta property="og:title" content="应用下载" />
<meta name="twitter:description" content="http://appurl/125489" />
<meta property="og:description" content="http://appurl/125489" />
<meta property="og:image" content="http://appurl/images/app_logo.jpg" />
<link rel="stylesheet" type="text/css" href="/images/mob/css.css" />
</head>
<title>应用下载</title>
<body>
<div id="content">
<script type="text/javascript">
/*
* 智能机浏览器版本信息:
*
*/
$(function () {
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(isWeiXin()){
var language = navigator.browserLanguage?navigator.browserLanguage:navigator.language;
//非中文的
if (language.indexOf('zh-') == -1){
$("#en_tips").show();
return;
}
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
var url = 'https://itunes.apple/cn/app/bai-du';
if(url.indexOf("qq") >= 0 ||(url.indexOf("myapp") >=0 && url.indexOf(".apk") < 0 )) {
window.location.href="https://itunes.apple/cn/app/bai-du";
} else {
$("#ios_tips").show();
}
} else {
var url = 'http://www.baidu/baidu.apk';
if((url.indexOf("qq") >= 0 || url.indexOf("myapp")>=0 ) && url.indexOf(".apk") < 0) {
window.location.href="http://www.baidu/baidu.apk";
} else {
$("#android_tips").show();
}
}
} else if(isWeibo()){
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
$("#weibo_tips_ios").show();
} else {
$("#weibo_tips_android").show();
}
} else if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
window.location.href="https://itunes.apple/cn/app/bai-du";
}
else if (browser.versions.android) {
window.location.href="http://www.baidu/baidu.apk";
}
else {
window.location.href="http://www.baidu/baidu.apk";
}
})
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
function isWeibo(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/weibo/i) == "weibo"){
return true;
} else {
return false;
}
}
</script>
<div class="tip_wrap" >
<img id="ios_tips" src="/images/mob/weixin_ios1123.jpg" class="wxtip tip_ios" style="display:none">
<img id="android_tips" src="/images/mob/weixin_android1123.jpg" class="wxtip tip_android" style="display:none">
<div id="weibo_tips_ios" name="weibo_tips_ios" class="weibo_tips_ios" style="display:none;text-align: center;padding-top: 20px;" >
<span style="color: black;font-size: 17px;">请点击右上角,用Safari打开,下载应用</span>
</div>
<div id="weibo_tips_android" class="weibo_tips_android" style="display:none;padding-top: 20px;text-align: center;" >
<span style="color: black;font-size: 17px;">请点击右上角,在浏览器中打开,下载应用</span>
</div>
<div id="en_tips" class="en_tips" style="display:none;padding-top: 20px;text-align: center;" >
<span style="color: black;font-size: 17px;">Please click on the top right in the browser to download</span>
</div>
</div>
<script src="http://res.wx.qq/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
appId: 'wx26336b337827bb57',
timestamp: 1466394228,
nonceStr: 'j0i9Jx4c4OdpjDe5',
signature: '68b3f0f5ee7d713bcbf019d76184b51336143502',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ'
// 所有要调用的 API 都要加到这个列表中
]
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '应用下载',
desc: 'http://appurl/125489',
link: 'http://appurl/125489',
imgUrl: 'http://appurl/images/app_logo.jpg'
});
wx.onMenuShareTimeline({
title: '应用下载',
link: 'http://appurl/125489',
imgUrl: 'http://appurl/images/app_logo.jpg'
});
wx.onMenuShareQQ({
title: '应用下载',
desc: 'http://appurl/125489',
link: 'http://appurl/125489',
imgUrl: 'http://appurl/images/app_logo.jpg'
});
});
</script>
</div>
</body>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu/hm.js?3d3e8edb7bcc47a5be2981b6a877ca99";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</html>
更多推荐
一个二维码,苹果安卓两种下载方案
发布评论