H5唤起原生应用


文章目录
  1. 1. 实现方式
    1. 1.1. H5实现
      1. 1.1.1. 链接格式如下
      2. 1.1.2. 各个项目含义如下所示:
      3. 1.1.3. 终端未安装APP
      4. 1.1.4. JavaScript实现源码
    2. 1.2. APP实现
      1. 1.2.1. AndroidManifest中添加配置
      2. 1.2.2. DATA标签中匹配原则如下:
      3. 1.2.3. Activity中接受唤起协议的数据:
    3. 1.3. 测试资源
    4. 1.4. 项目源码

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

实现方式

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值