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 = $('<div id="weixinTip"><p><img src="androidwx.jpg" alt="微信打开" style="width:100%"/></p></div>');
$("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的时候传递参数,还是比较好用的,按照自己的需求选择是否使用。