近期公司需要針對分享流程進行優化，其中一點就是前端H5檢測是否安裝應用，來進行不同的判斷（下載或直接跳轉到app中）。原理很簡單：建立一個iframe去開啟uri。如果開啟app成功網頁進入後臺，再切換回來時間會超過2.5s。利用時間去檢測。下面來看具體實現過程：

你可能會遇到的問題

• 什麼是uri，獲取uri需要哪些幫助？
• 安卓中應用切換到後臺， 計時器仍會不斷執行有什麼解決方法？
• 微信中不支援第三方uri,下載應用。怎麼解決來完成跳轉到自身app。

都會在文中找到答案。

uri獲取

這裡的uri,指得就是通過 Url scheme 來實現的H5與安卓、蘋果應用之間的跳轉連結。

我們需要找到客戶端的同事，來獲取如下格式的連結。

xx://'跳轉頁面'/'攜帶引數'

1	xx://'跳轉頁面'/'攜帶引數'

這裡給大家簡單解釋下url scheme。

url 就是我們平常理解的連結。
scheme 是指url連結中的最初位置，就是上邊連結中 ‘xx’的位置。
詳細介紹可以看這裡：使用url scheme詳解

用這個連結我們可以跳轉到 應用中的某個頁面,並可以攜帶一定的引數。這個是我們實現這個功能的前提喲。

具體實現

第一步：通過iframe開啟App

Android平臺則各個app廠商差異很大，比如Chrome從25及以後就不再支援通過js觸發（非使用者點選），所以這裡使用iframe src地址等來觸發scheme。

//在iframe 中開啟APP var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none';

1234	//在iframe 中開啟APP varifr=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); }

123456789101112131415161718192021

//檢查app是否開啟functioncheckOpen(cb){var_clickTime=+(newDate());functioncheck(elsTime){if(elsTime>3000||document.hidden||document.webkitHidden){cb(1);}else{cb(0);}}//啟動間隔20ms執行的定時器，並檢測累計消耗時間是否超過3000ms，超過則結束var_count=0,intHandle;intHandle=setInterval(function(){_count++;varelsTime=+(newDate())-_clickTime;if(_count>=100||elsTime>3000){clearInterval(intHandle);check(elsTime);}},20);}

注意：

• 由於安卓手機,頁面進入後臺，定時器setTimeout仍會不斷執行，所以這裡使用setInterval,較小間隔時間重複多次。來根據累計時間判斷。
• cb為回撥函式，根據返回0 or 1來判斷是否安裝。
• document.hidden對大於4.4webview支援很好，為頁面可見性api。

第三步：微信中實現開啟or下載應用效果

這裡使用的是應用寶微連結實現。

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); }); } }

12345678910111213141516

if(callback){//客戶端檢測微信直接跳應用寶連結varbrowser=BrowserInfo();//使用微連結varencodeUri=encodeURIComponent('你的uri');if(browser.isWeixin){window.location.href='你的微鏈url&android_schema='+encodeUri;}else{checkOpen(function(opened){callback&&callback(opened);});}}

注意點：

• 微連結是應用寶提供的，可以在後臺獲取。
• 使用微連結必須做encodeURIComponent轉義。
• 連結地址在微連結後拼接一個android_schema引數加你的uri。

完整函式

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); }

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

export constopenApp=function(openUrl,callback){//檢查app是否開啟functioncheckOpen(cb){var_clickTime=+(newDate());functioncheck(elsTime){if(elsTime>3000||document.hidden||document.webkitHidden){cb(1);}else{cb(0);}}//啟動間隔20ms執行的定時器，並檢測累計消耗時間是否超過3000ms，超過則結束var_count=0,intHandle;intHandle=setInterval(function(){_count++;varelsTime=+(newDate())-_clickTime;if(_count>=100||elsTime>3000){clearInterval(intHandle);check(elsTime);}},20);}//在iframe 中開啟APPvarifr=document.createElement('iframe');ifr.src=openUrl;ifr.style.display='none';if(callback){//客戶端檢測微信直接跳應用寶連結varbrowser=BrowserInfo();//使用微連結varencodeUri=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; }

1234567891011121314

/** * 客戶端檢測 */export constBrowserInfo=function(){varjson={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)),}returnjson;}

回撥函式的使用

頁面中可以通過傳遞迴調函式，來獲取返回值；並通過是否傳這個引數來做進入頁面檢測。