h5网页检测手机是否安装了app。
公司业务拓展到微信，qq和支付宝；在这些平台打开的h5页面需要唤起app实现一些功能；
原理：h5页面内创建一个iframe 通过url scheme 实现h5与安卓和苹果之间的跳转。
实现：找客户端的同事获取url scheme，格式：xx://'跳转页面'/'携带参数'；通过这个链接我们可以跳转到应用的某个页面，并携带一定的参数；
代码实现：
1.通过创建iframe，并隐藏；
因为app厂商的差异，浏览器内核和版本不同；通过js触发存在风险；所以这里使用iframe url scheme地址来触发scheme；
var iframe = document.createElement("iframe");
iframe.src = openUrl;
iframe.style.display = "none";
2.判断是否安装了app；
原理：通过url scheme打开app。
if（成功）｛
h5页面进入后台，在定时器控制打开页面会有明显的延迟；
所以通过时间判断；new date
｝
function openAppUrl ( ){
var gotoApptime = (+new Date());
function check(opentime){
if(opentime> 3000 || document.hidden || document.webkitHidden){可判断页面是否可见
打开app的函数
}else{
错误未打开
}
}
//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var num =0;
var timer = setInterval(function(){
num++;
var opentime = +new Date() - gotoApptime;
if(num>100 || open time >3000){
clearInterval(timer);
check(opentime);
}
})
}
3.微信中h5页面打开app或者下载应用效果；通过应用宝链接实现。
if (callback) {
/ /客户端检测微信直接跳应用宝链接
var browser = BrowserInfo();
//使用微链接
var encodeUri = encodeURIComponent('你的uri');
if (browser.isWeixin) {
window.location.href = '你的微链url&android_schema='+encodeUri;
}else{
openAppUrl(function(opened){
callback && callback(opened);
});
}
}
完整函数
export const openApp = function(openUrl, callback) {
//检查app是否打开
function checkOpen(cb){
var _clickTime = +(new Date());
function check(elsTime) {
if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(1);
} else {
cb(0);
}
}
//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;
if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
check(elsTime);
}
}, 20);
}
//在iframe 中打开APP
var ifr = document.createElement('iframe');
ifr.src = openUrl;
ifr.style.display = 'none';
if (callback) {
//客户端检测微信直接跳应用宝链接
var browser = BrowserInfo();
//使用微链接
var encodeUri = encodeURIComponent(openUrl);
if (browser.isWeixin) {
window.location.href = '你的微链url&android_schema='+encodeUri;
}else{
checkOpen(function(opened){
callback && callback(opened);
});
}
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
}, 2000);
}
函数中调用的BrowserInfo是一个简单的客户端检测。具体如下：
/**
* 客户端检测
*/
export const BrowserInfo = function() {
var json = {
userAgent: navigator.userAgent.toLowerCase(),
isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
}
return json;
}