当前位置：首页 > news >正文

UniApp完美对接RuoYi框架开发企业级应用

news 2025/7/3 14:52:43

UniApp完美对接RuoYi框架的完整方案及可开发系统类型，结合企业级实践与开源项目经验整理而成，涵盖技术对接、系统设计及实战案例。

🔧 一、UniApp与RuoYi对接全流程

1. 后端配置（RuoYi-Vue/RuoYi-Cloud）

跨域支持
在网关层添加跨域配置类，允许UniApp请求：

@Configuration
public class CorsConfig {@Beanpublic WebFilter corsFilter() {return (exchange, chain) -> {ServerHttpResponse response = exchange.getResponse();HttpHeaders headers = response.getHeaders();headers.add("Access-Control-Allow-Origin", "*");headers.add("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");headers.add("Access-Control-Allow-Headers", "Authorization, Content-Type, token");return chain.filter(exchange);};}
}

登录接口适配
确保返回字段包含access_token（UniApp需用此字段存储Token）：
```
{"code": 200,"data": {"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}
}
```

2. UniApp前端配置

API基础路径设置
修改common/config.js，配置后端地址：

export default {baseUrl: 'http://your-ruoyi-server:8080',  // 替换为实际地址apiPrefix: '/dev-api'  // 与RuoYi接口前缀一致
}

请求拦截器注入Token
在utils/request.js中添加全局拦截器：

uni.addInterceptor('request', {invoke(args) {args.header.Authorization = `Bearer ${store.state.user.token}`;}
});

登录逻辑适配
修改store/modules/user.js，适配RuoYi的Token返回结构：

// 原代码：res.token → 改为：res.data.access_token
commit('SET_TOKEN', res.data.access_token);

3. 权限与动态菜单对接

路由权限控制
根据RuoYi返回的菜单列表生成动态路由：

const formatRoutes = (menus) => {return menus.map(menu => ({path: menu.path,component: () => import(`@/pages${menu.component}`)}));
};
// 动态添加到uni-app路由
uni.addRoutes(formatRoutes(backendMenus));

按钮级权限指令
封装v-hasPermi指令控制元素显隐：
```
<button v-hasPermi="'system:user:edit'">编辑</button>
```

4. UI组件库集成（uView推荐）

安装与配置
替换默认uni-ui，提升移动端体验：

npm install uview-ui@2.0

javascript

// main.js
import uView from 'uview-ui';
Vue.use(uView);

多端样式兼容
通过条件编译适配不同平台：

<template><view v-if="isH5"> <!-- Web端组件 --> </view><scroll-view v-else> <!-- 小程序滚动容器 --> </scroll-view>
</template>
<script>
export default {computed: {isH5: () => process.env.VUE_APP_PLATFORM === 'h5'}
}
</script>

🏢 二、可开发的系统类型

1. 企业移动办公平台

功能模块
- 日程管理：集成FullCalendar组件，同步RuoYi日程数据
- 文件共享：使用uni-file-picker上传至RuoYi后端（OSS支持）
- 即时通讯：WebSocket对接RuoYi消息模块
权限控制：RBAC动态菜单 + JWT令牌刷新

2. 多端电商系统

核心实现
- 商品展示：Pinia管理SKU多规格联动
- 购物车：Redis分布式存储 + 本地持久化
- 支付集成：对接微信/支付宝沙箱，RuoYi处理回调
高并发优化
- 秒杀场景：Redis预减库存 + MQ异步下单
- 订单分库：ShardingJDBC水平拆分

3. 教育培训系统

特色功能
- 直播课堂：UniApp推流组件 + RuoYi课程管理
- 作业提交：uni.uploadFile对接RuoYi文件服务
- 数据看板：ECharts集成学习进度分析

4. 政务服务平台

安全要求
- 数据加密：Spring Security + 国密SM4传输
- 多租户隔离：RuoYi数据权限按部门过滤
- 电子签章：UniApp生成PDF + RuoYi流程审批

系统类型	技术亮点	适用终端
企业办公平台	动态路由 + WebSocket实时通信	APP/微信小程序/H5
多端电商系统	高并发订单 + 多支付渠道集成	小程序/APP/H5
教育培训系统	直播推流 + 学习行为分析	APP/微信小程序
政务服务平台	多租户隔离 + 电子签章安全链	APP/政务专有终端

⚙️ 三、开发优化技巧

多端适配策略
- 使用uni.getSystemInfoSync()获取平台信息，差异化渲染组件
- 条件编译：#ifdef MP-WEIXIN 针对性优化小程序性能
性能优化
- 接口缓存：RuoYi+Redis缓存字典/配置数据，减少重复请求
- 图片懒加载：v-lazy指令降低首屏流量
部署上线
- H5：npm run build:h5生成静态文件 → Nginx托管
- 小程序：HBuilderX发行至微信开发者工具 → 云端审核

🚀 四、实战案例参考

Ruoyi-Mall电商系统
- 开源地址：RuoYi-Mall小程序模板
- 功能亮点：
  - 商品SKU选择器（Pinia计算属性联动库存）
  - 购物车本地+Redis双存储防丢失
企业IM移动办公平台
- 技术栈：UniApp + RuoYi-Cloud + RocketMQ
- 特色模块：
  - 在线会议（WebRTC集成）
  - 审批流程（对接RuoYi工作流引擎）