H5页面唤醒本地APP的处理方式

1.根据userAgent判断机型及特殊浏览器

			// UA鉴定
			var browser = {
			        isAndroid: function() {
			            return navigator.userAgent.match(/Android/i) ? true : false;
			        },
			        isMobileQQ : function(){
			            var ua = navigator.userAgent;
			            return /(iPad|iPhone|iPod).*? (IPad)?QQ\/([\d\.]+)/.test(ua) || /\bV1_AND_SQI?_([\d\.]+)(.*? QQ\/([\d\.]+))?/.test(ua);
			        },
			        isIOS: function() {
			            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
			        },
			        isWx : function() {
			            return navigator.userAgent.match(/micromessenger/i) ? true : false;
			        },
			        isChrome : function() {
			            return navigator.userAgent.match(/chrome/i) ? true : false;
			        }
			};



2.想做到用一个按钮判断【本地是否已安装APP,已安装则唤醒打开,未安装则跳转到下载页面】是比较难实现的,因为浏览器没有办法实实在在的判断手机是否安装了某个APP,只能靠setTimeout用延时来判断,思路为:点击按钮后开始计时,预想2秒内能打开APP,可以通过 document.hidden 或 document.[webkit|moz|ms]Hidden 来判断页面是否被置入后台(即应用被唤起),2秒以后则跳转到下载页面。但实际上会有很多因素导致定时器不准,而且这个假设的2秒也不够准确。


3.安卓点击按钮跳转

			var jump_url = {
			  open: 'dev://ixiaocun.com/',
			  down: 'http://ixiaocun.com/down.html'
			};
			var iframe = document.createElement('iframe');
			var body = document.body;
			iframe.style.cssText='display:none;width=0;height=0';
			$("#openapp").on("click",function(){
				if(browser.isAndroid()){
					if (browser.isWx()){
						$(".container").hide();
						var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
						var weixinTip = $('

微信打开

'); $("body").append(weixinTip); $("#weixinTip").css({ "position":"fixed", "left":"0", "top":"0", "height":winHeight, "width":"100%", "z-index":"1000", "background-color":"rgba(0,0,0,0.8)", "filter":"alpha(opacity=80)", }); }else{ window.location.href = jump_url.down; } } })
在除微信以外的浏览器上可以用iframe进行跳转,在微信中无法做到直接跳转,所以用引导页过渡让用户在其他浏览器中打开(引导页我用的是图片)

4.IOS9以下的系统版本,也是可以用iframe来跳转,但是在IOS9以上,iframe方案变得不可用。可以用location.href = '自定义 URL scheme';来跳转,但是会弹出对话框,询问是否打开XX应用,这就导致往往用户还没来得及点击打开,定时器又触发了,导致跳到下载页面。在IOS9以上支持universal link,但是这一块没有来得及研究,公司IOS开发人员也没有提供很好的帮助,所以暂时没有深入研究。


5.由于上面提到的种种困难,最后根据业务场景,采取下面的处理方式:

①在微信中打开页面,显示页面,当点击按钮时,如果为IOS系统,使用魔窗(比较好用的第三方SDK)来判断打开应用或者跳转APPStore;如果为安卓,引导用户在浏览器打开。

②在非微信浏览器中打开,如果是安卓系统,则立即开始唤醒APP,唤醒成功则打开,点击按钮,均跳转到下载页面;如果是IOS系统,当点击按钮时,使用魔窗。


6.使用第三方,我这边使用的是魔窗,可以在唤醒APP的时候传递参数,还是比较好用的,按照自己的需求选择是否使用。

你可能感兴趣的:(前端之路)