hzdyjs/mobile

智慧校园 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）
• 刘海屏、折叠屏适配
• 安全区域处理

开发命令

# 安装依赖
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

构建命令

# H5构建
npm run build:h5

# 微信小程序构建
npm run build:mp-weixin

# App构建
npm run build:app

开发规范

代码风格

• 使用 2 个空格缩进
• 使用单引号
• 不使用分号
• 组件名使用 PascalCase
• 文件名使用 kebab-case

目录规范

• 页面组件放在 pages/ 目录
• 通用组件放在 components/ 目录
• 工具函数放在 utils/ 目录
• 静态资源放在 static/ 目录

API 使用示例

import { api, storage } from '@/utils/request';

// 发起请求
const data = await api.getUserInfo();

// 设置缓存（30分钟过期）
storage.set('userInfo', data, 30 * 60);

// 获取缓存
const cachedData = storage.get('userInfo');

SSE 实时数据示例

import { messageManager } from '@/utils/sse';

// 连接实时消息
messageManager.connect('userId123');

// 订阅消息
messageManager.subscribe('notification', (data) => {
    console.log('收到通知:', data);
});

// 断开连接
messageManager.disconnect();

设备适配示例

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. 完善错误处理和用户反馈