JS實現點擊網頁判斷是否安裝app並開啟否則跳轉app store

常有這樣的場景，咱們開發出來的APP需要進行推廣，例如在頁面頂部來一張大Banner圖片，亦或一張二維碼。但往往我們都是直接為推廣圖片加了一個下載連結（App Store中的）。所以咱們來模擬一下使用者的操作步驟：

1、使用者第一次造訪宣傳頁面

a、點選Banner，進入APP Store中對應的APP下載頁

b、APP下載頁中提示：安裝；使用者點選安裝

c、安裝完成後，APP下載頁中提示：開啟；使用者繼續點選開啟

d、使用者正常使用APP

2、使用者第二次造訪宣傳頁

a、點選Banner，進入到APP Store中對應的APP下載頁

b、APP下載頁中提示：開啟；使用者直接點選開啟

c、使用者正常使用APP

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

能看出來，不管是點擊Banner還是掃描二維碼的方式，對於已經安裝過APP的用戶來說，這個體驗都是非常糟糕的。

更優的體驗是：點選Banner（或掃描二維碼）後，程式判斷目前系統是否已安裝App，若未安裝，則自動跳到App Store下載頁；否則直接開啟App。

在iOS上，要增加一個APP的大Banner，其實只需要在

標籤內增加一個標籤即可，格式如：

<meta name=&#39;apple-itunes-app&#39; content=&#39;app-id=你的APP-ID&#39;>

   

比如加一個百度貼吧大Banner，用下面這串兒程式碼：

<meta name=&#39;apple-itunes-app&#39; content=&#39;app-id=477927812&#39;>

   

而對於點擊連結後，能否直接打開，可以透過下面的程式碼來實現。前提條件：你得知道你的APP對應的開啟協議，如貼吧APP，協議為：com.baidu.tieba:// ，微信的：weixin:// ，and so on。 。 。

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 -->
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp">贴吧客户端</a>
<script type="text/javascript">
document.getElementById(&#39;openApp&#39;).onclick = function(e){
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var ifr = document.createElement(&#39;iframe&#39;);
ifr.src = &#39;com.baidu.tieba://&#39;;
ifr.style.display = &#39;none&#39;;
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
},3000)
};
</script>

   

當然，如果你是設計成一張二維碼，可以用下面這段程式碼：

<!-- a标签的链接，设置为对应的下载链接；点击打开的动作，在click事件中注册 -->
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none">贴吧客户端</a>
<script type="text/javascript">
document.getElementById(&#39;openApp&#39;).onclick = function(e){
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var ifr = document.createElement(&#39;iframe&#39;);
ifr.src = &#39;com.baidu.tieba://&#39;;
ifr.style.display = &#39;none&#39;;
document.body.appendChild(ifr);
window.setTimeout(function(){
document.body.removeChild(ifr);
},3000)
};
document.getElementById(&#39;openApp&#39;).click();

   

要使用哪一種，就取了哪一種實際場景！

我們在瀏覽網頁的時候，你會看到一個網頁下面漂浮著一個提示框“打開APP”或者“下載APP的字樣”，如果你的手機已經安裝過這個APP，那麼網頁會提示“打開APP ”，如果沒有安裝，那就會提示“下載APP的字樣” 這個從技術角度是如何去實現的呢？下面我跟大家分享這塊技術，去年公司給國際動漫節做專案的時候，客戶就提到這個需求，在點擊網頁企業的時候那麼直接打開APP（如果已經安裝了） 如果沒有安裝過，直接打開APP頁

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

if(navigator.userAgent.match(/android/i)) {
// 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
var isInstalled;
//下面是安卓端APP接口调用的地址，自己根据情况去修改
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调用的地址，自己根据情况去修改
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);
}
}

   

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

1、接口地址一定要寫對，大家可以查一下協議，透過這個協定呼叫的

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

使用上面的協議會存在問題的就是必須用ＡＰＫ上架到騰訊應用市場上去