# kidcode-miniprogram

**Repository Path**: kid-code-ai-enlightenment/kidcode-miniprogram

## Basic Information

- **Project Name**: kidcode-miniprogram
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# KidCode - 儿童编程启蒙微信小程序

## 项目简介

KidCode 是一款基于 AI 生成式交互的儿童编程启蒙微信小程序，聚焦 5-12 岁儿童编程启蒙核心需求，构建低门槛、强趣味、适配儿童认知特点的轻量级编程工具。

## 核心功能

### 1. AI 生成式交互模块
- ✅ 儿童语音输入感兴趣的内容
- ✅ 支持儿童口语解析，精准识别儿童语音指令
- ✅ 提供引导式趣味指引，增强学习积极性

### 2. 分阶段场景化编程模块
- ✅ 按年龄段（5-7岁、8-10岁、10-12岁）设计差异化生活化场景任务
- ✅ 覆盖 9 个核心场景，涵盖顺序、循环、条件判断等核心编程逻辑
- ✅ 适配不同年龄段认知水平

### 3. 学习成果呈现模块
- ✅ 支持作品保存和预览
- ✅ 设置勋章墙激励机制，趣味展示学习成果
- ✅ 模拟视频导出和分享功能

### 4. 交互体验优化
- ✅ 真正的积木拖拽排序（长按拖拽、实时反馈）
- ✅ 触觉震动反馈
- ✅ 音效反馈系统
- ✅ 流畅的动画过渡效果
- ✅ **Lottie 动画库**：专业流畅的矢量动画 ⭐

### 5. 动画系统
- ✅ Lottie 动画组件封装
- ✅ 首页动态欢迎动画
- ✅ AI 助手角色动画
- ✅ 可配置的动画播放参数
- ⚠️ 注意：构建时可能有 eval 警告（不影响使用，详见 TROUBLESHOOTING.md）

## 技术栈

- **框架**: Vue 3 + uni-app
- **状态管理**: Vue 3 Reactive API
- **样式**: SCSS
- **平台**: 微信小程序

## 项目结构

```
kidcode-miniprogram/
├── src/
│   ├── pages/              # 页面目录
│   │   ├── index/         # 首页（年龄选择）
│   │   ├── voice-interaction/  # AI 语音交互
│   │   ├── scene-programming/  # 场景编程
│   │   ├── achievements/   # 学习成果
│   │   └── profile/       # 个人中心
│   ├── store/              # 状态管理
│   │   ├── user.js        # 用户状态
│   │   └── scenes.js      # 场景数据
│   ├── utils/              # 工具函数
│   │   └── mockAI.js     # 模拟 AI 响应
│   ├── static/             # 静态资源
│   ├── App.vue            # 应用入口
│   ├── main.js            # 主入口文件
│   ├── manifest.json       # 应用配置
│   ├── pages.json         # 页面配置
│   └── uni.scss          # 全局样式
├── package.json
├── vite.config.js
└── README.md
```

## 场景设计

### 5-7 岁（启蒙期）

1. **小画家** - 顺序逻辑
   - 学习顺序执行的编程概念
   - 掌握移动和画图的基本操作

2. **音乐盒** - 简单循环
   - 理解循环的基本概念
   - 学会使用"重复"积木

3. **小花园** - 条件判断
   - 理解条件判断的概念
   - 学习使用"如果...那么..."积木

### 8-10 岁（进阶期）

4. **迷宫探险** - 顺序+循环
   - 综合运用顺序和循环
   - 学习路径规划的思维

5. **动画制作** - 循环+条件
   - 学习动画帧的概念
   - 掌握复杂的循环和条件组合

6. **小游戏** - 综合逻辑
   - 综合运用各种编程逻辑
   - 学习游戏设计的基本概念

### 10-12 岁（创作期）

7. **互动故事** - 复杂条件
   - 学习分支逻辑和多重条件
   - 理解故事结构设计

8. **数据分析** - 循环+嵌套
   - 学习数据的基本概念
   - 掌握嵌套循环的使用

9. **创意工具** - 综合应用
   - 综合运用所有编程概念
   - 独立完成一个完整项目

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式 - 微信小程序

```bash
npm run dev:mp-weixin
```

### 构建生产版本 - 微信小程序

```bash
npm run build:mp-weixin
```

### 其他平台

项目支持多平台编译，具体命令请参考 `package.json` 中的 scripts。

## 开发指南

### 1. 页面开发

所有页面都在 `src/pages/` 目录下，每个页面包含三个文件：
- `.vue` - 页面组件
- （可选）页面特定的组件

### 2. 状态管理

使用 Vue 3 的 Reactive API 进行状态管理：

```javascript
import { reactive } from 'vue'

const state = reactive({
  // 状态数据
})

// 导出状态和操作方法
export function getState() {
  return state
}
```

### 3. 场景数据扩展

在 `src/store/scenes.js` 中添加新场景：

```javascript
{
  id: 'scene_id',
  name: '场景名称',
  ageRange: [min, max],
  category: 'category',
  logic: '逻辑类型',
  icon: '🎨',
  color: '#4A90E2',
  description: '场景描述',
  story: '故事背景',
  objectives: ['目标1', '目标2'],
  blocks: [...], // 可用积木
  examples: [...], // 示例代码
  badge: { ... } // 勋章信息
}
```

### 4. AI 响应扩展

在 `src/utils/mockAI.js` 中添加新的关键词映射和响应：

```javascript
const keywordSceneMap = {
  '关键词': 'scene_id'
}

// 添加新的引导语
const guidePhrases = {
  // ...
}
```

### 5. 样式规范

使用全局变量定义样式：

```scss
// 在 uni.scss 中定义
$primary-color: #4A90E2;
$spacing-md: 24rpx;
$radius-lg: 24rpx;
```

## 功能特点

### 儿童友好设计

- 🎨 **色彩明快**: 采用明亮活泼的卡通风格配色
- 📱 **大按钮**: 适配儿童操作习惯，降低操作门槛
- 🎭 **卡通图标**: Q版卡通风格，增加趣味性
- ✨ **动画效果**: 丰富的交互动画，提升用户体验

### 分龄适配

- **5-7岁**: 最大按钮、最少操作步骤、语音优先
- **8-10岁**: 中等复杂度、部分文字提示
- **10-12岁**: 更高级功能、完整文字说明

### 激励机制

- 🏆 **勋章系统**: 完成场景获得专属勋章
- 📊 **进度统计**: 实时展示学习成果
- 📁 **作品保存**: 保存编程作品，支持分享
- ⭐ **成就展示**: 可视化展示学习历程

## 数据存储

使用 uni-app 的本地存储 API：

```javascript
// 保存数据
uni.setStorageSync('key', JSON.stringify(data))

// 读取数据
const data = JSON.parse(uni.getStorageSync('key'))
```

## 注意事项

### 性能优化

- 避免在模板中使用复杂计算
- 合理使用 `v-if` 和 `v-show`
- 图片资源建议使用 WebP 格式
- 长列表使用虚拟滚动

### 安全性

- 严格遵守《儿童个人信息网络保护规定》
- 数据传输与存储加密
- 内容无不良导向与不适宜信息
- 符合儿童身心发展特点

### 兼容性

- 适配主流手机机型
- 支持微信小程序最新版本
- 多模块切换流畅，学习过程无中断

## 未来规划

- [ ] 接入真实 AI 语音识别服务
- [ ] 增加更多编程场景
- [ ] 实现真正的视频导出功能
- [ ] 添加社交分享功能
- [ ] 支持多端（H5、App）
- [ ] 添加家长监控功能
- [ ] 开发成就排行榜

## 贡献指南

欢迎贡献代码、提出建议或报告问题！

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 许可证

本项目仅供学习和研究使用。

## 联系方式

如有问题或建议，欢迎通过以下方式联系：

- 项目地址: [GitHub Repository]
- 问题反馈: [Issues]

---

**KidCode 编程启蒙** - 让孩子在快乐中学习编程！🚀