常常有這樣的場景，咱們開發出來的Native-APP需要在Web-APP中進行推廣，比如在頁面頂部來一張大Banner圖片，亦或一張二維碼。但往往我們都是直接給推廣圖片加了一個下載鏈接（App Store中的）。所以咱們來模擬一下用戶的操作步驟：
1、用戶第一次訪問Web-APP
a、點擊Banner，進入到APP Store中對應的APP下載頁
b、APP下載頁中提示：安裝；用戶點擊安裝
c、安裝完成后，APP下載頁中提示：打開；用戶繼續點擊打開
d、用戶正常使用APP
2、用戶第二次訪問Web-APP
a、點擊Banner，進入到APP Store中對應的APP下載頁
b、APP下載頁中提示：打開；用戶直接點擊打開
c、用戶正常使用APP
3、用戶第三次、第四次、...、第N次訪問Web-APP，操作步驟同2
能看出來，不管是點擊Banner還是掃描二維碼的方式，對於已經安裝過Native APP的用戶來說，這個體驗都是非常糟糕的。
更優的體驗是：點擊Banner（或掃描二維碼）后，程序判斷當前系統是否已安裝Native App，如果未安裝，則自動跳轉到App Store下載頁；否則直接打開Native App。
在iOS上，要增加一個APP的大Banner，其實只需要在<head>標簽內增加一個<meta>標簽即可，格式如：
<meta name='apple-itunes-app' content='app-id=你的APP-ID'>
比如加一個百度貼吧的Native APP大Banner，用下面這串兒代碼：
<
meta
name
=
'apple-itunes-app'
content
=
'app-id=477927812'
>
|
而對於點擊鏈接后，能否直接打開，可以通過下面的代碼來實現。前提條件：你得知道你的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(
'openApp'
).onclick =
function
(e){
// 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，並自動阻止a標簽的默認行為
// 否則打開a標簽的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>
|
當然，如果你是設計成一張二維碼，可以用下面這段代碼：
<!-- a標簽的鏈接，設置為對應的下載鏈接；點擊打開的動作，在click事件中注冊 -->
<a href=
"https://itunes.apple.com/cn/app/id477927812"
id=
"openApp"
style=
"display: none"
>貼吧客戶端</a>
<script type=
"text/javascript"
>
document.getElementById(
'openApp'
).onclick =
function
(e){
// 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，並自動阻止a標簽的默認行為
// 否則打開a標簽的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();
|
要使用哪一種，就取決與你的實際場景了！