前言
现在都流行立体式的互联网,一般公司都会有自己的APP,网站,微信公众号,小程序等众多流量入口。为了更好的用户体验,也为了提高用户粘度,打通这些程序的入口,使其联动成为一体十分重要,以此达到相互引流的作用。
APP和网页之间的联动最为常见。很多网页都有这样的功能:在网页点击某一个按钮,或者跳转到某一网页之后,就会唤醒APP,以此达到联动效果。
分析
我们都知道各个系统用的开发语言不尽相同,那么这种效果到底是如何做的呢?
答案就是……scheme。
对应到安卓中就是具体表现为 xml 中的 android:scheme 属性,通过<intent-filter> 设置data,已达到类似Intent的隐式匹配的效果。
当然跳转之前还需要做次判断,如果手机中没有安装APP,则跳转到对应的下载网页。
从网页打开APP,如果没有安装就进行下载。当然,也可以做别的操作处理,比如跳转应用市场一类的详情页面。在此仅提供思路,欢迎发散思维。
网页唤醒APP,除了安卓外,ios也可以达到同样效果。不过scheme等略有不同,这就需要在网页中去判断当前设备是否是安卓设备。常见的判断方法就是通过网络请求中的UA去判断。
UA,全称是 User Agent,中文名为用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
言归正传 ,我们来看一下如何实现
实现
安卓AndroidMainfext.xml
首先需要指定要启动哪一个Activity,然后为该activity设置添加intent-filter。
在要启动的activity下面添加一个intent-filter。
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:host="splash" android:scheme="vchao" />
</intent-filter>
html 网页
在网页中,我们这里只做了简单的处理,点击的时候进行判断跳转。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>唤醒APP</title>
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
</head>
<body>
<div>
<a id="J-call-app" href="javascript:;" class="label">立即打开>></a>
<input id="J-download-app" type="hidden" name="storeurl" value="http://m.chanyouji.cn/apk/chanyouji-2.2.0.apk">
</div>
<script>
(function(){
/*获取UA标识,并转为小写*/
var ua = navigator.userAgent.toLowerCase();
var t;
var config = {
/*scheme:必须*/
scheme_IOS: 'vchao://',
scheme_Adr: 'vchao://splash',
download_url: document.getElementById('J-download-app').value,
timeout: 600
};
function openclient() {
var startTime = Date.now();
var ifr = document.createElement('iframe');
/*通过UA标识,判断是否是苹果系统*/
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("J-call-app").addEventListener('click',openclient,false);
}, false);
})()
</script>
</body>
</html>
如果需要传参数。
在html网页中直接拼接参数。
vchao://splash/?arg0=marc&arg1=xie
在唤醒的activity页面做参数的接收。
Uri uri = getIntent().getData();
if (uri != null) {
String test1 = uri.getQueryParameter("arg0");
String test2 = uri.getQueryParameter("arg1");
tv.setText(test1 + test2);
}