这个网站是一个 **交互式技术教学页面**，主题是：

## ☕ Inside CUP Coffee — 微信小程序架构拆解

它用「CUP 精品咖啡」这个小程序作为实例，**逐层拆解一个小程序从打开到运行的完整技术原理**。总共分为 6 个模块：

### 📦 六个模块一览

| 模块 | 标题 | 内容 |
|------|------|------|
| **01** | You Open the App — What Happens Next? | 启动流程：`app.js` 的 `onLaunch` 点火序列、`app.json` 蓝图、主题系统、store 初始化 |
| **02** | Meet the Cast | 六大"演员"：Pages / Store / Services / Mock Data / Components / Utils，以及"加购"时它们如何协作 |
| **03** | How Data Moves Through the App | 数据流追踪：`USE_MOCK` 真假切换、API 层、HTTP 请求、mock 与真实服务器互换 |
| **04** | The Mood Engine | 心情推荐引擎：关键词正则匹配 → LLM 云端函数 → 兜底产品，三层 pipeline |
| **05** | Smart Tricks Under the Hood | 工程巧思：骨架屏、视差滚动、懒加载、购物车库存同步、智能评分排序、子包预加载 |
| **06** | When Things Break | 调试与容错：空购物车边界 bug、GPS 拒绝、云环境未初始化、store 状态检查 |

### 🎯 这个网站的特色

- **双语标注** — 每段代码都有逐行英文注释 + 中文大白话翻译
- **交互测验** — 每个模块末尾有 quiz，点选项会告诉你为什么对/错
- **聊天模拟** — Module 2 有个"角色群聊"动画，展示加购时模块间的对话
- **数据流动画** — Module 3 有逐步骤的数据传递可视化
- **找 Bug 挑战** — Module 6 有个实时代码"找 bug"互动