万福彩票APP下载落地页源码

项目定位

万福集团（WF138.CC）的 APP 下载中心，用途很单一：用户打开页面，看到品牌宣传和支持的彩种，点击下载按钮获取 Android APK 或 iOS IPA 安装包。没有注册登录、没有投注功能、没有资金流转，就是一个引流入口。

但代码层面并不简单。项目分三层：React 19 渲染的前端单页、Express 5 跑的后端 API、以及一个功能完整的 CMS 后台，运营人员可以在后台替换 Logo、修改公告、上传安装包，前端实时生效。

落地页完整视图 -- 从品牌头部到APP下载卡片

技术选型

值得注意的是框架版本：React 19 和 Express 5 都是 2024-2025 年才稳定的最新大版本。一个下载页用上了当前前后端生态最新的两个主版本号，在同类项目中不多见。

前端没有引入任何 CSS 框架或组件库，1138 行手写 CSS 覆盖了所有样式。采用 750px 基准的 min(1px, 0.1333vw) 单位系统做移动端适配，宽屏下页面居中、两侧留白。视觉风格是典型的中式博彩红金配色——深红渐变底、金色描边按钮、仿金属质感的品牌标签。

头部 Hero 区 + 公告滚动条 + 品牌合作方 + 支付方式展示

页面结构与后台管理

前端只有两个视图：访客看到的落地页（/）和管理员看到的后台（/admin），靠 window.location.pathname 判断，没有引入路由库。

落地页从上往下依次是：

1. 品牌头部——Logo + 站名 + 标语（"统一开奖 千万彩友的选择"）

2. Hero 海报——手机预览图 + 运营文案

3. 公告滚动条——最多 12 条通知，CSS 动画横向循环滚动

4. 品牌方阵——四宫格展示合作品牌（BV、名爵、大疆、168 开奖网）

5. 支付方式——支付宝、微信、QQ、银联、加密货币等 8 种图标

6. APP 下载卡片——最多 3 张，每张包含应用图标、名称描述、彩种标签、下载按钮和客服入口

下载按钮的行为做了设备判断：移动端直接跳转对应平台的下载链接，桌面端弹出平台选择弹窗。还做了微信/QQ 内置浏览器检测，会提示用户用系统浏览器打开。iOS 企业签分发走 itms-services:// 协议，后端动态生成 .plist 清单文件。

后台管理面板是一个完整的 CMS：登录鉴权、站点信息编辑（名称/标语/客服链接/Logo/海报）、品牌 Logo 管理（4 个独立上传位）、公告编辑器（可增删排序、设置滚动速度）、APP 卡片编辑（开关/图标/名称/Android 和 iOS 双平台下载配置）。上传图片自动转 WebP，上传安装包自动解析元信息（包名、版本号）。配置变更有乐观锁——两个管理员同时编辑会触发冲突提示。

APP下载卡片区域 -- 应用图标、彩种标签与下载/客服按钮

部署与运行

预计 30 分钟内完成。依赖极简，不需要外部数据库服务。

1. 准备 Node.js 20+，不需要 Nginx/MySQL/Redis

2. 进入 app/ 目录，pnpm install 安装依赖

3. 复制 .env 配置文件，设置管理员密码和端口（默认 8787）

4. pnpm run build 构建前端静态资源到 dist/

5. node server/index.js 启动，SQLite 数据库自动创建

6. 访问 /admin 登录后台，上传 Logo、海报、安装包，配置下载链接

7. 如需边缘部署，dist/ 目录可直接推送到 Cloudflare Workers / OpenAI Sites

整个项目自带数据持久化（SQLite 文件 data/landing.db），上传的文件存在本地 data/ 目录下，不依赖云存储。进程重启不丢数据。

二开评估

这套源码的特点是"小而全"。功能上就是一个下载页，但工程化程度不低——有测试、有安全加固、有乐观并发控制、有边缘部署方案。拿来做博彩 APP 的分发入口，改个皮就能用；也可以当作 React 19 + Express 5 全栈小项目的参考模板。