228 lines
4.9 KiB
Markdown
228 lines
4.9 KiB
Markdown
# 智柜宝 - 微信小程序
|
||
|
||
基于 Uni-App + Vue 3 构建的智能柜管理与电商一体化的微信小程序，支持多端发布（微信小程序、H5、App）。
|
||
|
||
## 📋 项目概述
|
||
|
||
本项目是一个智能柜管理系统，结合电商功能，提供以下核心能力：
|
||
- 智能柜租赁与管理
|
||
- 电商购物功能
|
||
- 用户订单管理
|
||
- 企业认证与审批流程
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **框架**: Uni-App + Vue 3 + TypeScript
|
||
- **构建工具**: Vite
|
||
- **状态管理**: Pinia
|
||
- **HTTP 客户端**: Alova
|
||
- **UI 组件**: wot-design-uni
|
||
- **样式引擎**: UnoCSS
|
||
- **代码规范**: ESLint
|
||
|
||
## 📦 环境要求
|
||
|
||
- Node.js >= 22
|
||
- pnpm >= 9
|
||
- 微信开发者工具 (开发微信小程序时需要)
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 2. 配置环境变量
|
||
|
||
在 `env/` 目录下创建相应的环境配置文件：
|
||
|
||
```bash
|
||
# .env.development - 开发环境
|
||
# .env.production - 生产环境
|
||
# .env.test - 测试环境
|
||
```
|
||
|
||
主要环境变量：
|
||
- `VITE_SERVER_BASEURL`: API 基础地址
|
||
- `VITE_WX_APPID`: 微信 AppID
|
||
- `VITE_APP_PROXY_ENABLE`: H5 代理开关
|
||
- `VITE_AUTH_MODE`: 认证模式 (single/dual token)
|
||
|
||
### 3. 开发运行
|
||
|
||
#### 微信小程序（主要平台）
|
||
|
||
```bash
|
||
pnpm dev:mp-weixin
|
||
```
|
||
|
||
然后使用微信开发者工具打开 `dist/dev/mp-weixin` 目录
|
||
|
||
#### H5 开发
|
||
|
||
```bash
|
||
pnpm dev:h5
|
||
```
|
||
|
||
访问 http://localhost:3000
|
||
|
||
#### App 开发
|
||
|
||
```bash
|
||
pnpm dev:app
|
||
```
|
||
|
||
## 🏗️ 构建部署
|
||
|
||
### 构建到不同平台
|
||
|
||
```bash
|
||
# 构建微信小程序
|
||
pnpm build:mp-weixin
|
||
|
||
# 构建 H5
|
||
pnpm build:h5
|
||
|
||
# 构建 App
|
||
pnpm build:app
|
||
|
||
# 测试环境构建
|
||
pnpm build:mp:test
|
||
```
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # 业务 API 模块
|
||
│ ├── ab98/ # AB98 模块接口
|
||
│ ├── cabinet/ # 智能柜接口
|
||
│ ├── shop/ # 电商接口
|
||
│ └── users/ # 用户接口
|
||
├── components/ # 可复用组件
|
||
├── config/ # 应用配置
|
||
├── hooks/ # 自定义 Hooks
|
||
│ ├── useRequest.ts # 请求封装
|
||
│ └── useUpload.ts # 上传封装
|
||
├── http/ # HTTP 客户端
|
||
│ ├── http.ts # Alova 封装
|
||
│ └── interceptor.ts # 拦截器
|
||
├── layouts/ # 布局组件
|
||
├── pages/ # 页面模块
|
||
│ ├── index/ # 首页
|
||
│ ├── login/ # 登录页
|
||
│ ├── me/ # 个人中心
|
||
│ └── ...
|
||
├── pages-sub/ # 小程序分包
|
||
├── pinia/ # 状态管理
|
||
│ ├── stores/ # Pinia Store
|
||
│ ├── wx.ts # 微信相关状态
|
||
│ └── ab98-user.ts # 用户状态
|
||
├── router/ # 路由配置
|
||
├── static/ # 静态资源
|
||
├── style/ # 全局样式
|
||
├── tabbar/ # 原生 Tabbar
|
||
├── types/ # TypeScript 类型定义
|
||
└── utils/ # 工具函数
|
||
```
|
||
|
||
## 🏛️ 项目架构
|
||
|
||
### 分层架构
|
||
|
||
```
|
||
API 层 → HTTP 层 → 状态管理层 → 组件层 → 页面层
|
||
```
|
||
|
||
### 核心模块
|
||
|
||
- **HTTP 客户端**: 基于 Alova 封装 `uni.request`，提供拦截器、自动 token 刷新等能力
|
||
- **状态管理**: 使用 Pinia，支持持久化存储
|
||
- **路由系统**: Uni-app 内置路由 + 拦截器
|
||
- **认证系统**: 支持微信和企业微信双模式认证
|
||
|
||
## 🧪 代码质量
|
||
|
||
### 类型检查
|
||
|
||
```bash
|
||
pnpm type-check
|
||
```
|
||
|
||
### 代码检查
|
||
|
||
```bash
|
||
# 检查
|
||
pnpm lint
|
||
|
||
# 自动修复
|
||
pnpm lint:fix
|
||
```
|
||
|
||
## 📚 文档
|
||
|
||
- [代码编写规范](./doc/代码编写规范.md)
|
||
- [项目清理计划](./doc/项目清理计划.md)
|
||
- [迁移工作总结](./doc/迁移工作总结.md)
|
||
- [wot-design-uni 组件文档](./doc/wot-design-uni/docs/)
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 关键配置文件
|
||
|
||
- `vite.config.ts`: Vite 配置，包含 Uni 插件、平台构建、H5 代理等
|
||
- `tsconfig.json`: TypeScript 配置，路径别名 `@/*` → `src/*`
|
||
- `uno.config.ts`: UnoCSS 配置，预设 + Carbon 图标
|
||
- `manifest.json`: 应用配置（名称、AppID、平台设置）
|
||
|
||
### H5 开发代理
|
||
|
||
在 `.env` 中设置：
|
||
```bash
|
||
VITE_APP_PROXY_ENABLE="true"
|
||
```
|
||
|
||
## 🐛 常见问题
|
||
|
||
### 构建失败
|
||
|
||
- 检查 Node.js 版本：`node -v` (需要 >= 22)
|
||
- 重新安装依赖：`pnpm install`
|
||
- 清理缓存：`rm -rf node_modules dist`
|
||
|
||
### 小程序问题
|
||
|
||
- 使用微信开发者工具打开 `dist/dev/mp-weixin` 目录
|
||
- 确保微信开发者工具已正确配置
|
||
|
||
### H5 代理问题
|
||
|
||
- 确认环境变量 `VITE_APP_PROXY_ENABLE="true"`
|
||
- 检查代理配置是否正确
|
||
|
||
### 类型错误
|
||
|
||
- 运行 `pnpm type-check` 检查类型
|
||
- 确认路径别名配置正确
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 🤝 贡献
|
||
|
||
请遵循 [代码编写规范](./doc/代码编写规范.md) 进行开发。
|
||
|
||
## 📞 支持
|
||
|
||
如有问题，请查看：
|
||
1. 项目文档 (./doc/ 目录)
|
||
2. wot-design-uni 组件文档
|
||
3. Uni-App 官方文档
|
||
|
||
---
|
||
|
||
**构建于 Uni-App + Vue 3** | **基于 unibest 3.13.0**
|