zoukankan      html  css  js  c++  java
  • 实现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(" scheme: " + uri.getScheme());
        // host部分
        sb.append(" host: " + uri.getHost());
        // 访问路劲
        sb.append(" path: ");
        List<String> pathSegments = uri.getPathSegments();
        for (int i = 0; pathSegments != null && i < pathSegments.size(); i++) {
            sb.append("/" + pathSegments.get(i));
        }
        // Query部分
        sb.append(" query: ?" + 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();

    要使用哪一种,就取决与你的实际场景了!

  • 相关阅读:
    一个从excel导入数据错位问题
    Chrome F12 温故而知新 :因为重定向导致清空Network信息
    export / import 温故而知新
    Chrome Debugger 温故而知新:上下文环境
    微信导出表情包教程
    Oracle中判断字段是否为数字
    获取GridView中RowCommand的当前索引行
    Oracle SQL常用内置系统函数总结
    使用Task代替ThreadPool和Thread
    Visual Studio 使用及调试必知必会
  • 原文地址:https://www.cnblogs.com/golovecode/p/4430691.html
Copyright © 2011-2022 走看看