跳到主要内容

Swee-H5页面

Swee Public 是 Swee 平台的 H5 页面集合，基于 Vite 5 + React 18 构建，主要嵌入在原生 App 的 WebView 中。承载了 Gold Rush 挖矿、Treasure Box 宝箱任务、游戏系统（SSO Token）、创作者收益看板（7 种收入类型）、提现系统、KOL 邀请落地页、社交分享等核心运营功能，是连接 App 原生能力与 Web 灵活性的关键桥梁。

一、项目技术架构​

1.1 整体架构图​

1.2 核心技术栈​

领域技术选型版本
构建工具Vite5.4.2
UI 框架React + React Router18.2.0 / 6.3.0
移动组件Ant Design Mobile5.39.0
动画Framer Motion11.11.17
国际化i18next + react-i18next23.16.4 / 15.4.1
Hooks 工具ahooks3.8.1
错误监控Sentry7.91.0
样式Tailwind CSS + SASS3.4.10
JS-Native 通信@swee/js-bridge-sdk (DSBridge)-
兼容性@vitejs/plugin-legacyAndroid 5+ / iOS 7+
架构决策

选择 Vite 5 + React 18 作为核心技术栈，利用 Vite 的快速 HMR 提升开发效率，同时通过 @vitejs/plugin-legacy 确保对低版本 Android/iOS WebView 的兼容性。使用 @swee/js-bridge-sdk（基于 DSBridge）实现 Web 与原生 App 的双向通信，是 H5 嵌入 WebView 场景的关键基础设施。

二、路由架构​

2.1 完整路由树​

2.2 路由详细清单​

路径功能认证
/gold-rush/home金矿主页（全局概览）需登录
/gold-rush/room房间级挖矿需登录
/gold-rush/rules挖矿规则说明公开
/treasure-box宝箱任务主页需登录
/treasure-box/rule宝箱规则详情公开
/game/list房间内游戏列表需登录
/game/jump游戏跳转中转页需登录
/game/pushPush 游戏专页需登录
/game/revenue游戏收益面板需登录
/data/summary创作者收益汇总需登录
/data/aiAI 训练/分享收益需登录
/data/live直播/1V1 收益需登录
/data/share分享收益详情需登录
/data/showcase展示收益需登录
/data/summon召唤收益需登录
/data/other其他收益需登录
/withdraw/history提现历史需登录
/withdraw/apply提现申请需登录
/withdraw/bind银行账户绑定需登录
/share/room直播间分享公开
/share/encounterAI 邂逅分享公开
/share/lover爱人分享公开
/share/memories回忆分享公开
/share/moments时刻分享公开
/share/challenge挑战分享公开
/invite/landingKOL 邀请落地页公开
/binding/entryOAuth 绑定入口需登录
/binding/callbackOAuth 回调-
/binding/social社交账号绑定需登录

三、Gold Rush 挖矿系统​

3.1 系统架构​

3.2 6 大 Diggies 任务​

3.3 事件驱动刷新​

gold-rush/hooks/useTabRefresh.ts
// 父组件切换 Tab 时
eventEmitter.emit(REFRESH_MY_DIGS);
eventEmitter.emit(REFRESH_LEADERBOARD);

// 子组件监听并刷新
useEventOn({ name: REFRESH_MY_DIGS, listener: refresh });
事件驱动刷新的优势

通过 EventEmitter 实现跨组件通信，避免了 Props Drilling 和不必要的全局状态管理。父组件切换 Tab 时只需发出事件，各子组件按需监听并刷新，实现了精确的数据更新粒度控制。

四、Treasure Box 宝箱任务​

4.1 任务数据结构​

五、游戏系统与 SSO Token​

5.1 游戏进入流程​

5.2 游戏 URL 参数​

参数说明来源
uid用户 ID登录信息
tokenSSO 令牌getGameToken() API
lang游戏语言gameLanguageMap 映射
roomid房间 IDURL 参数
source来源1=房间内 / 2=游戏Tab
size窗口大小1=半屏 / 2=全屏
time时间戳防缓存
SSO Token 安全注意事项

游戏 SSO Token 由后端签发，需注意 Token 的有效期控制和防重放攻击。URL 中携带 time 时间戳参数用于防缓存，但不能替代后端的 Token 过期校验机制。

5.3 游戏收益面板​

  • API: /x/game/user/game/revenue_panel_1
  • 展示最近 14 天收益数据
  • 按小时计费统计

六、创作者收益看板​

6.1 7 种收入类型​

6.2 收益看板架构​

6.3 收入权限检查​

api/data.ts
// 检查用户是否有权查看各模块收益
queryIncomePrivilege({ modules: string[] })
→ IncomePrivilegeVo[] {
    privilegeType: string    // 模块类型
    permitted: boolean       // 是否有权
    existResource: boolean   // 是否有资源
  }

七、提现系统​

7.1 完整提现流程​

八、分享系统​

8.1 6 种分享类型​

类型路径功能
直播间/share/room直播间信息 + 下载引导
AI 邂逅/share/encounterAI 伴侣邂逅分享
爱人/share/lover爱人信息展示
回忆/share/memories互动回忆分享
时刻/share/moments精彩时刻分享
挑战/share/challenge互动挑战分享

8.2 分享页面交互​

8.3 飞起点赞动画​

九、JS Bridge 与 App 通信​

9.1 通信架构​

Deep Link目标页面
x3live://live_room?roomId=xxx直播间
x3live://video_streaming普通开播页
x3live://1v1_streaming1V1 开播页
x3live://ai_home创建数字人
x3live://ai_create_image训练数字人
x3live://showcase_uploadShowcase 上传
x3live://streamer_summon召回页

9.3 Bridge 调试工具​

/test/bridge 页面提供完整的 JS Bridge 调试能力，支持自定义命名空间、方法名、参数输入和结果查看。

十、Vite 构建优化​

10.1 构建策略​

构建优化要点

通过手动分包将 react、react-dom、antd-mobile 等稳定依赖拆分为独立 vendor chunk，利用浏览器缓存减少重复加载。配合 SWC 编译器（plugin-react-swc）替代 Babel，显著提升开发和构建速度。

10.2 兼容性配置​

vite.config.ts
legacy({
  targets: {
    android: '5',    // Android 5.0+
    ios: '7',        // iOS 7+
    chrome: '58',    // Chrome 58+
  }
})

十一、错误监控​

11.1 Sentry 配置​

十二、技术亮点总结​

12.1 无缝 App 集成​

  • JS Bridge 三种通信模式：同步调用、异步调用、事件监听
  • Deep Link 协议：7+ 种原生页面跳转
  • Token 透传：App 注入认证信息，Web 无需重复登录

12.2 事件驱动的组件通信​

  • 使用 @swee/request 的 EventEmitter 实现跨组件通信
  • 避免 Props Drilling 和不必要的状态提升
  • 精确控制数据刷新粒度

12.3 多维度数据展示​

  • Gold Rush 支持全局/房间级两种视图维度
  • 创作者收益支持 7 种收入类型 + 灵活时间范围
  • 动态 Tab 生成 + 权限控制

12.4 SSO Token 游戏对接​

  • 统一的 SSO Token 获取机制
  • 标准化游戏 URL 参数构建
  • 支持半屏/全屏两种显示模式

12.5 飞起点赞特效​

  • 3 种颜色随机生成心形
  • 9 种 fly-up 动画 + 延迟变种
  • 纯 CSS 动画实现，高性能
纯 CSS 动画的性能优势

飞起点赞特效完全使用 CSS @keyframes + transform 实现，触发 GPU 合成层加速，不占用主线程，在低端移动设备上也能保持流畅的 60fps 动画体验。

12.6 老设备兼容​

  • Vite Legacy 插件支持 Android 5+ / iOS 7+
  • CSS 变量自动后备方案
  • Node polyfills 支持

12.7 完整的提现闭环​

  • 银行账户绑定 → 提现申请 → 历史查看
  • 邮箱验证码二次验证
  • 金额范围校验（min/max）

12.8 KOL 邀请机制​

  • 邀请码绑定 + Email 验证
  • Framer Motion 入场动画
  • 奖励领取 + App 深度链接返回

十三、项目数据概览​

指标数据
路由数量25+
视图组件30+
API 模块10+ (gold/game/task/pay/data/user 等)
分享类型6 种
收入类型7 种
挖矿任务6 种 Diggies
Deep Link7+ 种原生页面
支持语言3 种（en-US / zh-TW / id-ID）
兼容性Android 5+ / iOS 7+ / Chrome 58+
构建工具Vite 5 + SWC