3.5 KiB
3.5 KiB
校园管理移动端
基于 uniapp + uView UI 构建的校园管理移动端应用。
项目特性
- 🚀 基于 uniapp 框架,支持多端部署
- 🎨 采用 uView UI 组件库,界面美观
- 📱 响应式设计,适配各种屏幕尺寸
- 🔐 完整的登录认证系统
- 📊 丰富的数据展示组件
- 🛠 完善的工具函数和 API 封装
技术栈
- 框架: uniapp (Vue 3)
- UI 库: uView UI 2.x
- 状态管理: Vuex
- 网络请求: uni.request 封装
- 样式: SCSS
- 构建工具: Vue CLI
项目结构
xgxt-mobile/
├── pages/ # 页面文件
│ ├── login/ # 登录页面
│ ├── index/ # 首页
│ ├── workbench/ # 工作台
│ └── mine/ # 我的页面
├── static/ # 静态资源
│ └── tabbar/ # 底部导航图标
├── utils/ # 工具函数
│ ├── auth.js # 认证相关
│ └── request.js # 网络请求
├── api/ # API接口
│ ├── auth.js # 认证接口
│ └── common.js # 通用接口
├── uni_modules/ # uni_modules目录
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
功能模块
1. 登录认证
- 用户名密码登录
- 登录状态保持
- 自动登录检查
- 退出登录
2. 首页
- 用户信息展示
- 轮播图
- 快捷功能入口
- 数据统计
- 最新动态
3. 工作台
- 工作统计
- 待办事项
- 工作流程
- 快速操作
4. 我的页面
- 个人信息
- 功能设置
- 应用配置
- 退出登录
安装和运行
1. 安装依赖
npm install
2. 安装 uView UI
npm install uview-ui@2.0.36
3. 运行项目
# H5端开发
npm run dev:h5
# 微信小程序
npm run dev:mp-weixin
# APP端
npm run dev:app-plus
4. 构建项目
# H5端构建
npm run build:h5
# 微信小程序构建
npm run build:mp-weixin
# APP端构建
npm run build:app-plus
默认登录信息
- 用户名: admin
- 密码: admin
配置说明
1. 网络请求配置
在 utils/request.js 中修改 BASE_URL 为实际的 API 地址:
const BASE_URL = 'https://your-api-domain.com';
2. 应用配置
在 manifest.json 中修改应用基本信息:
{
"name": "你的应用名称",
"appid": "你的应用ID",
"description": "应用描述"
}
3. 页面配置
在 pages.json 中配置页面路由和 tabBar:
- 添加新页面路由
- 修改 tabBar 图标和文字
- 配置页面样式
开发规范
1. 命名规范
- 文件名使用小写+连字符
- 组件名使用大驼峰
- 变量名使用小驼峰
2. 代码规范
- 使用 ESLint 进行代码检查
- 统一使用 2 空格缩进
- 使用分号结尾
3. 提交规范
- feat: 新功能
- fix: 修复 bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构
- test: 测试相关
注意事项
- 请确保已安装 uView UI 插件
- 静态资源文件需要替换为实际的图片文件
- API 接口需要根据后端实际情况进行调整
- 不同平台可能需要特殊配置
许可证
MIT License