我们经常会遇到这样的情况：在手机浏览器里浏览一个网页，点一个按钮或链接，就能直接打开对应的 APP。这个功能看起来简单，实现起来却有不少门道。

今天我们就来聊聊H5页面跳转到APP的3种常用方法。

方法一：URL Scheme

这是最基础、最传统的方法。每个APP都可以注册一个专属的“协议头”，就像网站的 http:// 一样。这个协议头就是URL Scheme。怎么用？在html里直接用链接：

<a href="myapp://home?user=123">打开我的APP</a>

用JavaScript触发：


function openApp() {
  window.location.href = 'myapp://home?user=123';
}

一些常见APP的Scheme：

微信：weixin://
支付宝：alipay:// 或 alipays://
QQ：mqq://
淘宝：taobao://

优点和缺点

优点：简单，所有手机系统都支持。

缺点：

安全性不高：别的APP也可以注册同样的Scheme，可能被“劫持”。
没安装APP时体验差：点链接后，如果没装APP，iOS会弹出一个打不开的提示，安卓可能什么反应都没有，用户会觉得莫名其妙。
可能被浏览器拦截：有些浏览器为了安全，会阻止这种跳转。

方法二：Universal Links (苹果iOS专用)

苹果在iOS 9推出了这个功能。它让普通的网页链接（https://）也能打开APP。

怎么配置？在苹果开发者网站为你的APP开启“Associated domains”功能。
在Xcode项目里配置你的网站域名，格式是：applinks:你的域名.com。
在你的网站服务器上放一个特殊的文件，名字叫 apple-app-site-association。这个文件用来告诉苹果，你的APP和网站是一家的。
确保你的网站用了HTTPS（安全的网址）。

apple-app-site-association 文件示例：


{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "你的团队ID.你的APP包名",
        "paths": ["/app/*", "/products/*"]
      }
    ]
  }
}

在H5页面里，你就用一个普通的网页链接


<a href="https://你的域名.com/app/home">进入APP</a>

用户点这个链接时，手机会自动检查：如果装了 APP，就打开APP；如果没装，就正常打开这个网页。

优点和缺点

优点：体验好：像普通链接，没装APP也能打开网页，不会出错。
更安全：只有你认证过的APP才能打开。
功能强：可以把用户在网页看到的内容，直接带到APP里对应的页面。

缺点：只支持苹果手机，配置步骤稍微多点。

方法三：App Links (安卓专用)

这是谷歌为安卓6.0及以上系统提供的功能，作用和苹果的Universal Links很像。

怎么配置？

在APP的 AndroidManifest.xml 文件里，给相关的Activity（页面）添加特定的配置。

在你的网站服务器上放一个叫 assetlinks.json 的文件。

网站同样需要支持HTTPS。

assetlinks.json 文件示例：


[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "你的APP包名",
      "sha256_cert_fingerprints": ["你的APP签名指纹"]
    }
  }
]

优点和缺点

优点：和苹果的Universal Links一样，体验好、安全。

缺点：只支持较新版本的安卓系统，国内一些定制系统可能支持不完善。

方法四：Intent Scheme (安卓专用)

这是安卓平台特有的一种更灵活的调用方式。怎么用？


<!-- 基本用法 -->
<a href="intent://home#Intent;scheme=myapp;package=你的APP包名;end">
  打开应用
</a>

<!-- 带“后备方案”的用法：如果没装APP，就去下载页 -->
<a href="intent://home#Intent;scheme=myapp;package=你的APP包名;S.browser_fallback_url=https%3A%2F%2F你的域名%2F下载页;end">
  打开应用或下载
</a>

这里 S.browser_fallback_url 后面的网址需要经过编码。

优点和缺点

优点：能精确控制跳转行为，可以指定包名，避免被其他APP劫持。

缺点：语法比较复杂，不同浏览器支持程度不同。实际开发中的最佳实践实际项目中，我们很少只用一种方法。为了覆盖所有用户，通常会写一个“聪明”的函数，自动判断用户手机类型，选择最合适的跳转方式。

下面是一个简化版的例子：

function openAppOrGoToDownload() {
    const isIOS = /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
    const isAndroid = /android/.test(navigator.userAgent.toLowerCase());

    // 准备各种链接
    const appScheme = 'myapp://home';
    const universalLink = 'https://你的域名.com/app/home';
    const androidIntent = 'intent://home#Intent;scheme=myapp;package=你的APP包名;S.browser_fallback_url=你的下载页;end';
    const downloadPage = 'https://你的域名.com/download';

    let targetUrl = downloadPage; // 默认去下载页

    if (isIOS) {
        // 苹果手机优先用Universal Link
        targetUrl = universalLink;
    } else if (isAndroid) {
        // 安卓手机，如果是Chrome浏览器就用Intent
        const isChrome = /chrome\/\d+/.test(navigator.userAgent.toLowerCase());
        targetUrl = isChrome ? androidIntent : appScheme;
    }

    // 记录跳转时间
    const startTime = Date.now();
    window.location.href = targetUrl;

    // 设置一个检查：如果过了2秒页面还没跳走，说明可能失败了，就引导用户去下载
    setTimeout(() => {
        // 检查页面是否还在前台（没跳走）
        const stillOnPage = !document.hidden && !document.webkitHidden;
        if (stillOnPage && (Date.now() - startTime > 2000)) {
            window.location.href = downloadPage;
        }
    }, 2000);
}

需要特别注意的情况

1. 微信里的限制

微信浏览器出于安全考虑，基本屏蔽了直接跳转 APP。通常的解决办法是：显示一个提示，告诉用户“点击右上角，在浏览器中打开”。或者生成一个二维码，让用户长按识别后跳转。

2. 安全性

不要在链接里直接传递密码等敏感信息。所有从H5传过来的参数，在APP里都要重新验证。

3. 用户体验

给按钮或链接加上明确的文字，比如“在APP中打开”。
如果跳转需要时间，可以显示一个“正在打开...”的提示。
做好跳转失败的引导，顺畅地把用户带到APP下载页面。

总结

方法	优点	缺点	适用场景
URL Scheme	简单，全平台支持	体验差，不安全	简单需求，或作为备用方案
Universal Links	体验好，安全，苹果官方支持	只支持iOS，配置稍复杂	iOS用户为主的应用
APP Links	体验好，安全，安卓官方支持	只支持新版安卓	安卓用户为主的应用
Intent Scheme	控制灵活，可指定包名	语法复杂，浏览器兼容不一	安卓平台的精细控制

简单来说，对于追求好体验的项目，推荐的做法是：

苹果用户：优先使用 Universal Links。

安卓用户：优先使用 App Links，新版系统不支持时，用 Intent Scheme 或 URL Scheme 作为备用。

我叫地瓜

【学习分享】H5跳转APP的3种方法，看看你掌握了几种？

方法一：URL Scheme

方法二：Universal Links (苹果iOS专用)

方法三：App Links (安卓专用)

方法四：Intent Scheme (安卓专用)

总结

【学习分享】H5跳转APP的3种方法，看看你掌握了几种？

评论交流