zlwu
28232d5d46
- 🔥 完全重写 .cursor/cursorrules-mobile.md (940行) * 基于实际mobile工程Vue 3.4.21+uniapp+uview-plus架构 * 移除所有JeeSite相关内容，精准匹配实际项目 * 新增11个完整章节：技术栈、项目结构、页面开发、组件规范等 - 📚 创建完整规范文档 docs/开发文档/移动端开发规范总结.md (800+行) * 涵盖从项目架构到部署的全流程指导 * 提供可直接使用的页面和组件模板 * 包含现代CSS变量设计系统和用户体验优化 - 🔄 同步更新主配置文件 .cursorrules * 更新移动端技术栈描述 * 调整为Vue 3.4.21+uniapp+uview-plus 3.4.45架构 - 📝 完善变更记录 * 详细记录规范更新背景和技术价值 * 为后续维护提供完整历史记录 核心价值：解决规范与实际项目不匹配问题，为Cursor AI提供准确的移动端开发上下文，确保生成代码完全符合实际项目架构。
178 lines
3.8 KiB
Markdown
178 lines
3.8 KiB
Markdown
# 智慧校园 UniApp 项目
|
||
|
||
基于 UniApp + Vue3 + uView-plus 的跨平台智慧校园应用。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: UniApp + Vue3
|
||
- **UI 组件库**: uView-plus
|
||
- **代码规范**: ESLint
|
||
- **样式**: SCSS
|
||
- **不使用**: TypeScript
|
||
|
||
## 支持平台
|
||
|
||
- 微信小程序
|
||
- H5
|
||
- iOS App
|
||
- Android App
|
||
- 其他小程序平台
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── pages/ # 页面目录
|
||
│ ├── index/ # 首页
|
||
│ ├── workbench/ # 办公中心
|
||
│ └── profile/ # 我的
|
||
├── utils/ # 工具函数
|
||
│ ├── request.js # API请求工具
|
||
│ ├── sse.js # SSE实时数据工具
|
||
│ └── device.js # 设备兼容性工具
|
||
├── static/ # 静态资源
|
||
├── App.vue # 应用入口
|
||
├── main.js # 项目入口
|
||
├── pages.json # 页面配置
|
||
└── uni.scss # 全局样式
|
||
```
|
||
|
||
## 核心功能
|
||
|
||
### 1. 底部导航
|
||
|
||
- 首页：展示校园服务快捷入口
|
||
- 办公中心：办公应用和功能
|
||
- 我的：个人信息和设置
|
||
|
||
### 2. 数据管理
|
||
|
||
- RESTful API 接口
|
||
- 智能缓存策略（支持过期时间）
|
||
- SSE 实时数据推送（H5 环境使用原生 EventSource，小程序环境使用轮询）
|
||
|
||
### 3. 设备兼容性
|
||
|
||
- 低端设备检测和性能优化
|
||
- 网络环境自适应（2G/3G/4G/5G/WiFi）
|
||
- 刘海屏、折叠屏适配
|
||
- 安全区域处理
|
||
|
||
## 开发命令
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# H5开发
|
||
npm run dev:h5
|
||
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
|
||
# Android开发
|
||
npm run dev:app-android
|
||
|
||
# iOS开发
|
||
npm run dev:app-ios
|
||
|
||
# 代码检查
|
||
npm run lint
|
||
|
||
# 代码自动修复
|
||
npm run lint:fix
|
||
```
|
||
|
||
## 构建命令
|
||
|
||
```bash
|
||
# H5构建
|
||
npm run build:h5
|
||
|
||
# 微信小程序构建
|
||
npm run build:mp-weixin
|
||
|
||
# App构建
|
||
npm run build:app
|
||
```
|
||
|
||
## 开发规范
|
||
|
||
### 代码风格
|
||
|
||
- 使用 2 个空格缩进
|
||
- 使用单引号
|
||
- 不使用分号
|
||
- 组件名使用 PascalCase
|
||
- 文件名使用 kebab-case
|
||
|
||
### 目录规范
|
||
|
||
- 页面组件放在 `pages/` 目录
|
||
- 通用组件放在 `components/` 目录
|
||
- 工具函数放在 `utils/` 目录
|
||
- 静态资源放在 `static/` 目录
|
||
|
||
## API 使用示例
|
||
|
||
```javascript
|
||
import { api, storage } from '@/utils/request';
|
||
|
||
// 发起请求
|
||
const data = await api.getUserInfo();
|
||
|
||
// 设置缓存（30分钟过期）
|
||
storage.set('userInfo', data, 30 * 60);
|
||
|
||
// 获取缓存
|
||
const cachedData = storage.get('userInfo');
|
||
```
|
||
|
||
## SSE 实时数据示例
|
||
|
||
```javascript
|
||
import { messageManager } from '@/utils/sse';
|
||
|
||
// 连接实时消息
|
||
messageManager.connect('userId123');
|
||
|
||
// 订阅消息
|
||
messageManager.subscribe('notification', (data) => {
|
||
console.log('收到通知:', data);
|
||
});
|
||
|
||
// 断开连接
|
||
messageManager.disconnect();
|
||
```
|
||
|
||
## 设备适配示例
|
||
|
||
```javascript
|
||
import { deviceUtils, adaptUtils } from '@/utils/device';
|
||
|
||
// 检测设备类型
|
||
const deviceType = deviceUtils.getDeviceType();
|
||
|
||
// 获取安全区域样式
|
||
const safeAreaStyle = adaptUtils.getSafeAreaStyle();
|
||
|
||
// 判断是否为低端设备
|
||
const isLowEnd = deviceUtils.isLowEndDevice();
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **图标资源**: 当前底部导航使用文字显示，实际开发时需要替换为对应的图标文件
|
||
2. **API 地址**: 请在 `utils/request.js` 中配置正确的后端 API 地址
|
||
3. **SSE 服务**: SSE 功能需要后端支持，在小程序环境会自动降级为轮询
|
||
4. **权限配置**: 使用定位、相机等原生功能时需要在 `manifest.json` 中配置相应权限
|
||
|
||
## 下一步开发
|
||
|
||
1. 根据设计原型完善页面 UI
|
||
2. 接入后端 API 接口
|
||
3. 添加具体业务功能模块
|
||
4. 配置推送、定位等原生能力
|
||
5. 添加图标资源文件
|
||
6. 完善错误处理和用户反馈
|