|
|
|
|
---
|
|
|
|
|
description:
|
|
|
|
|
globs:
|
|
|
|
|
alwaysApply: false
|
|
|
|
|
---
|
|
|
|
|
# 智慧生态小程序项目指南
|
|
|
|
|
|
|
|
|
|
## 项目概述
|
|
|
|
|
这是一个基于 uni-app 开发的跨平台应用，支持微信小程序和移动端 APP。项目采用 Vue 2.x 技术栈，后端使用 RuoYi 框架。
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
- **前端框架**: uni-app (Vue 2.x)
|
|
|
|
|
- **状态管理**: Vuex
|
|
|
|
|
- **后端框架**: RuoYi
|
|
|
|
|
- **加密库**: crypto-js
|
|
|
|
|
- **支持平台**: 微信小程序、Android/iOS APP、H5
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
|
|
|
|
|
### 核心文件
|
|
|
|
|
- [main.js](mdc:main.js) - 应用入口文件
|
|
|
|
|
- [App.vue](mdc:App.vue) - 根组件
|
|
|
|
|
- [manifest.json](mdc:manifest.json) - 应用配置文件
|
|
|
|
|
- [pages.json](mdc:pages.json) - 页面路由配置
|
|
|
|
|
- [config.js](mdc:config.js) - 全局配置（API 地址等）
|
|
|
|
|
|
|
|
|
|
### 目录结构
|
|
|
|
|
```
|
|
|
|
|
├── api/ # API 接口模块
|
|
|
|
|
│ ├── system/ # 系统管理接口
|
|
|
|
|
│ ├── task/ # 任务管理接口
|
|
|
|
|
│ ├── enterprise/ # 企业管理接口
|
|
|
|
|
│ ├── inspections/ # 检查管理接口
|
|
|
|
|
│ └── login.js # 登录接口
|
|
|
|
|
├── components/ # 公共组件
|
|
|
|
|
├── pages/ # 主包页面
|
|
|
|
|
│ ├── index.vue # 首页
|
|
|
|
|
│ ├── login.vue # 登录页
|
|
|
|
|
│ ├── task.vue # 任务页
|
|
|
|
|
│ ├── owner.vue # 业主页
|
|
|
|
|
│ └── enterprise.vue # 企业页
|
|
|
|
|
├── sub/ # 分包目录（优化小程序体积）
|
|
|
|
|
│ ├── task/ # 任务模块分包
|
|
|
|
|
│ ├── owner/ # 业主模块分包
|
|
|
|
|
│ ├── enterprise/ # 企业模块分包
|
|
|
|
|
│ └── inspection/ # 检查模块分包
|
|
|
|
|
├── store/ # Vuex 状态管理
|
|
|
|
|
│ ├── index.js # Store 入口
|
|
|
|
|
│ ├── getters.js # 全局 getters
|
|
|
|
|
│ └── modules/ # 状态模块
|
|
|
|
|
├── utils/ # 工具函数
|
|
|
|
|
│ ├── request.js # 请求封装
|
|
|
|
|
│ ├── auth.js # 认证相关
|
|
|
|
|
│ ├── permission.js # 权限控制
|
|
|
|
|
│ └── storage.js # 本地存储
|
|
|
|
|
└── static/ # 静态资源
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 开发规范
|
|
|
|
|
|
|
|
|
|
### API 调用规范
|
|
|
|
|
1. 所有 API 请求都应通过 `utils/request.js` 封装的方法
|
|
|
|
|
2. API 模块按功能领域组织在 `api/` 目录下
|
|
|
|
|
3. 使用统一的错误处理机制
|
|
|
|
|
|
|
|
|
|
### 路由权限控制
|
|
|
|
|
- 使用 [permission.js](mdc:permission.js) 进行路由拦截
|
|
|
|
|
- 白名单页面定义在 `whiteList` 数组中
|
|
|
|
|
- 未登录用户自动跳转到登录页
|
|
|
|
|
|
|
|
|
|
### 状态管理规范
|
|
|
|
|
1. 全局状态使用 Vuex 管理
|
|
|
|
|
2. 模块化组织 store，每个业务模块独立管理
|
|
|
|
|
3. 通过 getters 暴露需要的状态
|
|
|
|
|
|
|
|
|
|
### 组件开发规范
|
|
|
|
|
1. 公共组件放在 `components/` 目录
|
|
|
|
|
2. 页面组件放在 `pages/` 或 `sub/` 目录
|
|
|
|
|
3. 组件命名使用 PascalCase
|
|
|
|
|
4. 组件文件名与组件名保持一致
|
|
|
|
|
|
|
|
|
|
### 样式规范
|
|
|
|
|
- 使用 [uni.scss](mdc:uni.scss) 定义的全局样式变量
|
|
|
|
|
- 支持 scss 预处理器
|
|
|
|
|
- 遵循 uni-app 的样式编写规范
|
|
|
|
|
|
|
|
|
|
## 配置说明
|
|
|
|
|
|
|
|
|
|
### 环境配置
|
|
|
|
|
在 [config.js](mdc:config.js) 中配置：
|
|
|
|
|
- `baseUrl`: API 服务器地址
|
|
|
|
|
- `baseApi`: API 基础路径
|
|
|
|
|
- `appInfo`: 应用基本信息
|
|
|
|
|
|
|
|
|
|
### 小程序配置
|
|
|
|
|
在 [manifest.json](mdc:manifest.json) 中的 `mp-weixin` 节点配置：
|
|
|
|
|
- `appid`: 小程序 AppID
|
|
|
|
|
- `permission`: 权限申请说明
|
|
|
|
|
- `requiredPrivateInfos`: 隐私接口声明
|
|
|
|
|
|
|
|
|
|
## 常用功能模块
|
|
|
|
|
|
|
|
|
|
### 登录认证
|
|
|
|
|
- 登录接口: `api/login.js`
|
|
|
|
|
- Token 管理: `utils/auth.js`
|
|
|
|
|
- 权限验证: `utils/permission.js`
|
|
|
|
|
|
|
|
|
|
### 文件上传
|
|
|
|
|
- 上传工具: `utils/upload.js`
|
|
|
|
|
- 支持图片、文件上传到服务器
|
|
|
|
|
|
|
|
|
|
### 数据字典
|
|
|
|
|
- 字典工具: `utils/dict.js`
|
|
|
|
|
- 统一管理下拉选项等枚举数据
|
|
|
|
|
|
|
|
|
|
## 注意事项
|
|
|
|
|
1. 开发时注意区分平台差异，使用条件编译
|
|
|
|
|
2. 小程序有包大小限制，合理使用分包
|
|
|
|
|
3. 遵循 uni-app 的生命周期和 API 使用规范
|
|
|
|
|
4. 注意处理网络请求的异常情况
|
