# AGENTS.md

## 项目概述

这是一个基于 **Taro 框架的多端小程序开发模板**项目。它提供了一个统一的开发框架，用于构建跨平台小程序，可以编译到微信、小红书、支付宝、百度、字节跳动、H5、React Native、QQ、京东等多个平台。

## 技术栈

- **框架**: Taro 4.1.11 (基于 React)
- **语言**: TypeScript 5.9.3
- **UI 框架**: React 18.3.1
- **构建工具**: Webpack 5.105.4
- **包管理器**: pnpm

## 项目结构

```
taro-template/
├── src/                      # 源代码目录
│   ├── app.ts               # 应用入口组件
│   ├── app.config.ts        # 应用全局配置
│   ├── app.css              # 全局样式
│   ├── index.html           # HTML 模板（用于 H5）
│   ├── components/          # 公共组件
│   │   └── BottomNav/       # 底部导航组件
│   ├── pages/               # 页面组件
│   │   ├── index/           # 首页
│   │   │   ├── index.tsx    # 首页组件
│   │   │   ├── index.config.ts
│   │   │   └── index.css
│   │   ├── mine/            # 我的页面
│   │   │   ├── index.tsx
│   │   │   ├── index.config.ts
│   │   │   └── index.css
│   │   └── xhs/             # 小红书平台特定工具
│   │       └── utils/
│   │           └── is-xhs.ts
├── config/                  # 构建配置
├── types/                   # TypeScript 类型定义
├── project.xhs.json         # 小红书 IDE 配置
├── project.config.json      # 微信 IDE 配置
├── project.tt.json          # 字节跳动 IDE 配置
├── tsconfig.json            # TypeScript 配置
├── babel.config.js          # Babel 配置
├── kevisual.json            # Kevisual 平台配置
└── package.json             # 项目依赖
```

## 开发指南

### 创建新页面

使用 Taro CLI 创建新页面：

```bash
npm run new -- [pageName]
```

### 添加平台特定代码

使用 `Taro.getEnv()` 检测当前平台：

```typescript
import Taro from "@tarojs/taro";

const env = Taro.getEnv();
if (env === Taro.ENV_TYPE.WEAPP) {
  // 微信小程序特定代码
} else if (env === "xhs") {
  // 小红书特定代码
}
```

或使用提供的工具函数：

```typescript
import { isXHS } from './pages/xhs/utils/is-xhs';

if (isXHS()) {
  // 小红书特定代码
}
```

### 样式

项目使用标准 CSS，页面样式与组件放在一起：

- 全局样式: `src/app.css`
- 页面样式: `src/pages/{page}/{page}.css`

### 环境变量

- `.env.development` - 开发环境
- `.env.test` - 测试环境
- `.env.production` - 生产环境

## 配置文件说明

### app.config.ts

全局应用配置，包括页面注册、导航栏等。

### app.ts

应用入口组件，包含 `useLaunch` 生命周期钩子，用于应用初始化。在微信环境下会自动调用 `Taro.login`。

### project.xhs.json

小红书 IDE 特定配置（appid、编译设置等）。

### tsconfig.json

TypeScript 编译器选项，包括路径别名配置（`@/*` → `./src/*`）。

## AI 代理注意事项

1. 修改平台特定代码时，使用环境检测确保跨平台兼容性
2. 避免使用浏览器专用 API，应使用 Taro 提供的统一 API
3. 遵循现有的代码风格和目录结构
4. 添加新依赖时，确保与所有目标平台兼容
5. 项目使用 pnpm 作为包管理器