ReactNative实战-H5唤起App

477 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 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>

image.png

其中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并跳转指定页面的功能就做好了,讲解的比较简单,没有深入分析,有错误的地方欢迎大家指出。