实现一个二维码让 iOS 和 Android 用户自动跳转到对应下载链接
实现一个二维码让 iOS 和 Android 用户自动跳转到对应下载链接
背景
开发一个APP后，需要分发Android测试包和iOS TestFlight的场景，但为两个端分别生成二维码，需要为二维码标识系统以免导致用户扫错码。如何实现一个二维码让 iOS 和 Android 用户自动跳转到对应下载链接呢？
- Android 用蒲公英 / 自建 CDN
- iOS 用 TestFlight
- 还要区分系统、提示安装步骤、兜底手动跳转……
今天分享一个“纯前端、零后端”的解决方案：给即将上线的App做的一个智能下载页，核心代码不到 200 行，上线后让安装转化率提升了 30%。
技术方案
要实现一个二维码让 iOS 和 Android 用户自动跳转到对应下载链接，核心是通过使用一个中间跳转页面（落地页），该页面根据 JavaScript 检测用户的设备类型进行重定向。
步骤：
- 生成一个指向我们服务器的跳转页面的URL，并将该URL生成二维码。
- 当用户扫描二维码后，访问该跳转页面。
- 跳转页面通过User-Agent判断用户设备是iOS还是Android，然后重定向到相应的应用商店下载链接（或应用内页面）。
效果一览
-
自动识别系统
- Android → 直接跳蒲公英链接
- iOS → 先尝试 URL Scheme 拉起 TestFlight，失败再给出手动按钮
-
人性化 Loading & 引导
- 1 s 检测动画，减少白屏焦虑
- 失败时显示“如何手动打开 TestFlight”步骤图
-
完全离线可托管
- 放 CDN 或 GitHub Pages 即可，无需服务器
核心实现拆解
1. 设备判断
const userAgent = navigator.userAgent;if (/Android|Linux/i.test(userAgent)) {// Android
} else if (/iPhone|iPad|iPod/i.test(userAgent)) {// iOS
} else {// 不支持
}
2. iOS 的 URL Scheme 拉起 TestFlight
const appUrl = "itms-beta://testflight.apple.com/join/YOUR_TF_ID";
window.location.href = appUrl;// 兜底：5 秒后未跳转则显示手动按钮
setTimeout(showManual, 5000);
实测中，如果用户未装 TestFlight，
itms-beta://会静默失败，所以必须加兜底。
3. 动画与交互
- 用 Tailwind CSS JIT 写法，一行
@keyframes搞定旋转 - 图标通过 FontAwesome 动态替换，减少额外图片请求
.loading-spin {animation: spin 1.5s linear infinite;
}
4. 自适应布局
<body class="bg-gradient-to-br ... flex items-center justify-center p-4"><div class="card">
max-w-md w-full让卡片在手机上 100 %，在桌面居中 384 pxrounded-xl shadow-lg营造“原生应用”质感
踩坑记录
| 问题 | 解决方案 |
|---|---|
| iOS Safari 禁止自动跳转 | 加 1.5 s 延迟给用户“心理缓冲”，成功率↑ |
| TestFlight 链接失效 | 用 itms-beta:// 而非 https://testflight.apple.com/... 才能直接拉起 App |
| Android 微信内禁外链 | 提示“右上角浏览器打开”即可（可再写 UA 判断 MicroMessenger） |
如何复用
- 把
index.html拉下来 - 替换两处跳转链接：
// Android
window.location.href = "https://your-pgyer-url";// iOS
const appUrl = "itms-beta://testflight.apple.com/join/YOUR_TF_ID";
- 根据指导将代码部署到 GitHub Pages
- 把短链发给用户，或者通过在线二维码生成器生成一个二维码发给用户
源码已开源：github.com/snapetiger/Install_Guide.git
欢迎 Star、提 Issue，一起打磨更好的跨平台体验！