H5 唤醒Android App

转载 2017年01月03日 11:03:58

目录

原文链接:http://ihongqiqu.com/2015/12/03/html-call-native-app/

解决问题

当用户在手机浏览器中点击一个按钮时,如果手机上已经安装该应用,则直接打开,如果没有安装,则转向应用下载页面。

实现方式

H5实现

H5实现链接格式如下

<a href="[scheme]://[host]/[path]?[query]"> 唤起应用 </a>

各个项目含义如下所示:

  • scheme:唤起协议 ※详细后述
  • host: 唤起指定host
  • path: 协议路径※没有也可以
  • query: 一些参数※没有也可以

终端未安装App

终端如果已经安装我们的应用,这个时候可以直接唤起原生应用;终端如果没有安装我们的应用,这时我们需要引导用户去安装。

JavaScript实现源码

<a id="call-app" href="javascript:;" > Start or Download </a><br/><br/>
<input id="download-app" type="hidden" name="storeurl" value="http://jd.com/8JZ5OO">

<script>
    (function(){
        var ua = navigator.userAgent.toLowerCase();
        var t;
        var config = {
            /*scheme:必须*/
            scheme_IOS: 'schemedemo://',
            scheme_Adr: 'schemedemo://ihongqiqu.com/test/scheme?name=google&page=1',
            download_url: document.getElementById('download-app').value,
            timeout: 600
        };

        function openclient() {
            var startTime = Date.now();

            var ifr = document.createElement('iframe');

            ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);

            var t = setTimeout(function() {
                var endTime = Date.now();

                if (!startTime || endTime - startTime < config.timeout + 200) { 
                    window.location = config.download_url;
                } else {

                }
            }, config.timeout);

            window.onblur = function() {
                clearTimeout(t);
            }
        }
        window.addEventListener("DOMContentLoaded", function(){
            document.getElementById("call-app").addEventListener('click', 
                openclient, false);
        }, false);
    })()
</script>

APP实现

AndroidManifest中添加配置

<activity android:name=".SchemeActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:scheme="schemedemo" />
    </intent-filter>
</activity>

DATA标签中匹配原则如下:

  • android:scheme : 唤起协议
  • android:host : 唤起host,只有置顶的host才可被唤起
  • android:pathPrefix : 唤起的路径,对路径进一步的过滤

Activity中接受唤起协议的数据:

Uri uri = getIntent().getData();
StringBuilder sb = new StringBuilder();
// 唤起链接
sb.append("string : ").append(getIntent().getDataString()).append("\n");
sb.append("scheme : ").append(uri.getScheme()).append("\n");
sb.append("host : ").append(uri.getHost()).append("\n");
sb.append("port : ").append(uri.getPort()).append("\n");
sb.append("path : ").append(uri.getPath()).append("\n");
// 接收唤起的参数
sb.append("name : ").append(uri.getQueryParameter("name")).append("\n");
sb.append("page : ").append(uri.getQueryParameter("page"));

tv_data.setText(sb.toString());

测试资源

唤起源码
测试地址
正式地址

项目源码

https://github.com/jingle1267/AndroidSchemeDemo

H5页面如何唤醒app改进篇

看说明分为直接唤醒和点击唤醒。 html xmlns=http://www.w3.org/1999/xhtml> head> meta http-equiv=Content-Type content=...
  • jiang314
  • jiang314
  • 2016年08月21日 22:00
  • 3624

关于H5唤醒APP的功能实现(千辛万苦啊!)

啥话不说,先上js代码 //启动app方法 function startApp(url, url2) { //url是跳转的scheme地址,这个建议下个反编译的软件,去第三方apk查他们设...
  • sinat_29194935
  • sinat_29194935
  • 2017年04月26日 18:27
  • 5562

微信内H5唤醒本地安装应用终于有解决方案了

我之前做了好多工作,就是解决不了在微信内打开的H5唤醒我的本地应用并且跳转到指定的页面。之前我是这么做的1 主要是在AndroidManifest.xml里面的配置,配置你的应用中从头到尾不会被回收掉...
  • handongyu2011
  • handongyu2011
  • 2017年06月15日 10:31
  • 2314

Android Hybrid app H5 交互

  • 2016年05月18日 09:49
  • 3.21MB
  • 下载

##Android App 集成手机网页(H5)支付系统

Android App 集成手机网页(H5)支付系统最近,由于公司的业务上的 需求,需要集成手机网页H5支付。下面我们一起看看集成网页支付的流程。 由于采用的网络的请求的方式是Form 表单的形...
  • u014655010
  • u014655010
  • 2017年03月30日 16:49
  • 1653

Android如何判断APP使用的是h5界面还是native界面

比较直接的几个方式如下: 手机设置———>开发者选项———–>开启显示布局边界,页面有布局的是native否则为h5页面; 长按页面,如果出现文字选择、粘贴功能的是H5页面,否则是native页面,我...
  • oMrLeft123
  • oMrLeft123
  • 2016年12月15日 13:32
  • 1140

H5为主的Hybrid App技术方案的设想及设计及实战-Android

设想: 主要思路 APP以H5实现为主,而不是仅限于活动页面不使用比较流行的SPA(single page application)方式每个界面对应一个H5页面,等效Activity/View...
  • ShareUs
  • ShareUs
  • 2016年02月27日 15:06
  • 736

iOS/Android 浏览器(h5)及微信中唤起本地APP

在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起。 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问...
  • huikaichedeyeren
  • huikaichedeyeren
  • 2017年06月01日 09:11
  • 543

Android APP 使用WebView访问服务器H5页面带上Cookie

这几天,公司需要将之前的Android APP同时兼容适应在平板上操作。因此将有几个页面改成直接访问服务器的H5页面,而服务器上的H5页面是直接获取的原接口的数据的。...
  • axiang_
  • axiang_
  • 2017年12月23日 11:47
  • 59

H5无法调起android app 的坑之 scheme 大小写

H5无法调起android app 的坑之 scheme 大小写项目中遇到的坑,此处记录一下,也为大家提个醒。 scheme 和 host 在manifest配置是 忽略大小写,都配置成小写...
  • sinat_15417921
  • sinat_15417921
  • 2017年07月03日 13:49
  • 957
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5 唤醒Android App
举报原因:
原因补充:

(最多只允许输入30个字)