H5唤起原生应用

转载 2017年01月03日 09:33:08

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

实现方式

H5实现

链接格式如下

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

各个项目含义如下所示:

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

终端未安装APP

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

JavaScript实现源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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中添加配置

1
2
3
4
5
6
7
8
<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中接受唤起协议的数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
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


本文地址 http://ihongqiqu.com/2015/12/03/html-call-native-app/ 作者为 Zhenguo

H5唤起原生应用

解决问题:当用户在手机浏览器中点击一个按钮时,如果手机上已经安装该应用,则直接打开,如果没有安装,则转向应用下载页面。 实现方式 H5实现 链接格式如下 1 "[...
  • pengpenggxp
  • pengpenggxp
  • 2016年12月30日 14:18
  • 646

H5页面唤起app

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • yangronghua6
  • yangronghua6
  • 2016年06月30日 19:03
  • 1587

h5唤起app

h5唤起app这种需求是常见的。在移动为王的时代,h5在app导流上发挥着重要的作用。 目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册sc...
  • jiang314
  • jiang314
  • 2016年08月21日 22:01
  • 9269

h5页面唤起本地APP

本来没有写博客的习惯,但是发现,记忆力现在差好多,不写下来就忘了,主要也是帮助其他人更好的实现功能。因为自己百度找了很多,但是每个人的项目都不同,实现的效果也不一样。我们知道,分享一个产品详情页到微信...
  • yangmeiwei2016
  • yangmeiwei2016
  • 2016年10月31日 14:37
  • 1151

手机浏览器唤起微信app支付说明

微信支付官方文档并没有显示h5唤起微信app支付的文档,但是自微信6.0.2版本后已支持该功能,而且官方已经有了开发文档,只是没有显示出来。 微信h5支付文档地址: https://pay...
  • phf0313
  • phf0313
  • 2016年07月08日 09:58
  • 9453

【H5+ & Quick-cocos2dx整合】之iOS 一 创建原生应用

概述 HTML5+ Html5 plus: HTML5+是中国HTML5产业联盟的扩展规范,基于HTML5扩展了大量调用设备的能力,使得web语言可以想原生语言一样强大。扩展30多种能力,包括二维码、...
  • marunshengabc
  • marunshengabc
  • 2016年08月02日 15:51
  • 843

h5浏览器,唤起app

代码: /* * function getDeviceBrowser * @return {Object} device设备系统,browser浏览器类型 ...
  • xingxing1828
  • xingxing1828
  • 2016年12月29日 15:09
  • 3346

关于H5唤起APP遇到的问题

关于H5唤起APP如何解决 1首先我们要解决的问题是如何唤起APP? 这里我们需要IOS和安卓同事的协助,因为需要他们定一个协议,url scheme,这个协议就是为了唤起APP,至于如何配置这些协议...
  • Lesliejww
  • Lesliejww
  • 2017年04月12日 15:28
  • 334

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

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

支付宝H5唤醒APP

https://ds.alipay.com/?from=mobileweb 支付宝 *, ...
  • u010730458
  • u010730458
  • 2016年05月30日 17:53
  • 13288
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:H5唤起原生应用
举报原因:
原因补充:

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