# 智柜宝 - 微信小程序 基于 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**