萝卜打印 - 微信小程序

付费打印服务微信小程序前端项目，基于 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

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;

开发命令

# 安装依赖
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）