原文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的更多相关文章

  1. 网页二维码推广App的实现

    移动互联网时代,一个APP的平均推广成本早已经超过了10块.而推广通常分二类: 1.已经下载过的用户,可以直接打开应用(一般人的手机上安装的应用都非常多,要快速找到某个应用是很困难的事情,而且Andr ...

  2. 评论 ”[实例] 设计基于JQM的WebApp“

    点这里 DEMO 先上最近做的一个WebApp小应用,http://iwxy.me/m.html,大家可以先去玩玩儿,在移动终端访问查看最佳效果 实现的功能是微博上偶然看到的一个小测试,动物认识真实的 ...

  3. WebApp开发技巧大全 看了就明白了

    [转载]阅读原文 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程 序,运行在高端的移动终端设备).开发者们都 ...

  4. 移动web前端小结(一)--摘自小鹿_同学

    一.框架 框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate 开始一个 ...

  5. 移动开发之meta篇

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  6. 移动web前端小结(一)

    这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇 ...

  7. 横向浅谈移动技术------( 原生,混合,web --- 谁能问鼎移动开发的明天)

    目前移动互联网基本采用了NativeApp.WebApp.HybridApp三种开发模式,很难说这三种模式那种更优越,目前的情况可以说是三分天下吧,不同的开发者可以根据自己的实际情况选择不同的开发模式 ...

  8. Mobile开发之meta篇

    Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, ...

  9. HTML5屏幕适配标签设置

    开发HTML5游戏中,我们常用的一些mata标签: <meta name="viewport" content="width=device-width, initi ...

随机推荐

  1. saltstack实战4--综合练习4

    Saltstack配置管理-给minion增加Zabbix-agent zabbix-agent的包 [root@A ~]# rpm -qa |grep zabbix zabbix-2.4.8-1.e ...

  2. saltstack实战3--配置管理之YAML语法

    本文来自如下链接http://docs.saltstack.cn/topics/yaml/index.html 了解YAML 默认的SLS文件的renderer是YAML renderer.YAML是 ...

  3. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  4. 仿QQ注册验证码的实现。

    最近发现一些网站的验证码全部换成了“极验”和“点触”的,发现QQ的注册也是与“点触”的相似.就想尝试实现一个. 先上效果图: 下面贴上主要思路及代码: 第一步:得到常用汉字列表 public stat ...

  5. 通过ASP禁止指定IP和只允许指定IP访问网站的代码

    过ASP禁止指定IP和只允许指定IP访问网站的代码,需要的朋友可以参考下. 一.禁止指定IP防问网站,并执行相应操作: 代码如下: <% Dim IP,IPString,VisitIP '设置I ...

  6. asp.net sql无限极分类实例程序

    数据库结构  代码如下 复制代码 create table category(    id                  int,                    clsno         ...

  7. MD5和Base64介绍与应用

    MD5:概念:MD5是一种不可逆的消息摘要算法.为计算机安全领域广泛使⽤的一种散列函数, 用以提供消息的完整性保护.效果:把一个任意长度的字节串变换成⼀定⻓度的⼗六进制数字串. 目的是让⼤容量信息在⽤ ...

  8. (转)使用 Advanced Installer 打包 一键安装Web应用程序

      使用 Advanced Installer 打包 一键安装Web应用程序         安装预览: 资源下载: 示例安装包 操作流程: 1.新建Asp.net Application. 2.设置 ...

  9. jqGrid Tree

    CSS: <!--jqGrid--><link rel="stylesheet" href="plugins/jqgird/css/ui.jqgrid. ...

  10. 第二节 hibernate session介绍以及session常用方法介绍

    原创地址:http://www.cnblogs.com/binyulan/p/5628579.html Session是java应用程序和hibernate框架之间的一个主要接口.它是从持久化服务中剥 ...