# 若依app
**Repository Path**: answer-miniprogram/ruoyi-app
## Basic Information
- **Project Name**: 若依app
- **Description**: 若依vue集成satoken+mybatis-plus，实现若依app支持H5和微信小程序，支持app端代码生成
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-01-06
- **Last Updated**: 2026-01-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 若依移动端 (RuoYi-App)
[](LICENSE)
[](manifest.json)
[](https://vuejs.org/)
[](https://uniapp.dcloud.net.cn/)
基于 UniApp + Vue3 开发的若依管理系统移动端应用，提供完整的后台管理功能移动化解决方案。
## 🔗 配套项目
- **后端服务**: [ruoyi-background](https://gitee.com/tranquility-behind-the-waves/ruoyi-background.git)
- **管理端**: [ruoyi-vue3](https://gitee.com/tranquility-behind-the-waves/ruoyi-vue3.git)
- **移动端**: [ruoyi-app](https://gitee.com/tranquility-behind-the-waves/ruoyi-app.git) (当前项目)
## 📱 项目简介
若依移动端是基于若依后台管理系统开发的跨平台移动应用，支持微信小程序、H5、App等多端部署。采用现代化的前端技术栈，提供流畅的用户体验和完整的管理功能。
### ✨ 核心特性
- 🚀 **跨平台支持** - 一套代码，多端运行（微信小程序、H5、App）
- 🎨 **现代化UI** - 基于设计系统的统一视觉风格
- 🔐 **完整权限** - 基于角色的权限控制系统
- 📊 **实时监控** - 系统监控、在线用户、操作日志等
- 🛠️ **系统管理** - 用户、角色、部门、菜单等完整管理功能
- 📱 **响应式设计** - 适配各种屏幕尺寸
- 🎯 **组件化开发** - 丰富的UI组件库
- 🔄 **状态管理** - 基于Pinia的现代化状态管理
## 🏗️ 技术栈
### 前端框架
- **UniApp 3.x** - 跨平台开发框架
- **Vue 3** - 渐进式JavaScript框架
- **Vite** - 现代化构建工具
- **Pinia** - Vue状态管理库
### UI组件
- **uni-ui** - UniApp官方UI组件库
- **自定义组件** - 业务定制化组件
### 开发工具
- **SCSS** - CSS预处理器
- **ES6+** - 现代JavaScript语法
- **TypeScript** - 类型安全的JavaScript
## 📁 项目结构
```
RuoYi-App/
├── api/ # API接口定义
│ ├── login.js # 登录相关接口
│ ├── monitor/ # 监控模块接口
│ └── system/ # 系统管理接口
├── components/ # 自定义组件
│ ├── da-dropdown/ # 下拉组件
│ ├── da-tree/ # 树形组件
│ ├── DictTag/ # 字典标签
│ └── select/ # 选择器组件
├── pages/ # 页面文件
│ ├── index.vue # 首页
│ ├── login.vue # 登录页
│ ├── mine/ # 个人中心
│ ├── work/ # 工作台
│ ├── system/ # 系统管理
│ ├── monitor/ # 系统监控
│ └── common/ # 通用页面
├── static/ # 静态资源
│ ├── images/ # 图片资源
│ ├── font/ # 字体文件
│ └── favicon.ico # 网站图标
├── store/ # 状态管理
│ ├── index.js # Store入口
│ └── modules/ # 模块化Store
├── styles/ # 样式文件
│ ├── theme.scss # 主题配置
│ ├── common.scss # 通用样式
│ └── mixins.scss # 样式混入
├── utils/ # 工具函数
│ ├── request.js # 网络请求
│ ├── auth.js # 认证工具
│ ├── common.js # 通用工具
│ └── ruoyi.js # 若依工具
├── uni_modules/ # UniApp插件
├── App.vue # 应用入口
├── main.js # 主入口文件
├── manifest.json # 应用配置
├── pages.json # 页面配置
└── vite.config.js # 构建配置
```
## 🚀 快速开始
### 环境要求
- Node.js >= 16.0.0
- HBuilderX >= 3.6.0 (推荐)
- 微信开发者工具 (小程序开发)
### 安装依赖
```bash
# 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-App.git
# 进入项目目录
cd RuoYi-App
# 安装依赖 (如果使用HBuilderX，可跳过此步骤)
npm install
```
### 配置说明
1. **修改API地址**
编辑 `config.js` 文件，修改后端API地址：
```javascript
export default {
baseUrl: 'http://your-backend-api.com', // 修改为你的后端地址
// ... 其他配置
}
```
2. **配置小程序AppID**
编辑 `manifest.json` 文件，修改微信小程序AppID：
```json
{
"mp-weixin": {
"appid": "your-wechat-appid"
}
}
```
### 运行项目
#### HBuilderX运行
1. 使用HBuilderX打开项目
2. 选择运行到浏览器/微信开发者工具/手机App
#### 命令行运行
```bash
# H5端
npm run dev:h5
# 微信小程序
npm run dev:mp-weixin
# App端
npm run dev:app-plus
```
## 📱 功能模块
### 🏠 首页
- 用户信息展示
- 快捷功能入口
- 系统公告
- 数据统计
### 👤 个人中心
- 个人信息管理
- 头像修改
- 密码修改
- 应用设置
- 帮助中心
### 💼 工作台
- 系统管理模块
- 监控管理模块
- 快捷操作入口
### 🔧 系统管理
- **用户管理** - 用户增删改查、状态管理、角色分配
- **角色管理** - 角色权限配置、用户分配
- **部门管理** - 组织架构管理
- **菜单管理** - 系统菜单配置
- **字典管理** - 数据字典维护
- **岗位管理** - 岗位信息管理
- **参数设置** - 系统参数配置
- **通知公告** - 系统公告管理
- **系统设置** - 系统配置管理
### 📊 系统监控
- **在线用户** - 实时在线用户监控
- **登录日志** - 用户登录记录
- **操作日志** - 系统操作记录
- **服务监控** - 服务器性能监控
## 📸 应用截图
### 主要页面
### 登录注册
### 系统管理
用户管理
|
角色管理
|
部门管理
|
菜单管理
|
字典管理
|
字典数据管理
|
岗位管理
|
参数设置
|
通知公告
|
系统设置
|
### 系统监控
## 🎨 设计系统
项目采用统一的设计系统，确保视觉一致性：
### 色彩规范
- **主色调**: #1890ff (蓝色)
- **成功色**: #52c41a (绿色)
- **警告色**: #faad14 (橙色)
- **错误色**: #ff4d4f (红色)
### 组件规范
- 统一的圆角、间距、阴影
- 响应式布局适配
- 无障碍访问支持
## 🔐 权限控制
基于若依后台的权限体系：
- 基于角色的访问控制 (RBAC)
- 菜单级权限控制
- 按钮级权限控制
- 数据权限控制
## 📦 构建部署
### 构建命令
```bash
# H5端构建
npm run build:h5
# 微信小程序构建
npm run build:mp-weixin
# App端构建
npm run build:app-plus
```
### 部署说明
#### H5部署
构建完成后，将 `dist/build/h5` 目录部署到Web服务器即可。
#### 微信小程序部署
1. 使用微信开发者工具打开 `dist/build/mp-weixin` 目录
2. 上传代码到微信小程序后台
3. 提交审核发布
#### App部署
1. 使用HBuilderX打开项目
2. 选择发行 -> 原生App-云打包
3. 配置证书和签名
4. 打包生成安装包
## 🤝 贡献指南
欢迎贡献代码！请遵循以下步骤：
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request
## 📄 开源协议
本项目基于 [MIT](LICENSE) 协议开源。
## 🙏 致谢
- [若依管理系统](https://gitee.com/y_project/RuoYi) - 后端管理系统
- [UniApp](https://uniapp.dcloud.net.cn/) - 跨平台开发框架
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
## 📞 联系我们
- 官方网站: [http://ruoyi.vip](http://ruoyi.vip)
- 问题反馈: [Issues](https://github.com/yangzongzhuan/RuoYi-App/issues)
- QQ交流群: 932521825
### 加入QQ群
扫码加入若依APP交流群
---
⭐ 如果这个项目对你有帮助，请给个Star支持一下！
