优秀的编程知识分享平台

网站首页 > 技术文章 正文

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

nanyue 2025-08-03 06:53:32 技术文章 41 ℃

什么是 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 

            android:name=".GoodsDetailActivity"            Activity的名称-->            android:theme="@style/AppTheme">             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>

2.JAVA获取Scheme跳转的参数 

Uri uri = getIntent().getData();if (uri != null) {    // 完整的url信息    String url = uri.toString();    Log.e(TAG, "url: " + uri);    // 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, "host: " + port);    // 访问路劲    String path = uri.getPath();    Log.e(TAG, "path: " + path);    List pathSegments = uri.getPathSegments();    // Query部分    String query = uri.getQuery();    Log.e(TAG, "query: " + query);    //获取指定参数值    String goodsId = uri.getQueryParameter("Id");    Log.e(TAG, "Id: " + Id);}

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 = getPackageManager();Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("xl://goods:8888/goodsDetail?goodsId=10011002"));List activities = packageManager.queryIntentActivities(intent, 0);boolean isValid = !activities.isEmpty();if (isValid) {    startActivity(intent);}

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

 html>    <html lang="en">    <head>    <title>h5跳原生title>    head>    <body>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;                } else {                }            }, config.timeout);            window.onblur = function() {                clearTimeout(t);            }        }         openclient();    })()script>    html>

第二种 

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();">打开APPa>        <span id="device">span>    div>    <script type="text/javascript">    //    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设备            // 判断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";　　// Android端URL Schema         }     }     //]]>script>body>html>

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

Tags：

猜你喜欢

最近发表
标签列表