近期公司需要針對分享流程進行優(yōu)化宠哄，其中一點就是前端H5檢測是否安裝應用蕴侧，來進行不同的判斷（下載或直接跳轉(zhuǎn)到app中）灰署。原理很簡單：創(chuàng)建一個iframe去打開uri泉坐。如果打開app成功網(wǎng)頁進入后臺为鳄，再切換回來時間會超過2.5s。利用時間去檢測腕让。下面來看具體實現(xiàn)過程：
你可能會遇到的問題
什么是uri孤钦，獲取uri需要哪些幫助？
安卓中應用切換到后臺纯丸， 計時器仍會不斷運行有什么解決方法偏形？
微信中不支持第三方uri,下載應用。怎么解決來完成跳轉(zhuǎn)到自身app觉鼻。
都會在文中找到答案俊扭。
uri獲取
這里的uri,指得就是通過 Url scheme 來實現(xiàn)的H5與安卓、蘋果應用之間的跳轉(zhuǎn)鏈接坠陈。
我們需要找到客戶端的同事萨惑，來獲取如下格式的鏈接捐康。
xx://'跳轉(zhuǎn)頁面'/'攜帶參數(shù)'
這里給大家簡單解釋下url scheme。
url 就是我們平常理解的鏈接庸蔼。
scheme 是指url鏈接中的最初位置解总，就是上邊鏈接中 ‘xx’的位置。
詳細介紹可以看這里：使用url scheme詳解
用這個鏈接我們可以跳轉(zhuǎn)到 應用中的某個頁面,并可以攜帶一定的參數(shù)朱嘴。這個是我們實現(xiàn)這個功能的前提喲倾鲫。
具體實現(xiàn)
第一步：通過iframe打開App
Android平臺則各個app廠商差異很大，比如Chrome從25及以后就不再支持通過js觸發(fā)（非用戶點擊）萍嬉，所以這里使用iframe src地址等來觸發(fā)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);
}
注意：
- 由于安卓手機,頁面進入后臺，定時器setTimeout仍會不斷運行悼做，所以這里使用setInterval,較小間隔時間重復多次疯特。來根據(jù)累計時間判斷。
- cb為回調(diào)函數(shù)肛走，根據(jù)返回0 or 1來判斷是否安裝漓雅。
- document.hidden對大于4.4webview支持很好，為頁面可見性api朽色。
第三步：微信中實現(xiàn)打開or下載應用效果
這里使用的是應用寶微鏈接實現(xiàn)邻吞。
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);
});
}
}
注意點：
- 微鏈接是應用寶提供的，可以在后臺獲取葫男。
- 使用微鏈接必須做encodeURIComponent轉(zhuǎn)義抱冷。
- 鏈接地址在微鏈接后拼接一個android_schema參數(shù)加你的uri。
完整函數(shù)
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);
}
其他
函數(shù)中調(diào)用的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;
}
回調(diào)函數(shù)的使用
頁面中可以通過傳遞回調(diào)函數(shù)盈咳，來獲取返回值趣效；并通過是否傳這個參數(shù)來做進入頁面檢測。
