浏览器点击链接打开指定APP是如何实现的？

原创于 2025-08-04 19:33:29 发布 · 578 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#android

app 专栏收录该内容

2 篇文章

订阅专栏

什么是 URL Scheme？

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

URL Scheme应用场景：

客户端应用可以向操作系统注册一个 URL scheme，该 scheme 用于从浏览器或其他应用中启动本应用。通过指定的 URL 字段，可以让应用在被调起后直接打开某些特定页面，比如商品详情页、活动详情页等等。也可以执行某些指定动作，如完成支付等。也可以在应用内通过 html 页来直接调用显示 app 内的某个页面。综上URL Scheme使用场景大致分以下几种：

服务器下发跳转路径，客户端根据服务器下发跳转路径跳转相应的页面

H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面

APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面

APP根据URL跳转到另外一个APP指定页面

URL Scheme协议格式：

先来个完整的URL Scheme协议格式：

openapp://thisapp:8888/content?Id=10011002

通过上面的路径 Scheme、Host、port、path、query全部包含，基本上平时使用路径就是这样子的。（Scheme和Host是必要的）

openapp代表该Scheme 协议名称（相当于http这样的协议头）

thisapp代表Scheme作用于哪个地址域（相当于baidu.com这样的域名格式，当然，可以不需要.com这样的后缀）

content代表Scheme指定的页面（相当于 baidu.com/css 这样的路径，然后在app内打开相关的页面）

Id代表传递的参数（相当于 https://www.baidu.com/s?wd=12312 这样的GET参数）

8888代表port该路径的端口号

URL Scheme如何使用：

1.在AndroidManifest.xml中对 < activity / > 标签增加 < intent-filter /> 设置Scheme

<activity
    android:name=".GoodsDetailActivity"
    android:theme="@style/AppTheme">
    
    <!-- Activity的名称 -->
    <!-- Activity的主题 -->
    
    <!-- 要想在别的App上能成功调起App，必须添加intent过滤器 -->
    <intent-filter>
        <!-- 协议部分，随便设置 -->
        <data
            android:scheme="openapp"
            android:host="thisapp"
            android:path="/content"
            android:port="8888"/>
            
        <!-- 下面这几行也必须得设置 -->
        <category android:name="android.intent.category.DEFAULT"/>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.BROWSABLE"/>
    </intent-filter>
</activity>

2.JAVA获取Scheme跳转的参数：

Uri uri = getIntent().getData();
if (uri != null) {
    // 完整的url信息
    String url = uri.toString();
    Log.e(TAG, "url: " + url);
    
    // scheme部分
    String scheme = uri.getScheme();
    Log.e(TAG, "scheme: " + scheme);
    
    // host部分
    String host = uri.getHost();
    Log.e(TAG, "host: " + host);
    
    // port部分
    int port = uri.getPort();
    Log.e(TAG, "port: " + port);  // 修正了日志标签从"host"改为"port"
    
    // 访问路径
    String path = uri.getPath();
    Log.e(TAG, "path: " + path);
    List<String> pathSegments = uri.getPathSegments();
    
    // Query部分
    String query = uri.getQuery();
    Log.e(TAG, "query: " + query);
    
    // 获取指定参数值
    String goodsId = uri.getQueryParameter("Id");
    Log.e(TAG, "Id: " + goodsId);  // 修正了变量名从Id改为goodsId以保持一致性
}

3.调用方式
HTML网页

<a href="openapp://thisapp:8888/content?Id=10011002">打开商品详情</a>

原生调用

Intent intent = new Intent(Intent.ACTION_VIEW,Uri.parse("xl://goods:8888/goodsDetail?goodsId=10011002"));  startActivity(intent);

4.如何判断一个Scheme是否有效

// 获取系统 PackageManager 对象
PackageManager packageManager = getPackageManager();

// 创建 Intent，指定 ACTION_VIEW 动作和自定义 scheme 的 Uri
Intent intent = new Intent(
    Intent.ACTION_VIEW,
    Uri.parse("xl://goods:8888/goodsDetail?goodsId=10011002")
);

// 查询能够处理该 Intent 的 Activity 列表
List<ResolveInfo> activities = packageManager.queryIntentActivities(intent, 0);

// 检查是否存在能够处理该 Intent 的 Activity
boolean isValid = !activities.isEmpty();

// 如果存在则启动 Activity
if (isValid) {
    startActivity(intent);
}

如果手机内没有安装该APP则JS跳转至下载页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5跳原生</title>
</head>
<body>
    <script>
        (function() {
            var ua = navigator.userAgent.toLowerCase();
            var t;
            var config = {
                /* scheme:必须 */
                scheme_IOS: 'openapp://',
                scheme_Adr: 'openapp://thisapp:8888/content?Id=10011002',
                download_url: 'http://www.baidu.com', // 下载地址
                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;
                    }
                }, config.timeout);

                window.onblur = function() {
                    clearTimeout(t);
                };
            }

            openclient();
        })();
    </script>
</body>
</html>

第二种

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <title>文档标题</title>
</head>
<body>
    <div style="font-size: 68px;">
        <a href="javascript:open_or_download_app();">打开APP</a>
        <span id="device"></span>
    </div>

    <script type="text/javascript">
    //<![CDATA[
    function open_or_download_app() {
        var device = document.getElementById("device");
        
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            device.innerHTML = "ios设备";
            // 判断useragent，当前设备为ios设备
            var loadDateTime = new Date();
            
            // 设置时间阈值，在规定时间里面没有打开对应App的话，直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 2200) {
                    window.location = "xxxxxxxx";  // APP下载地址
                } else {
                    window.close();
                }
            }, 2000);
            
            window.location = "openapp://thisapp:8888/content?Id=10011002"; // ios端URL Schema
        } 
        else if (navigator.userAgent.match(/android/i)) {
            device.innerHTML = "Android设备";
            // 判断useragent，当前设备为Android设备
            var loadDateTime = new Date();
            
            // 设置时间阈值，在规定时间里面没有打开对应App的话，直接去App store进行下载。
            window.setTimeout(function() {
                var timeOutDateTime = new Date();
                if (timeOutDateTime - loadDateTime < 2200) {
                    window.location = "xxxxxxxx";  // APP下载地址
                } else {
                    window.close();
                }
            }, 2000);
            
            window.location = "openapp://thisapp:8888/content?Id=10011002"; // Android端URL Schema
        }
    }
    //]]>
    </script>
</body>
</html>

总结：
Scheme的基本使用也就这么多了，其他的使用在以后用到的时候再做总结。