JS實現(xiàn)點擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store
常常有這樣的場景，咱們開發(fā)出來的APP需要進行推廣，比如在頁面頂部來一張大Banner圖片，亦或一張二維碼。但往往我們都是直接給推廣圖片加了一個下載鏈接（App Store中的）。所以咱們來模擬一下用戶的操作步驟：
1、用戶第一次訪問宣傳頁面
a、點擊Banner，進入到APP Store中對應(yīng)的APP下載頁
b、APP下載頁中提示：安裝；用戶點擊安裝
c、安裝完成后，APP下載頁中提示：打開；用戶繼續(xù)點擊打開
d、用戶正常使用APP
2、用戶第二次訪問宣傳頁面
a、點擊Banner，進入到APP Store中對應(yīng)的APP下載頁
b、APP下載頁中提示：打開；用戶直接點擊打開
c、用戶正常使用APP
3、用戶第三次、第四次、...、第N次訪問，操作步驟同2
能看出來，不管是點擊Banner還是掃描二維碼的方式，對于已經(jīng)安裝過APP的用戶來說，這個體驗都是非常糟糕的。
更優(yōu)的體驗是：點擊Banner（或掃描二維碼）后，程序判斷當前系統(tǒng)是否已安裝App，如果未安裝，則自動跳轉(zhuǎn)到App Store下載頁；否則直接打開App。
在iOS上，要增加一個APP的大Banner，其實只需要在<head>標簽內(nèi)增加一個<meta>標簽即可，格式如：
<meta name='apple-itunes-app' content='app-id=你的APP-ID'>
比如加一個百度貼吧的Native APP大Banner，用下面這串兒代碼：
<meta name='apple-itunes-app' content='app-id=477927812'>
而對于點擊鏈接后，能否直接打開，可以通過下面的代碼來實現(xiàn)。前提條件：你得知道你的APP對應(yīng)的打開協(xié)議，如貼吧APP，協(xié)議為：com.baidu.tieba:// ，微信的：weixin:// ，and so on。。。
<!-- a標簽的鏈接，設(shè)置為對應(yīng)的下載鏈接；點擊打開的動作，在click事件中注冊 -->
<a 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>
當然，如果你是設(shè)計成一張二維碼，可以用下面這段代碼：
<!-- a標簽的鏈接，設(shè)置為對應(yīng)的下載鏈接；點擊打開的動作，在click事件中注冊 -->
<a 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();
要使用哪一種，就取決與你的實際場景了！
我們在瀏覽網(wǎng)頁的時候，你會看到一個網(wǎng)頁下面漂浮著一個提示框“打開APP”或者“下載APP的字樣”，如果你的手機已經(jīng)安裝過這個APP，那么網(wǎng)頁會提示“打開APP”，如果沒有安裝，那就會提示“下載APP的字樣” 這個從技術(shù)角度是如何去實現(xiàn)的呢？下面我給大家分享這塊技術(shù)，去年公司給國際動漫節(jié)做項目的時候，客戶就提到這個需求，在點擊網(wǎng)頁企業(yè)的時候 那么直接打開APP（如果已經(jīng)安裝了） 如果沒有安裝過，直接打開APP頁面
下面我把這塊的源碼分享一下
if(navigator.userAgent.match(/android/i)) {
// 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，并自動阻止a標簽的默認行為
// 否則打開a標簽的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);
}
}
大家在做的過程中需要注意兩個問題：
1、接口地址一定要寫對，大家可以查一下schema協(xié)議，通過這個協(xié)議調(diào)用的
2、在做用安卓的時候 如果用微信掃一掃或者ＱＱ瀏覽器掃碼功能的時候
使用上面的協(xié)議會存在問題的就是必須用ＡＰＫ上架到騰訊應(yīng)用市場上去
以上所述是小編給大家介紹的JS實現(xiàn)點擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- 利用js判斷手機是否安裝某個app的多種方案
- JSP中實現(xiàn)判斷客戶端手機類型并跳轉(zhuǎn)到app下載頁面
- 用于deeplink的js方法(判斷手機是否安裝app)
- js判斷移動端是否安裝某款app的多種方法
- JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
- js實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領(lǐng)紅包功能
- JS觸摸屏網(wǎng)頁版仿app彈窗型滾動列表選擇器/日期選擇器
- JS拉起或下載app的實現(xiàn)代碼
- js判斷手機是否安裝并打開app，未安裝則安裝app【兼容Android、ios,親測可用】
相關(guān)文章
這篇文章主要介紹了js中取得變量絕對值的方法,較為詳細的分析了js中abs方法取絕對值的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
Bootstrap 中的導(dǎo)航組件都依賴同一個 .nav 類和ul，狀態(tài)類也是共用的。改變修飾類可以改變樣式。接下來通過本文給大家介紹bootstrap 導(dǎo)航組件使用方法，一起看看吧2017-01-01
在小程序中集成redux/immutable/thunk第三方庫的方法
這篇文章主要介紹了在小程序中集成redux/immutable/thunk第三方庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
解析JavaScript中 querySelector 與 getElementById 方法的區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法的區(qū)別,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
uni-simple-router專為uniapp打造的路由器,和uniapp深度集成,這篇文章主要給大家介紹了關(guān)于uniapp路由uni-simple-router的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了JS求平均值的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了ES6新特性之數(shù)組、Math和擴展操作符用法,結(jié)合實例形式分析了ES6中數(shù)組、Math和擴展操作符的新特性、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-04-04
深入學(xué)習(xí)TypeScript類型系統(tǒng)的話，逆變、協(xié)變、雙向協(xié)變、不變是繞不過去的概念。這些概念看起來挺高大上的，其實并不復(fù)雜，這篇文章我們就來學(xué)習(xí)下協(xié)變和逆變吧2022-10-10