一个二维码扫描自动识别下载应用【微信提示】

先前写了一个关于二维码扫描自动识别设备系统，并自动去下载相应版本的APP，前一段时间微信扫描后，则不可再下载，原因是微信屏蔽了，只能提示用户从浏览器打开，并自动下载；

下载的界面效果：

下载的 download.html 代码段：

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><link rel="stylesheet" href="./css/download.css"><title>下载APP</title></head>
<body class="success"><div id="weixin-tip"><p><img src="./download_files/live_weixin.png" alt="微信打开"><span id="close" title="关闭" class="close">X</span></p></div><script type="text/javascript">var is_weixin = (function() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}})();function showFilter(){if(is_weixin) {var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;var tip = document.getElementById('weixin-tip');tip.style.height = winHeight + 'px';tip.style.display = 'block';}}function delayURL(url, time) {setTimeout("top.location.href='" + url + "'", time);}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, //是否iPadsymbian: u.indexOf('Symbian') > -1, //是否SymbianwebApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部};}()}var isMobile = browser.versions.ios || browser.versions.android || browser.versions.symbian;var cWidth = document.body.clientWidth;var sWidth = window.screen.width;var tWidth = (document.body.clientWidth + window.screen.width)/2;var fontSize = isMobile?parseInt(tWidth/9):parseInt(tWidth/30);var imgWidth = isMobile?parseInt(tWidth/1.5):parseInt(tWidth/4.5);var imgHeight = parseInt(imgWidth*(16/49));var imgWidth2 = isMobile?parseInt(tWidth/4):parseInt(tWidth/12);var imgHeight2 = parseInt(imgWidth2*(54/124));var cot ="";var dev ="<center>";
//  var cot = "<center><div style='border:0px solid red;padding-top:20px;'>";
//  cot += "<div style='padding-top:10px;padding-bottom:10px;'></div>";
//  cot += "<div style='font-size:"+fontSize+"px;padding-top:10px;padding-bottom:20px;'>";if(browser.versions.iPad || browser.versions.iPhone){
//      cot += "<div><a href='#' id='actionTo'>苹果用户下载</a></div>";
//      cot += "<div style='padding-top:5px;'><a href='#'>越狱苹果下载</a></div>";cot +="<a href=/test_app.ipa' id='ios_weixin'><img src='./download_files/ios-btn.png' alt='苹果版下载'></a>";showFilter();dev ="I"}else if(browser.versions.android){
//      cot += "<div style='padding-top:5px;'><a href='#' id='actionTo'>安卓用户下载</a></div>";cot +="<a href='/test_app.apk' class='android-btn' id='J_weixin'><img src='./download_files/android-btn.png' alt='安卓版下载'></a>";showFilter();dev ="A"}else if(browser.versions.symbian){dev ="S";
//      cot += "<div style='padding-top:5px;'><a href='/test_app.sis' id='actionTo'>塞班用户下载</a></div>";
//      delayURL("http://www.baidu.com", 1000);
//  }else if(isMobile){
//      cot += "<div style='padding-top:5px;'>目前没有适合您手机的软件</div>";
//      delayURL("http://www.126.com", 1000);}else{
//      cot += "<div style='padding-top:5px;'><a href='/test_app.ipa'>苹果用户下载</a></div>";
//      cot += "<div style='padding-top:5px;'><a href='/test_app.apk'>安卓用户下载</a></div>";
//      cot += "<div style='padding-top:5px;'><a href='/test_app.sis'>塞班用户下载</a></div>";cot +="<a href='/test_app.ipa' id='ios_weixin'><img src='./download_files/ios-btn.png' alt='苹果版下载'></a>" +"<a href='#' class='android-btn' id='J_weixin'><img src='./download_files/android-btn.png' alt='安卓版下载'></a>";}//cot += "<div style='padding-top:5px;'>"+navigator.userAgent+"</div>";
//  cot += "<div style='padding-top:20px;padding-bottom:0px;text-align:right;padding-right:5px'></div>"
//  cot += "</div></div></center>";cot += "</center>"</script><div class="page-wrap"><div class="download"><h3 class="entry-hd">立即下载APP</h3><!--<p class="entry-con">即可免费领取大礼包</p>--><div class="download-btn" id="=dl"><!--<a href=/test_app.ipa" id="ios_weixin"><img src="./download_files/ios-btn.png" alt="苹果版下载"></a>--><!--<a href="/test_app.apk" class="android-btn" id="J_weixin"><img src="./download_files/android-btn.png" alt="安卓版下载"></a>--><script type="text/javascript">document.write(cot);window.onload = function(){var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;var tip = document.getElementById('weixin-tip');var close = document.getElementById('close');close.onclick = function(){tip.style.display = 'none';}if(dev=="A"){var btn = document.getElementById('J_weixin');if(is_weixin) {btn.onclick = function(){tip.style.height = winHeight + 'px';tip.style.display = 'block';return false;}}else{if (/msie/i.test(navigator.userAgent)){ //ie browerdocument.getElementById("J_weixin").click();}else{var e = document.createEvent('MouseEvent');e.initEvent('click', false, false);setTimeout(document.getElementById("J_weixin").dispatchEvent(e),2000);}}}else if( dev == "I"){var btn_ios = document.getElementById('ios_weixin');if(is_weixin){btn_ios.onclick = function(){tip.style.height = winHeight + 'px';tip.style.display = 'block';return false;}}else{if (/msie/i.test(navigator.userAgent)){ //ie browerdocument.getElementById("ios_weixin").click();}else{var e = document.createEvent('MouseEvent');e.initEvent('click', false, false);setTimeout(document.getElementById("ios_weixin").dispatchEvent(e),2000);}}}}</script></div></div><!--<div class="app">--><!--<img src="./download_files/app.jpg" alt="应用预览">--><!--</div>--></div></body></html>

样式download.css 代码段：

@charset "utf-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
html,body{width:100%}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;background:#fff;font-size:14px;color:#333;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img,a img,img:focus{border:0;outline:0}
img{max-width:100%;height: auto;}
textarea,input,a,textarea:focus,input:focus,a:focus{outline:none}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin-bottom:15px;line-height:1.4}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit;color:#444444}
body{font-size: 62.5%; font-family: 'Microsoft Yahei','\5FAE\8F6F\96C5\9ED1',Arial,'Hiragino Sans GB','\5B8B\4F53'; line-height: 1.6}
li{list-style: none;}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}
.register{background: #62BDC5 url(../img/bg-480.jpg) no-repeat; background-size:cover;}
.logo{height: 17.8%; text-align: center;}
.logo img{display: inline-block; vertical-align: top; font-size: 0; width: 42.5%; margin: 0 auto;}
.device{padding: 15.8% 0 2.18%; text-align: center;}
.device img{width: 53.43%; margin: 0 auto;}
.intro{color: #fff; line-height: 2; padding-bottom: 12.18%; text-align: center; font-size: 2em; text-align: center;}
.intro p{font-size: 1.8em; border-bottom: 1px solid #fff; width: 80%; margin: 0 auto; display: inline-block; letter-spacing: .8em; white-space: nowrap; padding-left: .4em;}
.intro h2{font-size: 2.6em; letter-spacing: .1em; font-weight: bold;}
.intro img{width: 81%; margin: 0 auto;}
.send{padding: 0 6.1% 23%;}
.send-form input{float: left; padding: 15px 10px; width: 65.7%; background:#fff; border: 1px solid #fff; border-radius: 4px; font-size: 2em; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.send-form button{float: right; padding: 15px 10px; white-space: nowrap; width: 31.7%;  background:#FF6F29; border: 1px solid #FF6F29; border-radius: 4px; font-size: 2em; color: #fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
/*.send-form .form-text{ float: left; background: #fff; border:0; border-radius: 4px; font-size: 2.4em;border-top: 10px; border-bottom: 10px;  padding: 10px 3.5%; line-height: 2.5em !important;  width: 59.5%; vertical-align: middle;}
.send-form .form-submit{ float: right; min-width: 66px; background: #FF6F29; -webkit-appearance: none; white-space: nowrap; letter-spacing: -1px; color: #fff; font-size: 2.4em; padding: 2.4% 2%; line-height: 2.5em; border: 0; border-radius: 4px; width: 31.5%;}
*/.wran{color: #f00; padding-top: 8px; font-size: 1.4em; visibility: hidden;}.entry-con{font-size: 2.4em; text-align: center;}
.entry-hd{font-size: 4em; font-weight: bold; text-align: center;}
.download{color: #4D4D4D; padding: 7.2% 6.8% 9.3%;}
.download .entry-con{color: #8E8F90;}
.download-btn{padding-top: 9%;}
.download-btn a{width: 44.7%; display: inline-block; *display: inline; *zoom: 1; vertical-align: top;}
.download-btn a:hover, .download-btn a:focus{opacity: .8;}
.download-btn .android-btn{padding-left: 9%;}
.footer-bg{background: #2D2D2D; color: #E4E4E4; padding: 3.4% 2%; text-align: center; margin-bottom: 2%;}
.footer-bg .entry-con{font-size: 1.6em;}
.app img{width: 85.15%; margin: 0 auto; display: block; margin-bottom: 3.4%;}
.app .entry-con{padding-bottom: 5.4%; color: #6B6B6B;}
#weixin-tip{display:none; position: fixed; left:0; top:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); width: 100%; height:100%; z-index: 100;}
#weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%; position: relative;}
#weixin-tip .close{color: #fff;padding: 5px;font: bold 20px/20px simsun;text-shadow: 0 1px 0 #ddd;position: absolute;top: 0; left: 5%;
}
@media screen and (min-width: 481px){.register{background-image: url(../img/bg.jpg);}.info{background-image: url(../img/success-bg.jpg);}
}
@media screen and (max-width: 480px){.intro{font-size: 1.6em;}.intro p{margin: 0 8% 0;}.send-form .form-text{font-size: 1.8em;}.send-form .form-submit{font-size: 1.8em;}.entry-hd{font-size:2.8em;}.info .entry-hd{font-size: 4em;}.info .long-hd{font-size: 3em;}.entry-con, .info-list{font-size: 1.8em;}.app .entry-con{font-size: 1.6em;}.footer-bg .entry-con{font-size: 1.2em;}
}
@media screen and (max-width:360px){.register{background-image: url(../img/bg-360.jpg);}.intro{font-size: 1.2em;}.intro p{letter-spacing: 1em;}.send-form .form-text{font-size: 1.4em; padding:10px 5px;}.send-form .form-submit{font-size: 1.4em; padding: 10px 5px;}.entry-hd{font-size: 2em;}.info .entry-hd{font-size: 3em;}.info .long-hd{font-size: 2.2em;}.entry-con, .info-list{font-size: 1.4em;}.app .entry-con{font-size: 1.4em;}}

要用到的几个图片以及上面的整个完整代码，请从资源http://download.csdn.net/detail/saindy5828/8698555下载

一个二维码扫描自动识别下载应用【微信提示】相关推荐

一个二维码扫描自动识别下载应用
由一个二维码,或进入同一个页面自动识别手机或电脑系统以及浏览器,根据不同的应用自动识别下载: 例如二维码信息或下载页的连接地下为www.xxx.com/download.html,那么此downloa ...
一码多用:扫描一个二维码自动跳转支付宝/微信小程序、安卓/iosAPP
随着支付宝,微信小程序的慢慢崛起,现在很多公司同一款程序都开发了四个版本.支付宝/微信小程序.安卓/iosAPP.但是随着程序的增加,引导用户使用就成了问题.比如,一家店门口如何贴一张二维码.实现用户 ...
一个二维码如何自动识别是安卓（Android）还是苹果(IOS)
思考问题: 通常,我们开发一个APP,有Android版本.IOS版本. 但是只有一个二维码?怎么办呢? 怎么让IOS用户扫描二维码下载IOS版本,Android用户扫描二维码下载到Android版本 ...
使用安卓实现一个二维码扫描功能（基于Android Studio）
二维码扫描使用很广泛,在这里记录二维码扫描的功能,需要导入第三方的类库. 步骤一:在项目中导入第三方的类库,导入方法:往Android Studio中导入第三方类库文件这篇博客中有详细记录步骤二:定 ...
微信二维码扫描下载APK
前几天给客户制作的app需要上线,生成二维码扫描进行下载,把生成好的apk挂在服务器端,将地址复制下来,通过草料二维码(http://cli.im/)生成一个二维码也许你会看到有个app的选项,为什 ...
二维码扫描器 android二维码扫描　二维码识别软件
这两天,在弄一个二维码扫描的东西. 二维码为移动设备购物提供了方便.在电商行业也有一些商家开始正式商业应用,我所知道的 1号店就在使用这种东西. 一个二维码对应一个产品. 二维码可以使用Google提 ...
Android二维码扫描
本文详细说明怎么在Android端实现二维码扫描,只是讲述如何利用Google zxing进行二维码扫描,不涉及代码的深入研究,结果文章最后附有demo,demo可直接使用,觉得文章累赘可以直接拷de ...
Android 应用之二维码扫描登录
下面介绍二维码扫描登录原理, 首先需要web服务端,和app客户端. web服务端主要工作是生成二维码,检测客户端提交信息正确性,更新网页界面. app客户端主要工作是扫描二维码,提交账户信息(此不是 ...
【Android】移动端二维码扫描解决方案衍变
移动端二维码扫描解决方案衍变目录踩坑&方案方案选择 Zxing方向 Hms ScanKit方向总结目录踩坑&方案 Zxing yyds? no,no,no -> Sc ...

一个二维码扫描自动识别下载应用【微信提示】

一个二维码扫描自动识别下载应用【微信提示】相关推荐

最新文章

热门文章