h5

BEX-H5

BEX 数字资产交易平台 H5 页面集合，为 Flutter WebView 提供静态页面支持。

核心技术栈

• 前端：原生 HTML5 + CSS3 + JavaScript
• 多语言：中英文双语支持
• 移动端集成：Flutter WebView H5 混合开发
• 通信机制：JSBridge（Flutter ↔ H5 双向通信）

功能概览

页面	文件	功能描述
VIP会员等级	vip.html	展示会员等级体系、贡献值、质押要求、团队奖励
活动详情	activity.html	动态加载平台活动内容
邀请下载	invite-download.html	App下载引导页
邀请注册	invite-register.html	邀请码注册页面
隐私政策	privacy-policy.html	隐私政策条款
服务条款	service-terms.html	服务条款与说明
法律声明	legal-notice.html	法律声明
社区规则	community-rules.html	社区行为规范
在线客服条款	customer-service-terms.html	客服服务条款

目录结构

bex-h5/
├── css/                    # 样式文件
│   ├── activity.css       # 活动页面样式
│   ├── invite.css         # 邀请页面样式
│   ├── styles.css         # 通用样式
│   └── vip.css            # VIP页面样式
├── images/                # 图片资源
├── js/                    # JavaScript脚本
│   ├── locales.js         # 多语言文本数据
│   └── script.js          # 通用交互脚本
├── docs/                  # 文档目录
├── activity.html          # 活动详情页
├── vip.html               # VIP会员等级页
├── invite-download.html   # 邀请下载页
├── invite-register.html   # 邀请注册页
└── *.html                 # 其他条款页面

快速开始

本项目为纯静态资源，无需构建工具即可运行。

本地开发

1. 方式一：直接打开

   # 直接在浏览器中打开 HTML 文件
   open vip.html
   

2. 方式二：静态服务器

   # 使用 Python
   python -m http.server 8080
   
   # 或使用 Node.js
   npx serve .
   

3. 访问 http://localhost:8080 查看页面

页面说明

VIP会员等级（vip.html）

展示用户会员等级信息，包括：

• 当前会员等级及图标
• 贡献值进度条
• 质押要求进度条
• 等级权益表格（团队质押奖励、交易返佣比例）
• 贡献值获取方式说明

数据通过 Flutter WebView 获取用户 Token 后调用 API 渲染。

活动详情（activity.html）

• 从 API 动态加载活动内容
• 显示加载状态和错误重试机制
• 支持活动 ID 参数传递

邀请下载（invite-download.html）

• App 下载引导页面
• 安卓/iOS 下载按钮区分
• 平台检测自动切换下载选项

邀请注册（invite-register.html）

• 邀请码注册页面
• 表单验证
• 注册协议展示

条款页面

包含隐私政策、服务条款、法律声明、社区规则、在线客服条款等静态页面，采用统一样式模板。

移动端集成

Flutter WebView 通信机制

H5 页面通过 JSBridge 与 Flutter 原生通信，实现数据获取和页面控制。

接口说明

接口方法	方向	描述
getToken	H5 ← Flutter	获取用户认证 Token
getActivityId	H5 ← Flutter	获取活动 ID
closeWebview	H5 → Flutter	关闭 WebView

使用示例

// 获取用户 Token
async function getToken() {
    try {
        const token = await window.flutter_inappwebview.callHandler('getToken');
        return token;
    } catch (e) {
        console.error('获取Token失败', e);
        return null;
    }
}

// 关闭 WebView
function closeWebview() {
    if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
        window.flutter_inappwebview.callHandler('closeWebview');
    }
}

数据获取流程

1. H5 页面加载完成
2. 调用 window.flutter_inappwebview.callHandler('getToken') 获取 Token
3. 携带 Token 调用后端 API 获取数据
4. 渲染页面内容

多语言支持

支持语言

• 中文（zh）- 默认
• 英文（en）

翻译文件

多语言文本统一管理在 js/locales.js 中，通过 BEXLocales 对象组织。

使用方式

<!-- 静态文本：使用 data-i18n 属性 -->
<div data-i18n="pageTitle">默认文本</div>

<!-- 动态数据：使用 data-field 属性 -->
<span data-field="userName"></span>

页面内翻译切换

部分页面支持页面内的语言切换，通过翻译对象中的 translations 字段定义各语言版本。

部署指南

部署方式

项目为纯静态资源，可部署到任意 Web 服务器或 CDN。

部署步骤

1. 将整个项目目录部署到 Web 服务器
2. 确保服务器支持 SPA 路由（如需要）
3. 配置资源缓存策略
4. 验证各页面加载正常

路径要求

• 建议部署到域名根路径
• 如部署到子路径，需相应调整 CSS/JS 引用路径
• API 请求路径需根据实际环境配置

注意事项

• 确保 /css/、/js/、/images/ 路径可正确访问
• API 接口地址需根据部署环境配置
• 生产环境建议启用 Gzip 压缩