js調用本地app

時間 2019-11-26

標籤調用本地 app 欄目 JavaScript 简体版

原文原文鏈接

經常有這樣的場景，我們開發出來的Native-APP須要在Web-APP中進行推廣，好比在頁面頂部來一張大Banner圖片，亦或一張二維碼。但每每咱們都是直接給推廣圖片加了一個下載連接（App Store中的）。因此我們來模擬一下用戶的操做步驟：javascript

一、用戶第一次訪問Web-APPhtml

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

b、APP下載頁中提示：安裝；用戶點擊安裝微信

c、安裝完成後，APP下載頁中提示：打開；用戶繼續點擊打開app

d、用戶正常使用APPspa

二、用戶第二次訪問Web-APP設計

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

b、APP下載頁中提示：打開；用戶直接點擊打開htm

c、用戶正常使用APP事件

三、用戶第三次、第四次、...、第N次訪問Web-APP，操做步驟同2

能看出來，無論是點擊Banner仍是掃描二維碼的方式，對於已經安裝過Native APP的用戶來講，這個體驗都是很是糟糕的。

更優的體驗是：點擊Banner（或掃描二維碼）後，程序判斷當前系統是否已安裝Native App，若是未安裝，則自動跳轉到App Store下載頁；不然直接打開Native App。

在iOS上，要增長一個APP的大Banner，其實只須要在<head>標籤內增長一個<meta>標籤便可，格式如：

好比加一個百度貼吧的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();

要使用哪種，就取決與你的實際場景了！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。