實現WebApp直接調起NativeApp

時間 2019-12-08

原文原文鏈接

原文http://www.baidufe.com/item/3444ee051f8edb361d12.htmljavascript

試了一個小Demo，從WebApp上直接調起Android Native App，包括應用已安裝和未安裝的狀況，仍是蠻有意思，記錄點兒東西：html

第一，在AndroidManifest.xml中對<activity />標籤增長<intent-filter />，以下：java

 
         <!--用這個Activity專門處理本App調起的狀況--> 
        
         < 
         activity 
         android:name 
         = 
         "com.baidufe.shemedemo.SchemeActivity" 
        
         android:label 
         = 
         "@string/app_name" 
         > 
        
         <!--要想在別的App上能成功調起App，必須添加intent過濾器--> 
        
         < 
         intent-filter 
         > 
        
         <!--協議部分，隨便設置--> 
        
         < 
         data 
         android:scheme 
         = 
         "baidufe" 
         /> 
        
         <!--下面這幾行也必須得設置--> 
        
         < 
         category 
         android:name 
         = 
         "android.intent.category.DEFAULT" 
         /> 
        
         < 
         action 
         android:name 
         = 
         "android.intent.action.VIEW" 
         /> 
        
         < 
         category 
         android:name 
         = 
         "android.intent.category.BROWSABLE" 
         /> 
        
         </ 
         intent-filter 
         > 
        
         </ 
         activity 
         >

第二，在SchemeActivity中接收並處理Uri請求，實現跳轉到不一樣的Native App頁面，獲取Uri能夠在Activity中經過getIntent().getData()實現，Demo：android

 
         // 嘗試獲取WebApp頁面上過來的URL 
        
         Uri uri = getIntent().getData(); 
        
         if 
         (uri !=  
         null 
         ) { 
        
         StringBuffer sb =  
         new 
         StringBuffer(); 
        
         // 完整的url信息 
        
         sb.append( 
         "url: " 
         + uri.toString()); 
        
         // scheme部分 
        
         sb.append( 
         "\nscheme: " 
         + uri.getScheme()); 
        
         // host部分 
        
         sb.append( 
         "\nhost: " 
         + uri.getHost()); 
        
         // 訪問路勁 
        
         sb.append( 
         "\npath: " 
         ); 
        
         List<String> pathSegments = uri.getPathSegments(); 
        
         for 
         ( 
         int 
         i =  
         0 
         ; pathSegments !=  
         null 
         && i < pathSegments.size(); i++) { 
        
         sb.append( 
         "/" 
         + pathSegments.get(i)); 
        
         } 
        
         // Query部分 
        
         sb.append( 
         "\nquery: ?" 
         + uri.getQuery()); 
        
         tv.setText(sb.toString()); 
        
         }

第三，在WebApp頁面上，經過以下方式使用：微信

 
         <!-- 注意這裏的href格式 -- > 
        
         < 
         a 
         href 
         = 
         "baidufe://schemedemo/get/info?id=10000" 
         >open baidufe android app</ 
         a 
         >

上面的連接看起來和平時看到的連接是不同的，baidufe:// 這個協議是被註冊到android app中的，整個格式都是咱們自定義的，固然，也能夠改爲任意的樣子，好比：com.baidufe://a/b/c 。只不過，這個Uri的格式須要提早定義好，要否則在SchemeActivity中沒法匹配上。在SchemeActivity中，能夠獲取到這個Uri，並分段解析，進而啓動不一樣的Activity，實現從WebApp中跳轉到Native App的不一樣頁面。app

固然，還有一種方法，是經過註冊service，並經過ServerSocketChannel去bind一個端口，好比9999，啓動該service後，便可在WebApp中經過 http://127.0.0.1:9999 進行訪問，固然，根據service的不一樣實現，能夠在後面加必定的path和query，好比：http://127.0.0.1:9999/dealIntent?intent=....&callback=.... 。這種方式比scheme更靈活，但缺點也是很明顯的：service長期處於啓動狀態，耗電是必需要考慮的。url

原文http://www.baidufe.com/item/cc592a4b3382eed8ec6e.htmlspa

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

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

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

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

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

d、用戶正常使用APP

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

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

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

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();

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

相關標籤/搜索

每日一句

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