智柜宝 - 微信小程序

基于 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. 安装依赖

pnpm install

2. 配置环境变量

在 env/ 目录下创建相应的环境配置文件：

# .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. 开发运行

微信小程序（主要平台）

pnpm dev:mp-weixin

然后使用微信开发者工具打开 dist/dev/mp-weixin 目录

H5 开发

pnpm dev:h5

访问 http://localhost:3000

App 开发

pnpm dev:app

🏗️ 构建部署

构建到不同平台

# 构建微信小程序
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 内置路由 + 拦截器
• 认证系统: 支持微信和企业微信双模式认证

🧪 代码质量

类型检查

pnpm type-check

代码检查

# 检查
pnpm lint

# 自动修复
pnpm lint:fix

📚 文档

• 代码编写规范
• 项目清理计划
• 迁移工作总结
• wot-design-uni 组件文档

🔧 配置说明

关键配置文件

• vite.config.ts: Vite 配置，包含 Uni 插件、平台构建、H5 代理等
• tsconfig.json: TypeScript 配置，路径别名 @/* → src/*
• uno.config.ts: UnoCSS 配置，预设 + Carbon 图标
• manifest.json: 应用配置（名称、AppID、平台设置）

H5 开发代理

在 .env 中设置：

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

🤝 贡献

请遵循 代码编写规范 进行开发。

📞 支持

如有问题，请查看：

1. 项目文档 (./doc/ 目录)
2. wot-design-uni 组件文档
3. Uni-App 官方文档

---

构建于 Uni-App + Vue 3 | 基于 unibest 3.13.0