单词小程序

单词小程序 · Word Miniprogram

基于 uni-app + Vue 3 + TypeScript 打造的多端单词学习应用，主打 H5 与 微信小程序， 覆盖背词、复习、闯关、语法、听力、音标、阅读等全方位英语学习场景。

🚀 在线体验（Dev 环境）

演示模式登录：openid 固定为 dev_openid，进入登录页直接点「登录」即可。

📌 这是 README 的「在线版」：所有截图均托管在 minio.zxbdwy.online，可在任何脱离仓库的场景（社区、知乎、博客、PR 描述等）直接渲染，本地 README 见 README.md。

---

✨ 技术栈

• ⚡️ Vue 3 + Vite + pnpm + TypeScript
• 🧭 @uni-helper/vite-plugin-uni-pages 文件路由 + @wot-ui/router 运行时导航
• 🧱 @uni-helper/vite-plugin-uni-layouts 布局系统（默认布局 + 自定义 TabBar）
• 🐂 Wot UI 组件库，全局 Provider 注入主题与反馈能力
• 🎨 UnoCSS + i-carbon-* 图标集
• 🍍 Pinia + 自研持久化插件（默认全量持久化，store id 为 temp 的状态不落地）
• 🌐 Alova + @alova/adapter-uniapp，由 OpenAPI 生成 apiDefinitions.ts，业务模块手写于 src/api/modules
• 📊 Apache ECharts via uni-echarts
• 🛠️ ESLint + vue-tsc 双重校验

---

📜 常用脚本

# 开发
pnpm dev              # H5
pnpm dev:mp-weixin    # 微信小程序
pnpm dev:h5:staging   # 指定 staging 环境

# 构建
pnpm build:h5
pnpm build:mp-weixin

# 质量
pnpm type-check
pnpm lint
pnpm lint:fix

# API 生成
pnpm alova-gen        # 重新生成 src/api/apiDefinitions.ts

---

📱 页面一览

下方所有截图均自动取自 Dev 在线环境 https://project.zxbdwy.online/word-miniprogram/。

🔐 登录与入口

🧭 TabBar 主功能

📚 词书与学习

⚙️ 设置

🏆 学习子流程（挑战 / 练习 / 复习）

🎮 H5 专属：游戏 / 阅读 / 特色学习模块

---

🏗️ 架构要点

• 页面声明 = pages.config.ts：通过 vite-plugin-uni-pages 生成 virtual:uni-pages，再由 src/router/index.ts 桥接到 @wot-ui/router。
• 布局接管 Tab/导航：pages.config.ts 中 tabBar.custom = true，底部 Tab 由 src/layouts/tabbar.vue 与 src/customize-tab-bar/index.js 接管。
• 全局根挂载：src/App.ku.vue 统一接入 wd-config-provider、ku-root-view、GlobalLoading / GlobalToast / GlobalMessage，页面无需自挂全局反馈组件。
• 主题三件套：src/store/manualThemeStore.ts + src/composables/useManualTheme.ts + Wot Provider 共同驱动亮暗模式、跟随系统、导航栏颜色同步。

更多细节请参考 CLAUDE.md。

---

📂 目录速览

src/
├── App.ku.vue           # 全局根：Wot Provider + 全局反馈 + 隐私弹窗
├── api/
│   ├── core/            # alova 实例 / 统一 handlers / loading middleware
│   ├── apiDefinitions.ts # 由 pnpm alova-gen 生成（勿手改）
│   ├── modules/         # 业务 API 手写模块
│   └── mock/            # mock adapter & 数据
├── components/          # 自动注册的通用组件
├── business/            # 自动注册的业务组件
├── composables/         # 自动导入的组合式函数（含 useManualTheme）
├── customize-tab-bar/   # 微信小程序自定义 tabBar
├── layouts/             # default.vue / tabbar.vue
├── pages/               # 文件路由源（见下方页面列表）
├── router/              # virtual:uni-pages -> @wot-ui/router 桥接
├── store/               # Pinia（默认持久化）
└── main.ts              # 应用入口

当前页面

---

🤝 开发约定

• 优先用 UnoCSS 原子类与 Wot UI（wd- 前缀）组件，复杂样式再写 SCSS。
• 反馈统一走 GlobalToast / GlobalMessage / GlobalLoading，不要直接调用 uni.showToast。
• 提交信息使用中文，遵循 feat/fix/chore(模块): 任务描述 规范，不带任何署名。
• src/api/apiDefinitions.ts 是生成文件，需要变更时跑 pnpm alova-gen，不要直接修改。