# infant

**Repository Path**: RunSun/infant

## Basic Information

- **Project Name**: infant
- **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-06-17
- **Last Updated**: 2026-06-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 童趣识字

婴幼儿识字与古诗词学习APP，基于 UniApp + Vue3 + TypeScript + Pinia 开发，支持 H5、微信小程序、Android/iOS APP 多端运行。

## 目录

- [项目结构](#项目结构)
- [环境准备](#环境准备)
- [本地开发](#本地开发)
- [打包H5](#打包h5)
- [打包APP](#打包app)
- [部署说明](#部署说明)
- [应用上架](#应用上架)

---

## 项目结构

```
infant/
├── src/                          # 源代码目录
│   ├── api/                      # API 接口封装
│   │   ├── character.ts          # 汉字相关接口
│   │   ├── learning.ts           # 学习记录接口
│   │   ├── poem.ts               # 古诗相关接口
│   │   └── user.ts               # 用户相关接口
│   │
│   ├── components/               # 公共组件
│   │   ├── custom-tabbar/        # 自定义底部导航栏
│   │   └── zp-public-virtual-cell/  # 虚拟列表单元格
│   │
│   ├── mock/                     # Mock 数据
│   │   ├── character.ts          # 汉字数据（500+字）
│   │   ├── poem.ts               # 古诗数据（100首）
│   │   └── user.ts               # 用户模拟数据
│   │
│   ├── pages/                    # 页面文件
│   │   ├── index/                # 启动页/欢迎页
│   │   ├── login/                # 登录页
│   │   ├── register/             # 注册页
│   │   ├── child-select/         # 儿童选择页
│   │   ├── home/                 # 首页
│   │   ├── character/            # 识字模块
│   │   │   ├── list.vue          # 汉字列表（分页）
│   │   │   ├── detail.vue        # 汉字详情
│   │   │   └── learn.vue         # 汉字学习
│   │   ├── poem/                 # 古诗模块
│   │   │   ├── list.vue          # 古诗列表（分页）
│   │   │   ├── detail.vue        # 古诗详情
│   │   │   ├── learn.vue         # 古诗学习
│   │   │   └── recite.vue        # 古诗背诵
│   │   ├── games/                # 游戏模块
│   │   │   ├── index.vue         # 游戏入口
│   │   │   ├── rank.vue          # 排行榜
│   │   │   ├── match.vue         # 汉字连连看
│   │   │   ├── pinyin.vue        # 拼音大作战
│   │   │   ├── stroke.vue        # 笔画小能手
│   │   │   └── picture.vue       # 看图识字
│   │   ├── review/               # 复习模块
│   │   │   ├── index.vue         # 复习入口
│   │   │   └── quiz.vue          # 综合测验
│   │   ├── tasks/                # 任务模块
│   │   │   └── index.vue         # 每日任务
│   │   ├── parent/               # 家长中心
│   │   │   ├── index.vue         # 家长中心入口
│   │   │   ├── report.vue        # 学习报告
│   │   │   ├── settings.vue      # 学习设置
│   │   │   ├── achievements.vue  # 成就徽章
│   │   │   └── children.vue      # 儿童管理
│   │   └── profile/              # 个人中心
│   │       ├── index.vue         # 我的
│   │       ├── account.vue       # 账户设置
│   │       ├── favorites.vue     # 我的收藏
│   │       ├── feedback.vue      # 意见反馈
│   │       ├── about.vue         # 关于我们
│   │       ├── privacy.vue       # 隐私政策
│   │       └── terms.vue         # 用户协议
│   │
│   ├── stores/                   # Pinia 状态管理
│   │   ├── user.ts               # 用户状态
│   │   └── learning.ts           # 学习状态（含本地持久化）
│   │
│   ├── styles/                   # 样式文件
│   │   ├── variables.scss        # SCSS 变量定义
│   │   └── common.scss           # 公共样式
│   │
│   ├── types/                    # TypeScript 类型定义
│   │   └── index.ts              # 类型声明
│   │
│   ├── utils/                    # 工具函数
│   │   ├── request.ts            # 网络请求封装
│   │   └── storage.ts            # 本地存储封装
│   │
│   ├── uni_modules/              # uni-app 插件
│   │   └── z-paging/             # 分页组件
│   │
│   ├── static/                   # 静态资源
│   │   └── tabbar/               # 底部导航栏图标
│   │
│   ├── App.vue                   # 应用入口组件
│   ├── main.ts                   # 应用入口文件
│   ├── manifest.json             # 应用配置文件
│   ├── pages.json                # 页面路由配置
│   └── uni.scss                  # uni-app 样式变量
│
├── dist/                         # 构建输出目录
│   ├── build/h5/                 # H5 构建产物
│   ├── build/app/                # APP 构建产物
│   └── build/mp-weixin/          # 微信小程序构建产物
│
├── package.json                  # 项目依赖配置
├── vite.config.ts                # Vite 构建配置
├── tsconfig.json                 # TypeScript 配置
└── README.md                     # 项目说明文档
```

### 核心技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| UniApp | 3.0.0 | 跨平台开发框架 |
| Vue | 3.4.x | 前端框架 |
| TypeScript | 5.4.x | 类型系统 |
| Pinia | 2.1.x | 状态管理 |
| Vite | 5.2.x | 构建工具 |
| SCSS | 1.72.x | CSS 预处理器 |
| z-paging | - | 分页组件 |

### 功能模块

| 模块 | 功能 |
|------|------|
| 识字模块 | 500+ 汉字学习，支持拼音、笔顺、释义、组词 |
| 古诗模块 | 100 首经典古诗，含注释、译文、赏析 |
| 游戏模块 | 连连看、拼音大作战、笔画小能手、看图识字 |
| 复习模块 | 复习巩固、综合测验 |
| 任务系统 | 每日学习任务 |
| 家长中心 | 学习报告、设置、成就、儿童管理 |

---

## 环境准备

### 1. 安装 Node.js

下载并安装 Node.js（建议 v18.x 或更高版本）：https://nodejs.org/

验证安装：
```bash
node -v    # 应显示 v18.x.x 或更高
npm -v     # 应显示 9.x.x 或更高
```

### 2. 安装 HBuilderX（用于 APP 打包）

下载 HBuilderX：https://www.dcloud.io/hbuilderx.html

- 推荐下载**正式版**（包含 App 开发所需插件）
- 安装后需要登录 DCloud 账号

### 3. 安装项目依赖

```bash
cd infant
npm install
```

---

## 本地开发

### H5 开发模式

```bash
npm run dev:h5
```

访问 http://localhost:8080 查看效果。

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

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

构建完成后，用微信开发者工具打开 `dist/dev/mp-weixin` 目录。

### APP 开发模式

```bash
npm run dev:app
```

或使用 HBuilderX 打开项目，点击菜单 **运行 → 运行到手机或模拟器**。

---

## 打包H5

### 1. 执行构建命令

```bash
npm run build:h5
```

构建产物输出到 `dist/build/h5` 目录。

### 2. 构建产物结构

```
dist/build/h5/
├── index.html              # 入口 HTML
├── assets/                 # 静态资源（JS、CSS、图片等）
│   ├── index-xxx.js        # 主 JS 文件
│   ├── index-xxx.css       # 主 CSS 文件
│   └── ...                 # 其他资源
└── static/                 # 静态文件
    └── tabbar/             # 图标等
```

### 3. 修改部署路径（可选）

如果部署到子目录，需要修改 `src/manifest.json`：

```json
{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/your-sub-path/"
    }
  }
}
```

---

## 部署说明

### 方式一：Nginx 部署

1. 将 `dist/build/h5` 目录上传到服务器

2. 配置 Nginx：

```nginx
server {
    listen 80;
    server_name your-domain.com;

    root /var/www/infant-h5;
    index index.html;

    # 开启 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1000;

    # 静态资源缓存
    location /assets {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # SPA 路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

3. 重载 Nginx：
```bash
sudo nginx -s reload
```

### 方式二：Apache 部署

1. 上传文件到服务器

2. 创建 `.htaccess` 文件（放在 h5 目录下）：

```apache
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
</IfModule>
```

### 方式三：静态托管服务

支持部署到以下平台：

| 平台 | 地址 |
|------|------|
| Vercel | https://vercel.com |
| Netlify | https://netlify.com |
| GitHub Pages | https://pages.github.com |
| Cloudflare Pages | https://pages.cloudflare.com |
| 阿里云 OSS | 配合 CDN 使用 |
| 腾讯云 COS | 配合 CDN 使用 |

**Vercel 部署示例：**

```bash
# 安装 Vercel CLI
npm i -g vercel

# 部署
cd dist/build/h5
vercel
```

---

## 打包APP

### 方式一：云打包（推荐）

使用 HBuilderX 进行云打包，无需本地配置 Android/iOS 开发环境。

#### 步骤 1：打开项目

用 HBuilderX 打开 `infant` 项目目录。

#### 步骤 2：获取 AppID

1. 登录 [DCloud 开发者中心](https://dev.dcloud.net.cn/)
2. 创建应用，获取 AppID
3. 填入 `src/manifest.json` 的 `appid` 字段

#### 步骤 3：配置应用信息

编辑 `src/manifest.json`：

```json
{
  "name": "童趣识字",
  "appid": "__UNI__XXXXXX",
  "versionName": "1.0.0",
  "versionCode": "100",
  "app-plus": {
    "distribute": {
      "android": {
        "packagename": "com.yourcompany.infant",
        "minSdkVersion": 21,
        "targetSdkVersion": 33
      },
      "ios": {
        "appid": "com.yourcompany.infant"
      }
    }
  }
}
```

#### 步骤 4：执行云打包

1. HBuilderX 菜单：**发行 → 原生App-云打包**
2. 选择平台（Android/iOS）
3. 配置证书：
   - **Android**：可使用 DCloud 公共证书（测试）或自有证书
   - **iOS**：需要 Apple 开发者证书和描述文件
4. 点击"打包"，等待完成
5. 下载生成的 APK/IPA 文件

#### 本地运行测试

**Android 真机：**
1. 手机开启"开发者选项"和"USB调试"
2. USB 连接电脑
3. HBuilderX：**运行 → 运行到手机或模拟器 → 选择设备**

**Android 模拟器：**
1. 安装模拟器（MuMu、雷电、夜神等）
2. 启动模拟器
3. HBuilderX 自动检测并连接

**iOS 真机：**
1. 需要 Mac + Xcode + 开发者证书
2. 数据线连接 iPhone
3. 信任开发者证书后运行

### 方式二：离线打包（高级）

适合需要深度定制原生功能的场景。

#### Android 离线打包

1. 下载 [Android 离线 SDK](https://nativesupport.dcloud.net.cn/AppDocs/download/android)

2. 构建前端资源：
```bash
npm run build:app
```

3. 复制资源到 SDK：
```
dist/build/app → SDK/assets/apps/__UNI__XXXXX/www
```

4. Android Studio 打开 SDK 项目

5. 修改 `build.gradle` 配置包名、版本

6. 生成签名 APK：**Build → Generate Signed Bundle/APK**

#### iOS 离线打包

1. 下载 [iOS 离线 SDK](https://nativesupport.dcloud.net.cn/AppDocs/download/ios)

2. 构建前端资源：
```bash
npm run build:app
```

3. 复制资源到 SDK：
```
dist/build/app → SDK/HBuilder-Hello/Pandora/apps/__UNI__XXXXX/www
```

4. Xcode 打开 `.xcodeproj`

5. 配置签名和 Bundle ID

6. 打包：**Product → Archive**

---

## 应用上架

### Android 应用上架

#### 准备材料

| 材料 | 要求 |
|------|------|
| APK 文件 | Release 签名 |
| 应用图标 | 512x512 PNG（无圆角） |
| 应用截图 | 至少 3 张，推荐 1080x1920 |
| 应用描述 | 简介 + 详细描述 |
| 隐私政策 | 网页链接（必需） |
| 软著证书 | 部分市场需要 |

#### 主流应用市场

| 市场 | 开发者平台 | 审核周期 |
|------|------------|---------|
| 华为应用市场 | https://developer.huawei.com | 1-3 天 |
| 小米应用商店 | https://dev.mi.com | 1-2 天 |
| OPPO 软件商店 | https://open.oppomobile.com | 1-2 天 |
| vivo 应用商店 | https://dev.vivo.com.cn | 1-2 天 |
| 应用宝 | https://open.qq.com | 2-5 天 |
| Google Play | https://play.google.com/console | 3-7 天 |

#### 上架流程

1. **注册开发者账号**：完成实名认证
2. **创建应用**：填写基本信息
3. **上传安装包**：APK/AAB 文件
4. **完善信息**：截图、描述、分类
5. **隐私合规**：提交隐私政策
6. **提交审核**：等待审核通过

#### 常见审核问题

| 问题 | 解决方案 |
|------|---------|
| 隐私政策不完善 | 详细说明数据收集、使用、存储 |
| 权限过多 | 只申请必要权限并说明用途 |
| 应用闪退 | 充分测试后再提交 |
| 内容违规 | 确保符合平台规范 |

### iOS 应用上架

#### 前置要求

- Mac 电脑（macOS）
- Apple 开发者账号（$99/年）
- Xcode 开发工具

#### 准备材料

| 材料 | 要求 |
|------|------|
| IPA 文件 | App Store 签名 |
| 应用图标 | 1024x1024 PNG（无透明） |
| 应用截图 | 6.5寸、5.5寸等多尺寸 |
| 应用描述 | 支持多语言 |
| 隐私政策 | 必须提供 URL |
| 年龄分级 | 填写问卷 |

#### 上架流程

1. **创建 App ID**
   - 登录 [Apple Developer](https://developer.apple.com)
   - Certificates, Identifiers & Profiles → Identifiers
   - 创建并配置 Bundle ID

2. **创建证书**
   - Distribution Certificate（分发证书）
   - App Store Provisioning Profile

3. **创建应用**
   - 登录 [App Store Connect](https://appstoreconnect.apple.com)
   - 我的 App → 新建
   - 填写应用信息

4. **上传 IPA**
   - Xcode → Organizer → Upload
   - 或使用 Transporter 工具

5. **填写商店信息**
   - 版本、截图、描述
   - 价格与销售范围
   - App 隐私

6. **提交审核**
   - 审核周期：1-7 天

#### 审核注意

- **4.2 最低功能**：不能是简单网页封装
- **5.1.1 数据隐私**：需要明确隐私政策
- **儿童类应用**：需符合 COPPA，限制广告和追踪

---

## 其他命令

```bash
# TypeScript 类型检查
npm run type-check

# 构建微信小程序
npm run build:mp-weixin

# 构建支付宝小程序
npm run build:mp-alipay

# 开发模式（支付宝小程序）
npm run dev:mp-alipay
```

---

## 常见问题

### Q1: 构建报错 "Cannot find module"

```bash
rm -rf node_modules
npm install
```

### Q2: H5 部署后页面空白

检查 `manifest.json` 中 `h5.router.base` 是否正确配置。

### Q3: APP 打包失败

1. 确认 DCloud 账号已登录
2. 检查 AppID 是否正确
3. 检查证书配置

### Q4: 图片加载失败

静态资源放在 `src/static` 目录，使用绝对路径：
```html
<image src="/static/image.png" />
```

### Q5: 小程序体积过大

1. 图片压缩或使用 CDN
2. 分包加载
3. 删除未使用的代码

---

## 版本历史

| 版本 | 日期 | 说明 |
|------|------|------|
| 1.0.0 | 2024-xx-xx | 首个正式版本 |

---

## 许可证

MIT License