場景：用指定app掃碼，則識別碼中信息，用別的app或者瀏覽器掃碼，則先跳轉到下載app的界面
需求：一個二維碼，實現功能
1、如果沒安裝指定app，掃描二維碼後，跳轉至app下載頁面
|—1.1、如果用微信掃描，提示在瀏覽器中打開
|—1.2、非微信中打開
|——1.2.1、安卓手機，直接跳轉到apk下載地址，自動下載app
|——1.2.2、蘋果手機，跳轉到appstore下載地址
2、如果用指定app掃碼，則顯示該二維碼所對應物品的詳細信息
示範：http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4
原理：url+物品識別碼 拼接成新字符串，以新字符串生成二維碼，掃描此二維碼。
如果不用指定app掃描（比如微信等）則選擇url字符段跳轉；
如果用指定app掃描，將新字符串的後21位（即：?data= 後面的21位字符串）截取後，傳給後臺做識別（或者將整個新字符串都傳給後臺，讓後臺自己截取後21位字符來識別）。
網站根目錄結構如下：
qr_identify.html （在網站根目錄下）代碼如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>APP 下載跳轉頁面</title>
<script src="res/js/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
/**
* 應用場景：多碼合一，下載二維碼及物品識別碼合成一個多功能二維碼，
* 二維碼內字符串 示範：http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4
* 用上述形式的字符串生成二維碼
* 如果用微信，支付寶等掃描軟件掃描，跳轉到下載該app的地址
* 如果用自己開發的app掃描二維碼，則把整個字符串提交到php後臺
* 後臺識別出其中的物品識別碼，即 data= 後面的字符串 1504252956900FXKL4IC4
* author: 武當山道士
*/
// 獲取終端的相關信息
var Terminal = {
// 辨別移動終端類型
platform : function(){
var u = window.navigator.userAgent;
return {
//微信內置瀏覽器
weixin: u.toLowerCase().match(/MicroMessenger/i) == "micromessenger",
// android終端或者uc瀏覽器
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
// 是否爲iPhone或者QQHD瀏覽器
iPhone: u.indexOf('iPhone') > -1 ,
// 是否iPad
iPad: u.indexOf('iPad') > -1,
//Windows Phone
winPhone: u.indexOf('Windows Phone') > -1,
};
}(),
// 辨別移動終端的語言：zh-cn、en-us、ko-kr、ja-jp...
language : (navigator.browserLanguage || navigator.language).toLowerCase()
}
//url默認設置爲官網首頁
var theUrl = 'http://www.test.com';
// 根據不同的終端，跳轉到不同的地址
var t = Terminal.platform;
if(t.weixin){//微信內置瀏覽器
var winHeight = $(window).height();
$(".weixin-tutor").css("height", winHeight);
$(".weixin-tutor").show();
return ;
}else if(t.android){//安卓版下載地址
theUrl = 'http://www.test.com/appinstall/cyts.apk';
}else if(t.iPhone||t.iPad){//appstore下載地址，這裏沒有上線，就放了一個等待頁面
theUrl = 'http://www.test.com/appinstall/ios.html';
}else if(t.winPhone){//windows phone版下載地址
theUrl = 'http://www.test.com/appinstall/wait.html';
}else{//如果是pc端打開，彈出警告
alert("請用手機瀏覽器訪問。");
}
//跳轉到對應的url
location.href = theUrl;
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
.weixin-tutor {
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=80);
height: 100%;
width: 100%;
z-index: 100;
}
.weixin-tutor p {
text-align: center;
margin-top: 0px;
padding: 0 0 0 5%;
}
img {width:100%;height:auto;}
</style>
</head>
<body>
<div class="weixin-tutor">
<p>
<img src="appinstall/weixin.png" alt="微信打開" />
</p>
</div>
</body>
</html>appinstall/ios.html代碼：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>蘋果版 app 下載地址</title>
<style>
* {
margin: 0;
padding: 0;
}
body{background: url(bg.jpg) no-repeat;}
.container {
display: block;
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=80);
height: 100%;
width: 100%;
z-index: 100;
text-align: center;
}
h1 {font-size:4rem;color:#fff;margin:20rem auto;}
</style>
</head>
<body>
<div class="container">
<h1>ios版即將上線<br />敬請期待...</h1>
</div>
</body>
</html>appinstall/wait.html代碼：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>其他版本 app 等待地址</title>
</head>
<body style="max-width: 800px;">
<div style="width:100%;text-align: center;margin-top: 20px;">
<h1>該版本的APP即將上線，敬請期待...</h1>
</div>
</body>
</html>appinstall/weixin.png(透明背景的圖，有白色的字):
appinstall/bg.jpg: 隨便找張圖當做背景就可以了
總結：以上功能實現了自動跳轉，至於物品唯一碼，就交給後臺處理了，例如：
//獲取二維碼解析出來字符串，並截取其後21位物品識別碼
$str = I('codestr');//$str='http://www.test.com/qr_identify.html?data=1504252956900FXKL4IC4'
$tid = substr($str,-21,21);//$tid='1504252956900FXKL4IC4'
// ...用$tid做其他的處理