用户点击微信中分享链接
↓
微信浏览器打开H5落地页
↓
H5页面加载视频信息（封面、标题、作者、互动数据等）
↓
页面自动检测环境（iOS / Android）
↓
检测手机是否已安装APP
↓
┌─────────────────┴─────────────────┐
│ │
已安装APP 未安装APP
│ │
页面显示「打开APP」按钮 页面显示「下载APP」按钮
点击尝试唤起APP 点击跳转至统一下载页
│ │
唤起成功 → 跳转APP视频详情页 下载页自动识别系统跳转对应应用商店
唤起失败 → 弹窗引导手动打开或下载
| 区域 | 内容 | 数据来源 |
|---|---|---|
| 视频播放器 | 封面图+播放按钮，点击播放视频 | 视频URL |
| 作者信息 | 头像、昵称 | 用户信息接口 |
| 互动数据 | 有用数、评论数、收藏数 | 视频详情接口 |
| 操作按钮 | 有用、评论、收藏、转发 | 前端UI，点击引导跳转APP |
| 底部操作栏 | 打开APP / 下载APP | 根据环境动态展示 |
// 通过User-Agent判断 iOS设备：包含 iPhone / iPad Android设备：包含 Android 微信内置浏览器：包含 MicroMessenger
iOS（Universal Link）：
Android（URL Scheme + 剪贴板）：
| 端 | 检测方式 | 说明 |
|---|---|---|
| iOS | Universal Link | 苹果推荐方案，系统级支持，已安装自动唤起 |
| Android | URL Scheme + 超时检测 | 通过尝试唤起，3秒超时判断安装状态 |
4.1 已安装APP状态
4.2 未安装APP状态
5.1 唤起APP提示弹窗（iOS）
┌─────────────────────────────────────────────┐ │ 即将打开“杜农农事通”APP │ │ │ │ [ 取消 ] [ 打开 ] │ └─────────────────────────────────────────────┘ (Universal Link 会自动触发系统弹窗，无需手动实现)
5.2 唤起失败引导弹窗（Android）
┌─────────────────────────────────────────────┐ │ ⚠️ 打开APP失败 │ │ 未检测到已安装的APP，请先下载 │ │ │ │ [ 下载APP ] [ 取消 ] │ └─────────────────────────────────────────────┘
| 端 | 唤醒方式 | 检测已安装 | 下载跳转 |
|---|---|---|---|
| iOS | Universal Link | 系统自动 | App Store |
| Android | URL Scheme | 超时检测 | 应用宝 / 官方下载页 |
| 微信内置浏览器 | 不支持直接唤起 | — | 引导用户点击右上角「在浏览器中打开」 |
| 操作 | 交互行为 |
|---|---|
| 点击「有用/没用」按钮 | 弹出提示“请先打开APP” |
| 点击「评论」按钮 | 弹出提示“请先打开APP” |
| 点击「收藏」按钮 | 弹出提示“请先打开APP” |
| 点击「转发」按钮 | 弹出提示“请先打开APP” |
| 点击「关注」按钮 | 弹出提示“请先打开APP” |
| 点击用户头像 | 弹出提示“请先打开APP” |
| 点击视频播放 | 直接播放（H5原生播放器） |
| 模块 | 实现方式 | 备注 |
|---|---|---|
| 页面搭建 | 移动端H5（Vue/React均可） | 响应式适配手机 |
| 视频播放 | H5 video标签 + 视频源 | 支持MP4格式，H.264编码 |
| 数据获取 | 后端API接口 | 返回视频信息、用户信息、互动数据 |
| Universal Link（iOS） | 后端配置apple-app-site-association文件 | 已安装APP自动唤起 |
| URL Scheme（Android） | 前端iframe方式尝试唤起 | 配合超时检测判断安装状态 |
| 下载地址 | 统一短链接 | 后端根据UA自动301跳转对应商店 |