抖音小程序 - 盲盒

每一次开启 · 都是惊喜。基于抖音小程序（字节跳动小程序）原生框架开发的潮玩盲盒拆盒与收藏管理类小程序模板，开箱即用，可二次开发接入真实商品库、支付与订单系统。

一、产品简介

抖音小程序 - 盲盒 是一套面向潮玩盲盒、手办收藏、福袋抽奖类业务的系列展示、拆盒互动与战利品收藏管理类小程序源码。覆盖「浏览系列 → 拆盒开箱 → 款式图鉴收集 → 战利品管理」完整潮玩闭环，含 3D 盲盒开启动画、稀有度概率判定与收集进度联动，界面炫酷、交互流畅、布局自适应。内置本地模拟数据与模拟接口层（系列、款式、拆盒记录完整 CRUD），无需后端即可在抖音开发者工具中直接预览运行，是搭建盲盒、潮玩、抽奖福袋类小程序的优质起步模板。

二、功能介绍

1. 首页（潮玩门户）

• 品牌信息、幸运值与口号展示
• 概览统计：在售系列 / 隐藏款 / 收集度
• 圆形「立即开盒」按钮（毛玻璃质感）
• 热门系列大卡横滑（封面、标签、价格、收集进度）
• 精选系列双列卡片（封面、稀有度、收集进度条、价格、热度）
• 幸运拆盒榜（欧皇开出隐藏款记录）
• 活动公告提醒

2. 全部系列（核心检索）

• 关键字搜索（系列名称）
• 分类筛选：手办潮玩 / 萌趣系列 / 艺术潮玩 / 数码盲盒 / 零食福袋
• 排序：热度 / 价格
• 系列双列卡片（封面渐变、标签、价格、简介、收集进度、拆盒按钮）

3. 拆盒（核心互动，含动画）

• 系列信息卡（封面渐变、价格、隐藏款提示）
• 3D 盲盒开启动画：待拆 / 拆盒中（震动 + 开盖 + 四向火花特效）/ 结果揭晓（弹出动画）
• 随机稀有度判定（隐藏款 8% / 稀有款 20% / 常规 72%）
• 结果卡（开出隐藏款专属高亮、款式图标、名称、稀有度标签、再拆一盒）
• 最近拆盒记录双列展示（款式图标、名称、时间）

4. 系列详情（图鉴收藏）

• 封面渐变、稀有度、价格、款数、收集数
• 收集进度条（已收集 / 总款数百分比 + 隐藏款提示）
• 款式图鉴三列网格（款式色块图标、名称、稀有度标签）
• 拆盒记录列表（款式图标、名称、稀有度、时间金额）
• 去拆盒入口

5. 我的（个人中心）

• 玩家信息卡（昵称、品牌、幸运值）
• 数据看板（四宫格）：拆盒次数 / 隐藏款 / 稀有款 / 收集度
• 我的战利品列表（稀有度 Tab：全部 / 隐藏款 / 稀有款）
• 战利品卡片（色块图标、名称、系列、稀有度、删除）
• 通知设置开关：新系列提醒 / 隐藏款播报 / 自动加入图鉴 / 拆盒音效
• 恢复初始数据

6. 底部导航

• 自定义 TabBar：首页 / 系列 / 拆盒 / 我的

三、使用场景

四、技术特点

• 框架：抖音小程序（字节跳动小程序）原生开发，基于 tt API
• 界面：自定义导航栏 + 自定义 TabBar，适配状态栏与右上角原生胶囊按钮；潮玩主题视觉（葡萄紫 + 樱花粉 + 活力青渐变，体现盲盒的惊喜与潮流感）
• 动画交互：拆盒页含 CSS3 关键帧动画（盒子震动、盖子翻开、四向火花迸射、结果弹出），模拟真实开盲盒的期待与惊喜
• 数据：内置本地 Mock 数据与模拟接口层（utils/mock-api.js），基于本地存储模拟后端 CRUD，调用方式贴近真实 API
• 业务逻辑完备：系列 / 款式检索、随机拆盒与稀有度概率判定（隐藏 / 稀有 / 常规三级概率）、拆盒后自动更新收集进度与图鉴、战利品记录管理与数据看板汇总
• 自适应布局：所有列表 / 网格使用 CSS Grid 双列布局（repeat(2, minmax(0,1fr))），图鉴使用三列，不同手机屏宽下始终保持固定列数展示
• 结构：页面（pages）、组件（components）、数据（data）、工具（utils）、资源（assets）分层清晰，注释完善
• 图标：内置多套配色图标资源
• 版本管理：含 APP 版本号机制，发版时自动清空旧缓存与旧数据，保证真机调试始终为最新代码

五、交付内容

项目目录结构（解压后）

源码_盲盒/
├── app.js                  # 小程序入口（导航栏适配、版本缓存初始化）
├── app.json                # 全局配置（页面路由、窗口、自定义组件）
├── app.ttss                # 全局样式（主题变量、通用类）
├── project.config.json     # 项目配置
├── assets/                 # 静态资源（多套配色图标）
├── components/             # 公共组件
│   ├── tabbar/             # 自定义底部导航
│   └── empty/              # 空状态组件
├── data/
│   └── mock-data.js        # 种子演示数据（品牌/分类/系列/款式/记录/公告/设置）
├── utils/
│   └── mock-api.js         # 模拟接口层（系列/款式/拆盒随机/记录 CRUD + 看板）
└── pages/                  # 页面
    ├── index/              # 首页（潮玩门户）
    ├── series/             # 全部系列检索
    ├── box/                # 拆盒（3D 动画互动）
    ├── detail/             # 系列详情（图鉴/记录）
    └── my/                 # 我的（战利品/设置/数据管理）

六、运行方式

1. 下载并安装 抖音开发者工具（字节跳动小程序开发者工具）。
2. 解压 源码_盲盒.zip。
3. 在开发者工具中选择「导入项目」，项目目录指向解压后的 源码_盲盒 文件夹。
4. 填写自己的 AppID（或使用测试号），点击导入即可预览。
5. 真机调试时如遇旧缓存，可在「我的」页点击「恢复初始数据」，或调大 app.js 中 APP_VER 版本号强制刷新。
6. 如需接入真实能力，替换 utils/mock-api.js 中的系列、款式、拆盒、记录等接口实现，对接实际后端与支付即可上线运营。

说明：源码中所有品牌、公司、系列、款式均为演示占位数据，无任何真实信息。