实现WebApp直接调起NativeApp
原文http://www.baidufe.com/item/3444ee051f8edb361d12.html
试了一个小Demo,从WebApp上直接调起Android Native App,包括应用已安装和未安装的情况,还是蛮有意思,记录点儿东西:
第一,在AndroidManifest.xml中对<activity />标签增加<intent-filter />,如下:
<!--用这个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:
// 尝试获取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的不同页面。
当然,还有一种方法,是通过注册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长期处于启动状态,耗电是必须要考虑的。
原文http://www.baidufe.com/item/cc592a4b3382eed8ec6e.html
常常有这样的场景,咱们开发出来的Native-APP需要在Web-APP中进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接(App Store中的)。所以咱们来模拟一下用户的操作步骤:
1、用户第一次访问Web-APP
a、点击Banner,进入到APP Store中对应的APP下载页
b、APP下载页中提示:安装;用户点击安装
c、安装完成后,APP下载页中提示:打开;用户继续点击打开
d、用户正常使用APP
2、用户第二次访问Web-APP
a、点击Banner,进入到APP Store中对应的APP下载页
b、APP下载页中提示:打开;用户直接点击打开
c、用户正常使用APP
3、用户第三次、第四次、...、第N次访问Web-APP,操作步骤同2
能看出来,不管是点击Banner还是扫描二维码的方式,对于已经安装过Native APP的用户来说,这个体验都是非常糟糕的。
更优的体验是:点击Banner(或扫描二维码)后,程序判断当前系统是否已安装Native App,如果未安装,则自动跳转到App Store下载页;否则直接打开Native 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(); |
要使用哪一种,就取决与你的实际场景了!
实现WebApp直接调起NativeApp的更多相关文章
- 网页二维码推广App的实现
移动互联网时代,一个APP的平均推广成本早已经超过了10块.而推广通常分二类: 1.已经下载过的用户,可以直接打开应用(一般人的手机上安装的应用都非常多,要快速找到某个应用是很困难的事情,而且Andr ...
- 评论 ”[实例] 设计基于JQM的WebApp“
点这里 DEMO 先上最近做的一个WebApp小应用,http://iwxy.me/m.html,大家可以先去玩玩儿,在移动终端访问查看最佳效果 实现的功能是微博上偶然看到的一个小测试,动物认识真实的 ...
- WebApp开发技巧大全 看了就明白了
[转载]阅读原文 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程 序,运行在高端的移动终端设备).开发者们都 ...
- 移动web前端小结(一)--摘自小鹿_同学
一.框架 框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate 开始一个 ...
- 移动开发之meta篇
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...
- 移动web前端小结(一)
这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇 ...
- 横向浅谈移动技术------( 原生,混合,web --- 谁能问鼎移动开发的明天)
目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式 ...
- Mobile开发之meta篇
Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, ...
- HTML5屏幕适配标签设置
开发HTML5游戏中,我们常用的一些mata标签: <meta name="viewport" content="width=device-width, initi ...
随机推荐
- BLK-MD-BC04-B蓝牙模块的资料
BLK-MD-BC04-B蓝牙模块的资料 蓝牙模块说明 蓝牙模块 波特率 波特率从1200到1382400,具体可以参考波特率列表. 电平接口 答:模块的接口是SPP电平,电压为3.3V. ...
- 利用google api生成二维码名片例子
二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码.堆叠式/行排式二维条码形态上是由多行短截的一维条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩阵相应元素位置上用“点”表示二进制“1” ...
- 什么是C++标准库?
C++中的标准程序库(简称标准库)是类库和函数的集合,其使用核心语言写成.标准程序库提供若干泛型容器.函数对象.泛型字符串和流(包含交互和文件I/O),支持部分语言特性和常用的函数,如开平方根.C++ ...
- IO&Seralize
IO <appSettings> <!--日志路径--> <add key="LogPath" value="E:\学习\C#进阶\fsoc ...
- WiFi安全之WPA介绍
WPA,全称为Wi-Fi Protected Access,是一种保护WiFi安全的系统,实现了IEEE 802.11i的大部分标准,是一种替代WEP的过渡方案. 这个协议包含了前向兼容RC4的加密协 ...
- MSDN 2005 安装问题
在安装玩Visual Studio MSDN 2005时,经常会出现这种问题:“无法显示 Microsoft 文档资源管理器,因为指定的帮助集合“ms-help://MS.MSDNQTR.v” 网上 ...
- SAP校园招聘笔试
一直就向往着SAP公司,终于,有幸今天参加了SAP校园招聘的笔试.下面我就来简单说说这个笔试的内容. 笔试分为两大部分,一部分是逻辑题,就是些什么阅读分析计算balabala的一堆,是全英文的.另外一 ...
- CMakeLists实战解读--YouCompleteMe
原文转载自:Ricky.K http://www.cnblogs.com/rickyk/p/3877238.html 个人一直有一个想法,就是想出一系列关于CMakeLists.txt国外经典例子的实 ...
- TweenMax动画库学习(六)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- 看几道JQuery试题后总结(上篇)
无意中拿到的JQuery题目,拿来分享顺便总结总结 在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别,用例子证明 在JQ ...