我们经常会遇到这样的情况：在手机浏览器里浏览一个网页，点一个按钮或链接，就能直接打开对应的 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：
优点和缺点
优点：简单，所有手机系统都支持。
缺点：
安全性不高：别的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 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>
<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) { targetUrl = universalLink; } else if (isAndroid) { const isChrome = /chrome\/\d+/.test(navigator.userAgent.toLowerCase()); targetUrl = isChrome ? androidIntent : appScheme; }
const startTime = Date.now(); window.location.href = targetUrl;
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用户为主的应用 |
| 体验好，安全，安卓官方支持 | 只支持新版安卓 | 安卓用户为主的应用 |
Intent Scheme | 控制灵活，可指定包名 | 语法复杂，浏览器兼容不一 | 安卓平台的精细控制 |
简单来说，对于追求好体验的项目，推荐的做法是：
苹果用户：优先使用 Universal Links。
安卓用户：优先使用 App Links，新版系统不支持时，用 Intent Scheme 或 URL Scheme 作为备用。
无论用哪种方法，都别忘了准备一个友好的“未安装APP”引导页，这是提升用户体验的关键一步。希望这篇文章能帮你理清思路，做出体验更好的H5跳转功能。
阅读原文：原文链接
该文章在 2025/12/16 9:55:12 编辑过
400 186 1886
