abearxiong
02dd31e85c
- Changed the clone URL in README to point to the new webpack-taro-template. - Added 'mine' page to app configuration. - Enhanced index page styles and structure. - Created BottomNav component for navigation. - Added configuration and styles for the new 'mine' page. - Introduced navItems configuration for navigation. - Added AGENTS.md for project overview and development guidelines.
122 lines
3.5 KiB
Markdown
122 lines
3.5 KiB
Markdown
# 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 作为包管理器
|