快捷導(dǎo)航

JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store

更新時(shí)間：2016年11月18日 14:24:52 作者：zyjme

這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

常常有這樣的場景，咱們開發(fā)出來的APP需要進(jìn)行推廣，比如在頁面頂部來一張大Banner圖片，亦或一張二維碼。但往往我們都是直接給推廣圖片加了一個(gè)下載鏈接（App Store中的）。所以咱們來模擬一下用戶的操作步驟：

1、用戶第一次訪問宣傳頁面

a、點(diǎn)擊Banner，進(jìn)入到APP Store中對(duì)應(yīng)的APP下載頁

b、APP下載頁中提示：安裝；用戶點(diǎn)擊安裝

c、安裝完成后，APP下載頁中提示：打開；用戶繼續(xù)點(diǎn)擊打開

d、用戶正常使用APP

2、用戶第二次訪問宣傳頁面

a、點(diǎn)擊Banner，進(jìn)入到APP Store中對(duì)應(yīng)的APP下載頁

b、APP下載頁中提示：打開；用戶直接點(diǎn)擊打開

c、用戶正常使用APP

3、用戶第三次、第四次、...、第N次訪問，操作步驟同2

能看出來，不管是點(diǎn)擊Banner還是掃描二維碼的方式，對(duì)于已經(jīng)安裝過APP的用戶來說，這個(gè)體驗(yàn)都是非常糟糕的。

更優(yōu)的體驗(yàn)是：點(diǎn)擊Banner（或掃描二維碼）后，程序判斷當(dāng)前系統(tǒng)是否已安裝App，如果未安裝，則自動(dòng)跳轉(zhuǎn)到App Store下載頁；否則直接打開App。

在iOS上，要增加一個(gè)APP的大Banner，其實(shí)只需要在<head>標(biāo)簽內(nèi)增加一個(gè)<meta>標(biāo)簽即可，格式如：

<meta name='apple-itunes-app' content='app-id=你的APP-ID'>

比如加一個(gè)百度貼吧的Native APP大Banner，用下面這串兒代碼：

<meta name='apple-itunes-app' content='app-id=477927812'>

而對(duì)于點(diǎn)擊鏈接后，能否直接打開，可以通過下面的代碼來實(shí)現(xiàn)。前提條件：你得知道你的APP對(duì)應(yīng)的打開協(xié)議，如貼吧APP，協(xié)議為：com.baidu.tieba:// ，微信的：weixin:// ，and so on。。。

<!-- a標(biāo)簽的鏈接，設(shè)置為對(duì)應(yīng)的下載鏈接；點(diǎn)擊打開的動(dòng)作，在click事件中注冊(cè) --> 
<a  id="openApp">貼吧客戶端</a> 
<script type="text/javascript"> 
document.getElementById('openApp').onclick = function(e){ 
// 通過iframe的方式試圖打開APP，如果能正常打開，會(huì)直接切換到APP，并自動(dòng)阻止a標(biāo)簽的默認(rèn)行為 
// 否則打開a標(biāo)簽的href鏈接 
var ifr = document.createElement('iframe'); 
ifr.src = 'com.baidu.tieba://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
}; 
</script>

當(dāng)然，如果你是設(shè)計(jì)成一張二維碼，可以用下面這段代碼：

<!-- a標(biāo)簽的鏈接，設(shè)置為對(duì)應(yīng)的下載鏈接；點(diǎn)擊打開的動(dòng)作，在click事件中注冊(cè) --> 
<a  id="openApp" style="display: none">貼吧客戶端</a> 
<script type="text/javascript"> 
document.getElementById('openApp').onclick = function(e){ 
// 通過iframe的方式試圖打開APP，如果能正常打開，會(huì)直接切換到APP，并自動(dòng)阻止a標(biāo)簽的默認(rèn)行為 
// 否則打開a標(biāo)簽的href鏈接 
var ifr = document.createElement('iframe'); 
ifr.src = 'com.baidu.tieba://'; 
ifr.style.display = 'none'; 
document.body.appendChild(ifr); 
window.setTimeout(function(){ 
document.body.removeChild(ifr); 
},3000) 
}; 
document.getElementById('openApp').click();

要使用哪一種，就取決與你的實(shí)際場景了！

我們?cè)跒g覽網(wǎng)頁的時(shí)候，你會(huì)看到一個(gè)網(wǎng)頁下面漂浮著一個(gè)提示框“打開APP”或者“下載APP的字樣”，如果你的手機(jī)已經(jīng)安裝過這個(gè)APP，那么網(wǎng)頁會(huì)提示“打開APP”，如果沒有安裝，那就會(huì)提示“下載APP的字樣” 這個(gè)從技術(shù)角度是如何去實(shí)現(xiàn)的呢？下面我給大家分享這塊技術(shù)，去年公司給國際動(dòng)漫節(jié)做項(xiàng)目的時(shí)候，客戶就提到這個(gè)需求，在點(diǎn)擊網(wǎng)頁企業(yè)的時(shí)候那么直接打開APP（如果已經(jīng)安裝了）如果沒有安裝過，直接打開APP頁面

下面我把這塊的源碼分享一下

if(navigator.userAgent.match(/android/i)) {
// 通過iframe的方式試圖打開APP，如果能正常打開，會(huì)直接切換到APP，并自動(dòng)阻止a標(biāo)簽的默認(rèn)行為
// 否則打開a標(biāo)簽的href鏈接
var isInstalled;
//下面是安卓端APP接口調(diào)用的地址，自己根據(jù)情況去修改
var ifrSrc = 'cartooncomicsshowtwo://platformapi/startApp? type=0&id=${com.id}&phone_num=${com.phone_num}';
var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp0').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
//ios判斷
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
//Animation://com.yz.animation
var isInstalled;
//var gz = '{"comName":"${com.short_name}","comID":"${com.id}","comPhoneNum":"${com.phone_num}","type":"0"}';
//var jsongz =JSON.parse(gz);
//下面是IOS調(diào)用的地址，自己根據(jù)情況去修改
var ifrSrc = 'Animation://?comName=${com.short_name}&comID=${com.id}&comPhoneNum=${com.phone_num}&type=0';var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
ifr.onload = function() {
// alert('Is installed.');
isInstalled = true;
alert(isInstalled);
document.getElementById('openApp1').click();};
ifr.onerror = function() {
// alert('May be not installed.');
isInstalled = false;
alert(isInstalled);
}
document.body.appendChild(ifr);
setTimeout(function() {
document.body.removeChild(ifr);
},1000);
}
}

大家在做的過程中需要注意兩個(gè)問題：

1、接口地址一定要寫對(duì)，大家可以查一下schema協(xié)議，通過這個(gè)協(xié)議調(diào)用的

2、在做用安卓的時(shí)候如果用微信掃一掃或者ＱＱ瀏覽器掃碼功能的時(shí)候

使用上面的協(xié)議會(huì)存在問題的就是必須用ＡＰＫ上架到騰訊應(yīng)用市場上去

以上所述是小編給大家介紹的JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: