场景:用指定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做其他的处理