2025最新若依APP，后端集成satoken+mybatis-plus，实现若依app支持H5和微信小程序，支持app端代码生成

原创已于 2025-10-26 22:27:19 修改 · 2.7k 阅读

36 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #mybatis #微信小程序 #uniapp

于 2025-09-05 18:28:34 首次发布

若依移动端 (RuoYi-App)

基于 UniApp + Vue3 开发的若依管理系统移动端应用，提供完整的后台管理功能移动化解决方案。

🔗 配套项目

后端服务: ruoyi-vue-sa-token
管理端: ruoyi-vue3
移动端: ruoyi-app (当前项目)

移动端体验地址：https://app.wanghaihai.top

📱 项目简介

若依移动端是基于若依后台管理系统开发的跨平台移动应用，支持微信小程序、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 (推荐)
微信开发者工具 (小程序开发)

安装依赖

# 克隆项目
git clone https://github.com/yangzongzhuan/RuoYi-App.git

# 进入项目目录
cd RuoYi-App

# 安装依赖 (如果使用HBuilderX，可跳过此步骤)
npm install

配置说明

修改API地址

编辑 config.js 文件，修改后端API地址：

export default {
  baseUrl: 'http://your-backend-api.com', // 修改为你的后端地址
  // ... 其他配置
}

配置小程序AppID

编辑 manifest.json 文件，修改微信小程序AppID：
```
{
  "mp-weixin": {
    "appid": "your-wechat-appid"
  }
}
```

运行项目

HBuilderX运行

使用HBuilderX打开项目
选择运行到浏览器/微信开发者工具/手机App

命令行运行

# H5端
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# App端
npm run dev:app-plus

📱 功能模块

🏠 首页

用户信息展示
快捷功能入口
系统公告
数据统计

👤 个人中心

个人信息管理
头像修改
密码修改
应用设置
帮助中心

💼 工作台

系统管理模块
监控管理模块
快捷操作入口

🔧 系统管理

用户管理 - 用户增删改查、状态管理、角色分配
角色管理 - 角色权限配置、用户分配
部门管理 - 组织架构管理
菜单管理 - 系统菜单配置
字典管理 - 数据字典维护
岗位管理 - 岗位信息管理
参数设置 - 系统参数配置
通知公告 - 系统公告管理
系统设置 - 系统配置管理

📊 系统监控

在线用户 - 实时在线用户监控
登录日志 - 用户登录记录
操作日志 - 系统操作记录
服务监控 - 服务器性能监控

📸 应用截图

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fd94fc61a32446b0951dfaf40e761bf3.png#pic_center

主要页面

首页

个人中心

工作台

### 登录注册

登录页面

注册页面

修改头像

系统管理

用户管理	角色管理	部门管理
菜单管理	字典管理	字典数据管理
岗位管理	参数设置	通知公告
系统设置

系统监控

在线用户	登录日志	操作日志
服务监控

🎨 设计系统

项目采用统一的设计系统，确保视觉一致性：

色彩规范

主色调: #1890ff (蓝色)
成功色: #52c41a (绿色)
警告色: #faad14 (橙色)
错误色: #ff4d4f (红色)

组件规范

统一的圆角、间距、阴影
响应式布局适配
无障碍访问支持

🔐 权限控制

基于若依后台的权限体系：

基于角色的访问控制 (RBAC)
菜单级权限控制
按钮级权限控制
数据权限控制

📦 构建部署

构建命令

# H5端构建
npm run build:h5

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

# App端构建
npm run build:app-plus

部署说明

H5部署

构建完成后，将 dist/build/h5 目录部署到Web服务器即可。

微信小程序部署

使用微信开发者工具打开 dist/build/mp-weixin 目录
上传代码到微信小程序后台
提交审核发布

App部署

使用HBuilderX打开项目
选择发行 -> 原生App-云打包
配置证书和签名
打包生成安装包

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开 Pull Request

📄 开源协议

本项目基于 MIT 协议开源。

🙏 致谢

若依管理系统 - 后端管理系统
UniApp - 跨平台开发框架
Vue.js - 渐进式JavaScript框架

⭐ 如果这个项目对你有帮助，请给个Star支持一下！