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

要使用哪种，就取决与你的实际场景了！