Files

abearxiong 02dd31e85c feat: update project structure and add new pages

- 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.

2026-03-12 18:11:00 +08:00

3.5 KiB

Raw Blame History

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 创建新页面：

npm run new -- [pageName]

添加平台特定代码

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

import Taro from "@tarojs/taro";

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

或使用提供的工具函数：

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 代理注意事项

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

3.5 KiB Raw Blame History Unescape Escape