常常有這樣的場景，咱們開發出來的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，其實只需要在<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();
要使用哪一種，就取決與你的實際場景了！
我們在瀏覽網頁的時候，你會看到一個網頁下面漂浮着一個提示框“打開APP”或者“下載APP的字樣”，如果你的手機已經安裝過這個APP，那么網頁會提示“打開APP”，如果沒有安裝，那就會提示“下載APP的字樣” 這個從技術角度是如何去實現的呢？下面我給大家分享這塊技術，去年公司給國際動漫節做項目的時候，客戶就提到這個需求，在點擊網頁企業的時候 那么直接打開APP（如果已經安裝了） 如果沒有安裝過，直接打開APP頁面
下面我把這塊的源碼分享一下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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)) {
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、接口地址一定要寫對，大家可以查一下schema協議，通過這個協議調用的
2、在做用安卓的時候 如果用微信掃一掃或者ＱＱ瀏覽器掃碼功能的時候
使用上面的協議會存在問題的就是必須用ＡＰＫ上架到騰訊應用市場上去