准备工作
一台普通笔记本或者台式电脑，一部普通手机。
– 下载并安装 元宝电脑版 https://yuanbao.tencent.com/chat
– 下载并安装 [腾讯云代码助手 CodeBuddy ]- https://www.codebuddy.cn/ide/?auto-download=1
– 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
– 注册微信小程序账号（如果尚未注册） – 选择「测试号
元宝是腾讯推出的全能 AI 助手，已接入最新的混元 Hy3 preview 和 DeepSeek 模型， 多种风格写作轻松驾驭、聊天陪伴更有人情味、AI 搜索更实用精准；智能识图、生图P图、拍题答疑等丰富能力，元宝电脑版-随时随地唤起-支持一键划词搜索支持Python、C++等多语言运行，无需部署即时验证 截图上传即可搜索，即问即答效率倍增 支持 AI 划词搜索、翻译
腾讯云代码助手CodeBuddy，AI 时代的智能编程伙伴
腾讯云代码助手CodeBuddy，是一款辅助编码工具，基于混元代码大模型，提供技术对话、代码补全、代码诊断和优化等能力。 为你生成优质代码，帮你解决技术难题，提升编码效率。
微信开发者工具
为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK 详情 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
做一个罗小黑战记主题的学习复习微信小程序，要求，
1，上海全部初中中考单词， 单词随机顺序 含发音和例句，练习题和往年相关的中考真题。
2，上海全部语文中考易错词汇，，练习题和往年相关的中考真题。
3，上海全部语文古诗词 以及练习题 ，加入 标准古诗发音朗读 和 视频讲解
4，七年级数学易错知识点和难题。 练习题和判断对错和解析。
四个模块，制定暑假计划学习和初中生学习使用。
使用这个 logo https://huiji-public.huijistatic.com/luoxiaohei/uploads/9/90/%E7%BD%97%E5%B0%8F%E9%BB%91%E6%88%98%E8%AE%B0TV%E7%89%88%E6%A0%87%E5%BF%97.png
请给出 提示词 给 CodeBuddy使用.下面这份提示词已经完全按你最新的细化要求重写，重点强化了「随机顺序」「发音朗读」「视频讲解」「练习题 & 解析」等学习功能，并且明确指向 CodeBuddy 可直接生成代码/结构 的规格，你可以整段复制使用。
提示词（Prompt）给 CodeBuddy
角色设定：你是一位资深微信小程序全栈开发工程师 + K12 教育内容设计师，熟悉上海中考考纲，擅长将动漫 IP（罗小黑战记）与教育工具深度结合。
任务：基于以下详细需求，设计一个「罗小黑战记」主题的初中学习复习微信小程序，并输出可直接用于开发的工程结构、示例代码和数据结构。
一、项目概述
• 项目名称：罗小黑的中考冒险笔记
• 平台：微信小程序（原生框架，兼容云开发）
• 目标用户：上海初中生（重点七年级升八年级，暑假预习+复习）
• 视觉风格：
• 主色调：深蓝夜空 + 暖黄灯火 + 木色 UI
• 角色：罗小黑（陪伴学习）、无限（严肃导师）、风息（古诗意境）
• 交互氛围：低压力、陪伴感、闯关 RPG 体验
二、四大模块详细功能需求
模块 1：英语·上海中考核心词汇
• 数据范围：上海市初中毕业统一学业考试英语考纲全部词汇（约 1600–1800 词）
• 核心功能：
1. 随机顺序学习
◦ 每次进入单词本自动打乱顺序
◦ 支持「只看收藏」「只看错词」筛选
2. 发音与例句
◦ 每个单词配标准英式 / 美式发音（调用微信同声传译插件或 wx.getBackgroundAudioManager）
◦ 例句支持点击朗读
3. 练习题型
◦ 听音辨词
◦ 词义选择（4 选 1）
◦ 单词拼写填空
4. 学习记录
◦ 标记「已掌握 / 模糊 / 陌生」
◦ 错题自动加入「妖灵错题本」
模块 2：语文·中考易错词汇
• 数据范围：上海中考语文高频易错字词（形近、音近、成语误用）
• 核心功能：
1. 错题驱动学习
◦ 每组词先展示错误用法 → 学生判断正误
2. 练习题型
◦ 错别字辨析（选择题）
◦ 词语填空（语境辨析）
◦ 成语使用正误判断
3. 即时反馈
◦ 错误时弹出「无限老师的纠错小贴士」
◦ 正确时播放罗小黑点赞动画
4. 口诀记忆
◦ 每条易错词配一句顺口溜（朗朗上口）
模块 3：语文·中考必背古诗词 ✅（重点强化）
• 数据范围：上海中考语文考纲规定古诗文篇目（课内 + 常见名句）
• 核心功能：
1. 标准古诗发音朗读
◦ 调用微信语音合成（TTS）或使用预录制标准朗读音频
◦ 支持「全文朗读 / 逐句跟读」
2. 视频讲解
◦ 每首诗词绑定一个讲解视频（mp4 地址或云存储 ID）
◦ 视频内容包括：背景介绍、句意解析、考点提炼
3. 练习题型
◦ 名句填空（挖空关键词）
◦ 诗句与情境匹配
◦ 作者 / 朝代连线
4. 背诵检测
◦ 「掩字背诵」模式：随机隐藏部分文字
◦ 背诵完成后解锁「风息的诗境」动态壁纸
模块 4：数学·七年级易错知识点 & 难题
• 数据范围：上海七年级数学上下册高频易错点 + 典型难题
• 核心功能：
1. 知识点卡片
◦ 标题 + 易错描述 + 正确思路 + 漫画避坑图
2. 练习系统
◦ 判断题：「这个解法对吗？」
◦ 选择题：易错点变形题
◦ 解答题：关键步骤填空
3. 判断对错 + 解析
◦ 提交后立即显示「✅正确 / ❌错误」
◦ 错误时展开「罗小黑讲题」步骤解析
◦ 正确时显示「无限点评：此招尚可」
4. 难度标识
◦ ★ 基础坑 ★★ 进阶坑 ★★★ 地狱坑
三、暑假学习计划系统（核心体验）
1. 计划总览
• 周期：8 周（暑假）
• 模式：每日任务 + 周末副本
2. 每日任务模板
【第 X 周 · 第 Y 天】
🟢 英语：随机 20 词（新学 10 + 复习 10）+ 1 组练习
🔵 语文·字词：5 组易错词 + 正误判断练习
🟣 语文·古诗：1 首朗读 + 视频学习 + 默写练习
🟠 数学：1 个易错点学习 + 3 道判断题 + 1 道难题
🎁 完成奖励：妖灵能量 +1
3. 智能调节机制
• 连续答对 → 提高题目难度，减少重复
• 连续答错 → 自动插入「补救关卡」（同类题 + 解析）
• 周末：「小黑大冒险」
• 综合四科内容
• 通关解锁限定罗小黑表情包
四、技术实现要求（重点）
1. 通用要求
• 框架：微信小程序原生（WXML + WXSS + JS）
• 数据：本地 JSON + 云开发（后期）
• 状态：globalData + setStorageSync
• 权限：录音、音频播放、网络访问
2. 发音 & 视频
• 英语发音：微信同声传译插件（translatePlugin）
• 古诗朗读：
• 方案一：TTS（基础版）
• 方案二：预录制音频（推荐，体验更好）
• 视频讲解：
• <video> 组件
• 支持全屏、倍速、进度条
• 视频资源存储在云存储或 CDN
3. 随机算法
• Fisher–Yates 洗牌算法打乱单词 / 题目顺序
• 每次启动或刷新重新随机
4. 练习与解析数据结构示例
{
"id": 1001,
"type": "choice",
"question": "下列句子中成语使用正确的一项是：",
"options": ["A. ...", "B. ...", "C. ...", "D. ..."],
"answer": "C",
"explanation": "解析：A 项... B 项... C 项正确，因为..."
}
五、页面结构建议
pages/
├── index/ // 首页（小黑之家）
├── plan/ // 暑假计划页
├── english/
│ ├── list/ // 单词列表（随机）
│ ├── detail/ // 单词卡片
│ └── quiz/ // 单词练习
├── chinese-word/
│ ├── list/ // 易错词列表
│ └── quiz/ // 字词练习
├── poetry/
│ ├── list/ // 古诗词目录
│ ├── detail/ // 诗文页（含朗读+视频）
│ └── recitation/ // 背诵检测
├── math/
│ ├── knowledge/ // 知识点卡片
│ └── quiz/ // 数学练习（判断+解析）
├── wrong-book/ // 错题本
├── reward/ // 妖灵收集册
└── profile/ // 个人成就
六、交付要求（给 CodeBuddy）
请你输出以下内容：
1. 完整项目目录结构说明
2. app.json / app.js 示例配置
3. 一个核心页面的完整代码（强烈推荐：poetry/detail（含朗读按钮 + video 视频讲解）或 english/list（随机单词 + 发音））
4. 一个模块的练习数据 JSON 示例（任选其一）
5. 古诗朗读 & 视频讲解的 WXML + JS 实现示例
6. 暑假计划页的逻辑伪代码（含每日任务生成规则）
7. UI 文案建议（贴合罗小黑世界观）
代码要求：规范、注释清晰、适合初中生使用；UI 可爱但不幼稚，突出学习属性；所有交互都要考虑「低压力 + 成就感」。
如果你愿意，我可以下一步直接帮你把 「古诗词详情页（含标准朗读 + 视频讲解 + 练习入口）」的完整小程序代码写出来，你只要告诉我：
👉 用 原生小程序 还是 uni-app？上机测试
# 🐱 小黑学习记 — 罗小黑战记主题学习复习小程序
一款面向上海七年级学生的暑假预习 + 学期复习微信小程序，以「罗小黑战记」治愈系二次元风格呈现，涵盖英语、语文、古诗文、数学四大科目。
## 📱 功能特性
| 模块 | 功能 |
|------|------|
| **首页** | 每日打卡、连续打卡天数、四科学习进度、今日任务、8周计划概览 |
| **英语** | 上海中考高频单词、30天背诵计划、单词卡片（中英互显）、掌握标记 |
| **语文** | 易错字词辨析、正确写法对比、收藏错题、记忆口诀 |
| **古诗文** | 七年级必背古诗词、原文/注释/翻译/赏析、背诵打卡 |
| **数学** | 易错知识点讲解、典型难题+解析、学习进度追踪 |
| **学习计划** | 8周暑期计划总览、学习日历、打卡热力图、每日任务管理 |
## 🎨 视觉风格
- **主色调**：黑白（罗小黑本体）+ 暖黄点缀
- **风格定位**：二次元治愈系，圆润卡片设计
- **动效**：淡入动画、弹性反馈、打卡震动
## 🚀 如何在微信开发者工具中运行
### 1. 准备工作
- 下载并安装 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
- 注册微信小程序账号（如果尚未注册）
### 2. 导入项目
1. 打开微信开发者工具
2. 点击「+」或「导入项目」
3. 选择本项目根目录
4. 填入你的 AppID（或选择「测试号」）
5. 点击「导入」
### 3. 添加 Tab Bar 图标
项目需要 10 个 Tab Bar 图标（普通态 x5 + 选中态 x5），存放在 `images/` 目录下：
```
images/
├── tab-home.png # 首页（未选中）
├── tab-home-active.png # 首页（选中）
├── tab-english.png # 英语（未选中）
├── tab-english-active.png # 英语（选中）
├── tab-chinese.png # 语文（未选中）
├── tab-chinese-active.png # 语文（选中）
├── tab-poem.png # 古诗文（未选中）
├── tab-poem-active.png # 古诗文（选中）
├── tab-math.png # 数学（未选中）
└── tab-math-active.png # 数学（选中）
```
**图标规格**：推荐 81px × 81px，PNG 格式，大小不超过 40KB。
> 你也可以使用 `generate_icons.py` 脚本自动生成图标（需安装 Pillow：`pip install Pillow`）
### 4. 预览运行
导入项目后，点击工具栏「编译」即可在模拟器中预览。
---
## 📂 项目结构
```
├── app.js # 应用入口，数据初始化
├── app.json # 应用配置（页面路由、TabBar）
├── app.wxss # 全局样式（CSS 变量、通用组件）
├── project.config.json # 微信开发者工具配置
├── sitemap.json # 站点地图
├── utils/
│ ├── data.js # 题库数据（英语/语文/古诗文/数学）
│ └── storage.js # 本地存储工具模块
├── pages/
│ ├── index/ # 首页 — 学习总览
│ │ ├── index.wxml
│ │ ├── index.wxss
│ │ ├── index.js
│ │ └── index.json
│ ├── english/ # 英语 — 单词背诵
│ │ ├── english.wxml
│ │ ├── english.wxss
│ │ ├── english.js
│ │ └── english.json
│ ├── chinese/ # 语文 — 易错词辨析
│ │ ├── chinese.wxml
│ │ ├── chinese.wxss
│ │ ├── chinese.js
│ │ └── chinese.json
│ ├── poem/ # 古诗文 — 背诵打卡
│ │ ├── poem.wxml
│ │ ├── poem.wxss
│ │ ├── poem.js
│ │ └── poem.json
│ ├── math/ # 数学 — 知识点+难题
│ │ ├── math.wxml
│ │ ├── math.wxss
│ │ ├── math.js
│ │ └── math.json
│ └── plan/ # 学习计划 — 日历+热力图
│ ├── plan.wxml
│ ├── plan.wxss
│ ├── plan.js
│ └── plan.json
└── images/ # 图标资源
└── (tab bar icons)
```
---
## 📝 如何替换真实题库数据
所有示例数据集中在 `utils/data.js` 文件中，按模块分类：
### 英语单词数据
```javascript
englishData: {
days: [
{ day: 1, title: 'Day 1 · 日常交际',
words: [
{ id: 'e1', word: 'apple', phonetic: '/.../', meaning: '苹果', example: '...' }
]
}
]
}
```
### 语文易错词数据
```javascript
chineseData: {
categories: [
{ id: 'c1', title: '常见错别字',
items: [
{ id: 'ch1', wrong: '错误写法', correct: '正确写法', reason: '原因', tip: '记忆技巧' }
]
}
]
}
```
### 古诗词数据
```javascript
poemData: {
poems: [
{ id: 'p1', title: '诗名', author: '作者', dynasty: '朝代',
content: '原文', annotation: '注释', translation: '翻译', appreciation: '赏析' }
]
}
```
### 数学知识点数据
```javascript
mathData: {
chapters: [
{ id: 'm1', title: '章节名', knowledge: '知识点讲解',
mistakes: '易错点', problems: [{ question: '题目', analysis: '解析' }] }
]
}
```
### 学习计划数据
```javascript
planData: {
weeks: [
{ week: 1, title: '第1周', days: [
{ day: 1, subject: '英语', task: '任务名', type: 'english', detail: '详情' }
]}
]
}
```
> **替换步骤**：
> 1. 打开 `utils/data.js`
> 2. 按照上述结构替换对应数据
> 3. 保持 `id` 字段唯一
> 4. 更新页面中对应的 `total` 计算逻辑（如有需要）
---
## 🔮 后续可扩展功能
- [ ] 错题本 + 错题导出 PDF
- [ ] 家长监督模式（学习报告）
- [ ] 真实题库 JSON 拆分
- [ ] 音标发音（TTS）
- [ ] 学习排行榜
- [ ] 每日学习提醒推送
- [ ] 云同步（微信云开发）
---
## 📄 技术栈
- **框架**：微信原生小程序（WXML + WXSS + JS）
- **数据存储**：本地 Storage
- **兼容性**：基础库 3.3.4+
---
## 🎨 设计参考
罗小黑战记 — 治愈系二次元风格：
- 黑色代表罗小黑本体 🐱
- 白色作为卡片底色
- 暖黄色（#FFB347）作为点缀和强调色
- 圆角设计体现柔和感
---
*Made with ❤️ for Shanghai 7th Graders*
效果
