近期公司须要针对分享流程进行优化,其中一点就是 前端H5检测是否安装应用,来进行不一样的判断(下载或直接跳转到app中)。原理很简单:建立一个 iframe去打开 uri。若是打开app成功网页进入后台,再切换回来时间会超过2.5s。 利用时间去检测。下面来看具体实现过程:
都会在文中找到答案。前端
这里的uri,指得就是经过 Url scheme 来实现的H5与安卓、苹果应用之间的跳转连接。
咱们须要找到客户端的同事,来获取以下格式的连接。android
xx://'跳转页面'/'携带参数'
这里给你们简单解释下url scheme。
url 就是咱们日常理解的连接。
scheme 是指url连接中的最初位置,就是上边连接中 ‘xx’的位置。
详细介绍能够看这里: 使用url scheme详解
用这个连接咱们能够跳转到 应用中的某个页面,并能够携带必定的参数。这个是咱们实现这个功能的前提哟。web
Android平台则各个app厂商差别很大,好比Chrome从25及之后就再也不支持经过js触发(非用户点击),因此这里使用iframe src地址等来触发scheme。
//在iframe 中打开APP var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none';
原理:若经过url scheme 打开app成功,那么当前h5会进入后台,经过计时器会有明显延迟。利用时间来判断。
//检查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); }
这里使用的是 应用宝微连接实现。
if (callback) { //客户端检测微信直接跳应用宝连接 var browser = BrowserInfo(); //使用微连接 var encodeUri = encodeURIComponent('你的uri'); if (browser.isWeixin) { window.location.href = '你的微链url&android_schema='+encodeUri; }else{ checkOpen(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); }
/** * 客户端检测 */ 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; }
页面中能够经过传递回调函数,来获取返回值;并经过是否传这个参数来作进入页面检测。