实现一个二维码让 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. 设备判断

js 复制代码

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

js 复制代码

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 动态替换，减少额外图片请求

css 复制代码

.loading-spin {
  animation: spin 1.5s linear infinite;
}

4. 自适应布局

html 复制代码

<body class="bg-gradient-to-br ... flex items-center justify-center p-4">
  <div class="card">

max-w-md w-full 让卡片在手机上 100 %，在桌面居中 384 px
rounded-xl shadow-lg 营造"原生应用"质感

踩坑记录

问题	解决方案
iOS Safari 禁止自动跳转	加 1.5 s 延迟给用户"心理缓冲"，成功率↑
TestFlight 链接失效	用 `itms-beta://` 而非 `https://testflight.apple.com/...` 才能直接拉起 App
Android 微信内禁外链	提示"右上角浏览器打开"即可（可再写 UA 判断 `MicroMessenger`）

如何复用

把 index.html 拉下来
替换两处跳转链接：

js 复制代码

// 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，一起打磨更好的跨平台体验！