157 lines
4.3 KiB
Markdown
157 lines
4.3 KiB
Markdown
|
# 萝卜打印 - 微信小程序
|
|||
|
|
|
|||
|
|
付费打印服务微信小程序前端项目，基于 Taro + React + TypeScript。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
| 技术 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| 框架 | Taro 4.x + React |
|
|||
|
|
| 语言 | TypeScript |
|
|||
|
|
| 状态管理 | Redux Toolkit |
|
|||
|
|
| 编译工具 | Vite |
|
|||
|
|
| UI | 自定义组件 |
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── api/ # API 接口层
|
|||
|
|
│ ├── auth.ts # 认证服务
|
|||
|
|
│ ├── file.ts # 文件服务
|
|||
|
|
│ ├── order.ts # 订单服务
|
|||
|
|
│ ├── printer.ts # 打印机服务
|
|||
|
|
│ ├── price.ts # 价目服务
|
|||
|
|
│ └── pay.ts # 支付服务
|
|||
|
|
├── config/ # 配置文件
|
|||
|
|
│ └── api.ts # API 地址配置
|
|||
|
|
├── store/ # Redux 状态管理
|
|||
|
|
│ ├── index.ts # Store 入口
|
|||
|
|
│ ├── hooks.ts # Hooks
|
|||
|
|
│ └── slices/ # Slice 模块
|
|||
|
|
│ ├── userSlice.ts
|
|||
|
|
│ ├── orderSlice.ts
|
|||
|
|
│ ├── fileSlice.ts
|
|||
|
|
│ └── printerSlice.ts
|
|||
|
|
├── pages/ # 页面
|
|||
|
|
│ ├── index/ # 首页
|
|||
|
|
│ ├── login/ # 登录页
|
|||
|
|
│ ├── user/ # 用户中心
|
|||
|
|
│ ├── file/ # 文件管理
|
|||
|
|
│ └── order/ # 订单管理
|
|||
|
|
├── components/ # 公共组件
|
|||
|
|
│ ├── OrderCard/ # 订单卡片
|
|||
|
|
│ └── PriceTable/ # 价目表
|
|||
|
|
├── types/ # TypeScript 类型
|
|||
|
|
│ ├── user.ts
|
|||
|
|
│ ├── order.ts
|
|||
|
|
│ ├── file.ts
|
|||
|
|
│ ├── printer.ts
|
|||
|
|
│ └── price.ts
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
│ ├── format.ts # 格式化工具
|
|||
|
|
│ └── storage.ts # 本地存储
|
|||
|
|
└── hooks/ # 自定义 Hooks
|
|||
|
|
└── useAuth.ts # 认证 Hook
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 环境配置
|
|||
|
|
|
|||
|
|
API 地址配置：`src/config/api.ts`
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
const DEV_API_URL = 'http://localhost:8080';
|
|||
|
|
const PROD_API_URL = 'http://localhost:8080';
|
|||
|
|
|
|||
|
|
export const API_BASE_URL = process.env.NODE_ENV === 'development' ? DEV_API_URL : PROD_API_URL;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发命令
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装依赖
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 开发模式（微信小程序）
|
|||
|
|
npm run dev:weapp
|
|||
|
|
|
|||
|
|
# 生产构建
|
|||
|
|
npm run build:weapp
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 微信开发者工具配置
|
|||
|
|
|
|||
|
|
1. 导入项目目录：`dist/miniprogram`
|
|||
|
|
2. AppID：使用 `touristappid` 或自己申请的
|
|||
|
|
3. 启动开发服务器后点击刷新
|
|||
|
|
|
|||
|
|
## 主要功能
|
|||
|
|
|
|||
|
|
### 用户模块
|
|||
|
|
- 手机号 + 验证码登录
|
|||
|
|
- 微信一键登录
|
|||
|
|
- 用户信息管理
|
|||
|
|
- 退出登录
|
|||
|
|
|
|||
|
|
### 文件模块
|
|||
|
|
- 文件上传
|
|||
|
|
- 文件列表
|
|||
|
|
- 文件删除
|
|||
|
|
- 打印功能
|
|||
|
|
|
|||
|
|
### 订单模块
|
|||
|
|
- 创建订单
|
|||
|
|
- 订单列表
|
|||
|
|
- 订单详情
|
|||
|
|
- 取消订单
|
|||
|
|
|
|||
|
|
### 打印模块
|
|||
|
|
- 选择打印规格（A4/A3/照片）
|
|||
|
|
- 选择打印颜色（黑白/彩色）
|
|||
|
|
- 选择份数
|
|||
|
|
- 选择打印机
|
|||
|
|
|
|||
|
|
## 页面说明
|
|||
|
|
|
|||
|
|
| 页面 | 路径 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 首页 | `/pages/index/index` | 主入口，显示快捷操作和价目表 |
|
|||
|
|
| 登录 | `/pages/login/index` | 手机号登录/微信登录 |
|
|||
|
|
| 用户中心 | `/pages/user/index` | 用户信息、余额、菜单 |
|
|||
|
|
| 我的文件 | `/pages/file/index` | 文件列表管理 |
|
|||
|
|
| 上传文件 | `/pages/file/upload/index` | 文件上传 |
|
|||
|
|
| 我的订单 | `/pages/order/index` | 订单列表 |
|
|||
|
|
| 订单详情 | `/pages/order/detail/index` | 订单详情 |
|
|||
|
|
|
|||
|
|
## 代码规范
|
|||
|
|
|
|||
|
|
### 导入规范
|
|||
|
|
- Redux 类型从 `@reduxjs/toolkit` 导入
|
|||
|
|
- API_BASE_URL 从 `../config/api` 导入
|
|||
|
|
|
|||
|
|
### 函数缓存
|
|||
|
|
- 使用 `useCallback` 缓存事件处理函数
|
|||
|
|
- 使用 `useMemo` 缓存计算结果
|
|||
|
|
|
|||
|
|
### 命名规范
|
|||
|
|
- 组件使用 PascalCase（如 `OrderCard`）
|
|||
|
|
- 样式类使用小写 + 连字符（如 `.order-card`）
|
|||
|
|
- 常量使用全大写（如 `BASE_URL`）
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
### 2026-03-30
|
|||
|
|
- 项目初始化
|
|||
|
|
- 完成首页、登录页、用户中心、文件管理、订单管理页面开发
|
|||
|
|
- 实现 Redux Toolkit 状态管理
|
|||
|
|
- 实现 API 接口层统一管理
|
|||
|
|
- 优化手机号输入验证
|
|||
|
|
- 美化界面样式（淡雅配色）
|
|||
|
|
|
|||
|
|
### 技术优化
|
|||
|
|
- 使用 `useCallback` 缓存函数减少重复创建
|
|||
|
|
- 使用 `useMemo` 缓存计算结果
|
|||
|
|
- API URL 统一配置文件管理
|
|||
|
|
- Redux 导入路径修正为 `@reduxjs/toolkit`
|
|||
|
|
- 提取共享 request 函数消除代码重复（`src/utils/request.ts`）
|