持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情
前言
需求是需要从H5唤起自己家的App,并跳转到对应的页面,所以是有两方面的代码要写,一个是H5的,一个是App的,我们App用的是react-native
进行开发的,故我这篇文章大部分讲的都是偏前端的技术。
正文
1、App端
H5端需要唤起App的话,需要使用到URL Scheme
协议,通过这个协议,可以直接从H5访问协议链接唤起对应的App。
Scheme协议格式如下:[scheme]://[host][:port]/[path]?[query]
安卓:我们在react-native工程目录AndroidManifest.xml
文件里面增加一个 intent-filter
标签,一般放在在MainActivity
里面。
代码如下:
<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:scheme="test" android:host="testHost" />
</intent-filter>
其中test
就是要设置的scheme url,testHost
则是额外的其他参数,除了这两个,后面的参数可以按照业务进行添加。
ios端配置可参考www.wfuyu.com/technology/…
2、H5端
配置好App端的scheme url之后,接着我们在H5端配置scheme url的地址。这个地址可以用一个a标 签进行跳转,也能唤起。
<a href="test://testHost">点我唤起app</a>
不过我们还要判断一下是否有安装App,没有安装的话,就跳转下载页面。可执行两次调url的代码,有概率第一次并不能直接唤起。具体代码如下:
let userAgent = navigator.userAgent;
if(/MicroMessenger/gi.test(userAgent)) {
// 如果是微信里面,则引导去浏览器,微信的调不起
alert('提示', '请在浏览器中打开', [
{ text: '确定', onPress: () => console.log('cancel') },
]);
return;
}
this.setState({loading: true});
let time = 1000, hasApp = true, url = "test://testHost/app?page=123";
setTimeout(() => {
this.setState({loading: false});
if (hasApp) {
console.log('打开App成功');
} else {
alert('打开App失败', '请先下载App或者使用浏览器访问本页面', [
{ text: '取消', onPress: () => console.log('cancel') },
{
text: '立即下载', onPress: () => {
window.location.href = "https://www.download.com/";
}
}
]);
}
window.location.href = url;
}, 1500);
let time1 = Date.now();
window.location.href = url;
setTimeout(function () {
let time2 = Date.now();
if (!time1 || time2 - time1 < time + 100) {
hasApp = false;
}
}, time);
因为不能直接判断是否安装有App,只能通过唤起App的时间来判断,一般来说能成功唤起App的话,js线程会被阻塞,暂时不执行后面的代码,通过这个原理,判断指定时间后是否变量hasApp
已经改变,改变了则js没有被阻塞,就说明App没有安装,如果没有改变,那就说明已经成功唤起了App。
3、监听url变化,跳转指定页面
App端需要在主页面,一般是App.js
,写上监听url的代码,如下:
import { Linking } from "react-native";
componentDidMount() {
Linking.getInitialURL().then(url => {
if (url) {
this.todoSomething({ url });
}
});
}
todoSomething(data){
// 处理逻辑
}
至此,H5唤起App并跳转指定页面的功能就做好了,讲解的比较简单,没有深入分析,有错误的地方欢迎大家指出。