2. 程式人生 > >一個二維碼掃描自動識別下載應用【微信提示】

一個二維碼掃描自動識別下載應用【微信提示】

阿新 • • 發佈：2019-01-20

先前寫了一個關於二維碼掃描自動識別裝置系統，並自動去下載相應版本的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, //是否iPad
				symbian: u.indexOf('Symbian') > -1, //是否Symbian
				webApp: 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 brower
								document.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 brower
								document.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;}

}


相關推薦

一個二維碼掃描自動識別下載應用【微信提示】

先前寫了一個關於二維碼掃描自動識別裝置系統，並自動去下載相應版本的APP， 前一段時間微信掃描後，則不可再下載，原因是微信遮蔽了，只能提示使用者從瀏覽器開啟，並自動下載； 下載的介面效果： 下載的 download.html 程式碼段： <!DOCTYP

用一個二維碼做下載地址，自動區分是 ios 還是 android

javascrip PV app 終端 color cat 一個 agent https 用一個二維碼做下載地址，自動區分是 ios 還是 android, 甚至區分 iphone 和 ipad。 <html> <head>

1分鐘快速實現高效的掃描二維碼，急速識別手機相簿二維碼

最近由於專案需求，需要在二維碼掃描時新增識別相簿內二維碼的功能，於是，遇到了許多問題在這裡總結，好為以後不在採坑。 1、二維碼識別速度慢，效率低 2、手機相簿內的二維碼識別速度慢，識別不出來 好了，主要問題就是這些。 下面直接上程式碼， 使用常規方法在掃描手機相簿二

nodejs之二維碼掃描-實現兌換碼自動核銷

nodejs二維碼掃描—實現兌換碼自動核銷 背景 實現概述 開發環境 相關依賴 微信網頁授權 第一步：使用者同意授權，獲取code 第二步：通過code換取網頁授權access_token 第三步：拉取使用者資

智慧門禁+二維碼掃描模組方案，自動感應掃碼開門更智慧

一、方案概述： 智慧門禁+二維碼掃描模組方案，是以廣泛普及的手機為載體的二維碼門禁應用去代替實體門禁卡，通過硬解碼掃描頭和系統相結合，來拓展智慧門禁自動感應讀取顯示在手機上的門禁APP二維碼（動態碼），以達到自動感應掃碼開門的功能。從科技潮流來看，硬解二維碼模組滿足了智慧門禁、通道閘機掃描二維碼開門的需求，

遠景達二維碼掃描模組好用嗎？如何選擇一款好的二維碼識別裝置？

深圳遠景達（RAKINDA）的自主品牌LV二維碼掃描模組主要是提供給個人、公司在研發和升級O2O智慧裝置場景時給予螢幕支付碼（顯示介質）和紙張（印製介質）條碼的讀取，顧名思義它也是二維碼識別裝置的一種，將其嵌入整合到裝置內部時我們只需通過二次開發包和開發板就能實現一系列很多意想不到的自助功能啦。遠景達二維碼掃

實現手機掃描二維碼頁面登入，類似web微信-第二篇，關於二維碼的自動生成

接上一章，我們已經基本把業務邏輯分析清楚了 下面我們第一步，實現二維碼的web動態生成。 頁面的二維碼包含的資訊我在上一篇已經解釋過，是一個頁面的sessionID，這個sessionID主要是標示出哪個頁面是哪個頁面，例如你開啟N個頁面，必然每個頁面的標示會不一樣，只有你

QRCode 掃描二維碼、掃描條形碼、相簿獲取圖片後識別、生成帶 Logo 二維碼、支援微博微信 QQ 二維碼掃描樣式

目錄功能介紹根據之前公司的產品需求，參考 barcodescanner 改的，希望能幫助到有生成二維碼、掃描二維碼、識別圖片二維碼等需求的猿友。修改幅度較大，也就沒準備針對 barcodescanner 庫提交PR。 ZXing 生成可自定義顏色、帶 logo 的二維碼 ZX

iOS二維碼掃描/識別

一直以為二維碼功能比較簡單,  從來沒有放在心上過,  由於公司專案需要這個功能,  也算是第一次真正去做二維碼的東西.  從網上看別人的部落格很多都是寫的比較碎片, 沒有一個能做的比較完整的,  今天我的這個模組做完, 索性總結一下吧, 希望更多的人少走彎路 網上很多二維

Android語音識別技術、訊息推送機制、二維碼掃描技術、NDK、JNI

一、常用資料結構：陣列，堆，棧，佇列，連結串列，樹，圖，散列表 陣列：把具有相同型別的若干變數按有序的形式組織起來。 堆：是一個特殊的樹形資料結構，每個結點都有一個值。一般說的堆是指二叉堆。他的最大特點就是根節點的值最小或最大，並且根節點的兩個子樹也是一個堆。 棧：只能在某

Android實現二維碼掃描功能（二）-ZXing個性化與近距離識別優化

簡介 本篇我們對掃碼介面進行優化，並對ZXing近距離無法識別的問題做出優化。 個性化定製 每個APP都有自己的表現形式，實現個性化掃碼介面定製，主要有兩個地方： activity_scanner.xml介面檔案 com.google.zxin

XQRCode 一個非常方便實用的二維碼掃描、解析、生成庫

XQRCode 一個非常方便實用的二維碼掃描、解析、生成庫 關於我 特點 支援快速整合條形碼、二維碼掃描功能。 支援自定義掃描介面。 支援生成帶圖示的二維碼。 支援生成帶背景圖片的複雜二維碼。 支援二維碼解析功能 1、

Swift3.0二維碼掃描實現(寫一個仿支付寶二維碼掃描的效果)

關鍵程式碼 import AVFoundation //獲取攝像裝置 let device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) do { //建立輸入,輸出流

一個二維碼掃碼下載兩種平臺app

<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type"

一個二維碼實現同時支援AppStore下載地址 、安卓端下載地址

1.有時我們需要把 AppStore下載地址 、安卓端下載地址 同時支援兩個作業系統的手機掃描，分別跳向不同的地址 思路是，讓二維碼的地址指向html頁，然後在html頁面裡面進行判斷。 下面是html頁面 <!DOCTYPE html> <html

安卓蘋果不同下載連結怎麼做成一個二維碼

通常，我們開發一個app，有Android版本，有ios版本，但是，我們有時候只有一個二維碼可以放置，比如，通過社會化分享，分享到微信一張圖片，通過微信識別二維碼來下載我們的app,此時，只有一個二維碼， 那麼怎樣，讓ios系統使用者掃描二維碼下載的事ios版本，Androi

iOS使用ZBar實現二維碼掃描以及實現識別相簿中二維碼圖片功能

使用zbar呼叫相機掃碼程式碼： //開啟相機 - (void) init_camera { self.navigationController.navigationBarHidden=YES;     [commonaddNavigationAddToView:

微信公眾號掃描帶參數二維碼實現自動分組？

取消 bec 登錄 1.5 oss 自動生成 分享圖片 分析 管理 最近很多人都在問微信公眾號掃描帶參數二維碼實現自動分組，通過微號幫平臺操作實現，這個功能不止如此，微信二維碼來源統計分析、微信帶參數二維碼統計分析、微信渠道二維碼統計分析、自動生成微信二維碼統計分析、微信海

微信公眾號掃描帶引數二維碼實現自動分組？

最近很多人都在問微信公眾號掃描帶引數二維碼實現自動分組，通過微號幫平臺操作實現，這個功能不止如此，微信二維碼來源統計分析、微信帶引

如何使用MaxJump工具生成的二維碼實現自動跳轉和下載功能

.cn 效果 目標 體驗 簡便 一鍵生成 引導頁 生成 color 前言 在使用微信打開別人分享的鏈接或二維碼時經常不能直接直接跳轉到目標頁面也不能直接下載，而是需要點擊右上方豎著的"三點"圖標，在彈出的菜單中選擇瀏覽器打開，如圖所示： 在引導用戶打開鏈接或