mini-programs/_doc/小程序框架文档说明.md

小程序框架文档说明

📋 目录

• 项目结构
• 不可修改目录
• 可修改目录
• 使用组件的方式

---

项目结构

mini-programs/
├── src/
│   ├── components/          # ⚠️ 不可修改（公共组件）
│   ├── utils/               # ✅ 可修改（工具函数）
│   ├── services/            # ✅ 可修改（API 服务）
│   ├── store/               # ✅ 可修改（状态管理）
│   ├── config/              # ✅ 可修改（配置文件）
│   ├── scss/                # ✅ 可修改（样式文件）
│   ├── static/              # ✅ 可修改（静态资源）
│   ├── container/           # ✅ 可修改（容器组件）
│   ├── context/             # ✅ 可修改（上下文）
│   ├── game_pages/          # ✅ 可修改（球局页面）
│   ├── home_pages/          # ✅ 可修改（首页）
│   ├── login_pages/         # ✅ 可修改（登录页面）
│   ├── main_pages/          # ✅ 可修改（主页面）
│   ├── order_pages/         # ✅ 可修改（订单页面）
│   ├── other_pages/         # ✅ 可修改（其他页面）
│   ├── publish_pages/       # ✅ 可修改（发布页面）
│   └── user_pages/          # ✅ 可修改（用户页面）
├── config/                  # 构建配置
├── docs/                    # 文档
└── types/                   # 类型定义

---

不可修改目录

⚠️ src/components/ - 公共组件目录

该目录下的所有组件禁止直接修改，包括：

• 所有组件文件夹（如 ActivityTypeSwitch/、CommonPopup/ 等）
• index.ts - 组件统一导出文件
• index.types.ts - 组件类型定义文件

如需定制功能，请通过以下方式：

1. 通过 Props 配置

<CommonPopup visible={visible} title="自定义标题" />

2. 通过样式覆盖

.custom-wrapper {
  .nut-popup {
    // 自定义样式
  }
}

3. 创建业务组件封装

import { CommonPopup } from '@/components';

export const CustomPopup = (props) => {
  return <CommonPopup {...props} customConfig={...} />;
};

---

可修改目录

以下目录可以根据业务需求自由修改：

业务页面目录

• src/game_pages/ - 球局相关页面
• src/home_pages/ - 首页相关页面
• src/login_pages/ - 登录相关页面
• src/main_pages/ - 主页面
• src/order_pages/ - 订单相关页面
• src/other_pages/ - 其他页面
• src/publish_pages/ - 发布相关页面
• src/user_pages/ - 用户相关页面

公共资源目录（可修改）

• src/utils/ - 工具函数
• src/services/ - API 服务
• src/store/ - 状态管理
• src/config/ - 配置文件
• src/scss/ - 样式文件
• src/static/ - 静态资源
• src/container/ - 容器组件
• src/context/ - 上下文

---

使用组件的方式

导入组件

// 从统一导出文件导入
import { CommonPopup, CommonDialog, ImageUpload } from '@/components';

常用组件列表

• CommonPopup - 通用弹窗
• CommonDialog - 通用对话框
• ImageUpload - 图片上传
• FormSwitch - 表单开关
• TimeSelector - 时间选择器
• Range - 范围选择
• Comments - 评论组件
• EmptyState - 空状态
• 更多组件请查看 src/components/index.ts

---

📝 注意事项

• ❌ 禁止直接修改 src/components/ 下的任何文件
• ✅ 允许修改其他所有目录和文件
• ✅ 如需定制组件功能，请通过 Props、样式覆盖或封装新组件的方式实现