# Taro-OHOS 项目代码目录结构解析

 

合理的目录结构是项目可维护性的基础，本文将详细解析 `taro-ohos-demo` 项目的代码组织方式，帮助开发者快速理解项目架构。

 

---

 

## 一、根目录核心文件

根目录存放项目级配置与元数据，直接影响构建、编译和协作流程：

 

| 文件/目录 | 类型 | 说明 |

|---------------------|------------|----------------------------------------------------------------------|

| `.editorconfig` | 配置文件 | 统一编辑器代码风格（缩进、换行符等），确保团队协作格式一致。 |

| `.env.*` | 环境变量 | 包含 `development`（开发）、`production`（生产）、`test`（测试）环境配置，存储密钥、API地址等。 |

| `.eslintrc` | 代码检查 | ESLint 规则配置，约束 TypeScript/JavaScript 代码质量（如变量未使用、类型缺失警告）。 |

| `package.json` | 依赖管理 | 项目元数据（名称、版本）、`npm` 依赖（如 `@tarojs/taro`）及脚本命令（`npm run dev`）。 |

| `project.config.json`| 小程序配置 | 针对鸿蒙（OHOS）平台的编译配置（如包名、调试模式、插件启用）。 |

| `tsconfig.json` | TypeScript | 定义 TS 编译选项（如 `target`、`module`）及类型检查范围（`include`/`exclude`）。 |

 

---

 

## 二、核心业务目录 `src/`

`src` 是项目的核心代码目录，包含应用逻辑、样式和入口文件：

 

### 1. 应用入口 `app.*`

- `app.config.ts`：全局应用配置（如 `pages` 注册所有页面路径，`window` 定义导航栏样式）。

- `app.scss`：全局样式（如根字体大小、通用类名 `.container`）。

- `app.ts`：应用生命周期入口（`onLaunch` 启动时初始化，`onShow` 监听应用切前台）。

 

### 2. 页面目录 `pages/`

按功能拆分页面，每个页面包含 `.tsx`（逻辑）、`.scss`（样式）、`.config.ts`（页面配置）：

- `index/`：首页（新闻列表页），包含 `index.tsx`（列表渲染）、`index.scss`（列表项样式）。

- `detail/`：详情页（新闻内容页），包含 `detail.tsx`（参数接收与内容展示）、`detail.scss`（图片容器样式）。

 

### 3. 其他辅助目录

- `index.html`：H5 端入口模板（Taro 多端编译时生成不同平台代码的基础）。

 

---

 

## 三、配置与类型目录

- `config/`：按环境拆分的构建配置（`dev.ts` 开发模式热更新、`prod.ts` 生产模式代码压缩）。

- `types/`：全局类型声明（`global.d.ts` 定义 `Taro` 扩展类型，避免 `any` 类型滥用）。

 

---

 

## 四、总结

本项目采用「按功能分层+按页面拆分」的结构，根目录聚焦配置与协作，`src` 目录集中业务逻辑，既保证了开发效率（快速定位页面），又通过类型声明和代码检查工具（ESLint）提升了代码质量。理解此结构后，开发者可快速上手新增页面（如 `article/`）或修改全局样式（`app.scss`），降低维护成本。