H5 可以通过scheme跳转到对应app h5如何跳转到指定页面

转载

岁月如歌甚好 2024-04-21 17:14:52

文章标签 h5 reactnative 浏览器跳转APP 跳转APP Scheme 文章分类 机器学习人工智能

文章目录

前言
URL Scheme协议
具体使用配置

Android配置
IOS配置

注意事项

前言

工作可能有这样的需求，就是手机浏览器中加载一个h5页面，点击可以打开某一个APP，比如微信等。这时候通常都是采用URL Scheme的方式进行配置跳转。
那么什么是URL Scheme呢？
简单说：它是一个页面跳转协议。

URL Scheme协议

URL Scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面；通过scheme协议，服务器可以定制化告诉App跳转那个页面，可以通过通知栏消息定制化跳转页面，可以通过H5页面跳转页面等。

苹果手机中的APP都有一个沙盒，APP就是一个信息孤岛，相互是不可以进行通信的。但是iOS的APP可以注册自己的URL Scheme，URL Scheme是为方便app之间互相调用而设计的。

URL Scheme必须能唯一标识一个APP，如果你设置的URL Scheme与别的APP的URL Scheme冲突时，你的APP不一定会被启动起来。因为当你的APP在安装的时候，系统里面已经注册了你的URL Scheme。
完整的URL Scheme格式：

stars://host:8088/pageDetail?pageId=102

1.stars:表示Scheme协议名称,可以自定义
2.host: 表示协议的跳转地址名称，通常和APP中配置的名称是一直的
3.pageDetail:表示跳转的具体页面名称
4.pageId:表示传递的参数
5.8088：通常表示跳转地址的端口名称

具体使用配置

Android配置

<activity

         ...

            <!--要想在别的App上能成功调起App，必须添加intent过滤器-->
            <intent-filter>
                <!--协议部分，随便设置-->
                <data
                    android:host="host"
                    android:path="/pageDetail"
                    android:port="8088"//可以不要
                    android:scheme="stars"/>
                <!--下面这几行也必须得设置-->
                <!--表示该页面可以被隐式调用，必须加上该项-->
                <category android:name="android.intent.category.DEFAULT"/>
                <action android:name="android.intent.action.VIEW"/>
                <!--如果希望该应用可以通过浏览器的连接启动，则添加该项-->
                <category android:name="android.intent.category.BROWSABLE"/>
            </intent-filter>
        </activity>

IOS配置

只需要配置info.plist 文件，只需要配置URL Schemes就可以了，identifier是可选配置

H5 可以通过scheme跳转到对应app h5如何跳转到指定页面_Scheme

注意事项

正常情况下，以上配置后，就可以正常进行跳转了，但是在安卓上，还需要进行一步配置,如果你的应用被其注册过的外部 url 调起，如果要在现有的 MainActivity 中监听传入的 intent，那么需要在AndroidManifest.xml中将 MainActivity 的launchMode设置为singleTask

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">

另外在Android端如果是在APP未启动情况下，还需要进行一下配置，才可以拉起APP后跳转至指定页面。

if(IS_ANDROID){
      Linking.getInitialURL().then(url=>{
        console.log('---url---',url)
        if(url) {
          handleOpenWithURL(url)
        }
      })
    }

官方文档有说明
Handling Deep Links
There are two ways to handle URLs that open your app.

1. If the app is already open, the app is foregrounded and a Linking event is fired
You can handle these events with Linking.addEventListener(url, callback).

2. If the app is not already open, it is opened and the url is passed in as the initialURL
You can handle these events with Linking.getInitialURL(url) – it returns a Promise that resolves to the url, if there is one.