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

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

 

---

 一、UniApp与RuoYi对接全流程

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

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

  @Configuration
  public class CorsConfig {
      @Bean
      public 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指令控制元素显隐：

  编辑

---

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

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

  npm install [email protected]

  javascript

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

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

---

 二、可开发的系统类型

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/政务专有终端

---

⚙️ 三、开发优化技巧

1. 多端适配策略

   • 使用uni.getSystemInfoSync()获取平台信息，差异化渲染组件

   • 条件编译：#ifdef MP-WEIXIN 针对性优化小程序性能

2. 性能优化

   • 接口缓存：RuoYi+Redis缓存字典/配置数据，减少重复请求

   • 图片懒加载：v-lazy指令降低首屏流量

3. 部署上线

   • H5：npm run build:h5生成静态文件 → Nginx托管

   • 小程序：HBuilderX发行至微信开发者工具 → 云端审核

---

 四、实战案例参考

1. Ruoyi-Mall电商系统

   • 开源地址：RuoYi-Mall小程序模板

   • 功能亮点：

     • 商品SKU选择器（Pinia计算属性联动库存）

     • 购物车本地+Redis双存储防丢失

2. 企业IM移动办公平台

   • 技术栈：UniApp + RuoYi-Cloud + RocketMQ

   • 特色模块：

     • 在线会议（WebRTC集成）

     • 审批流程（对接RuoYi工作流引擎）

---

 总结

UniApp + RuoYi组合适用于中后台移动化场景，核心优势在于：

• 高效对接：通过Token机制与跨域配置实现无缝通信

• 多端覆盖：一套代码编译至APP/小程序/H5，降低维护成本

• 企业级扩展：基于RuoYi的权限/日志/代码生成器快速迭代业务模块

资源推荐：

• 开源项目：RuoYi-Uniapp基础模板

• 调试工具：Apifox（替代Postman，自动同步RuoYi-Swagger接口）

• 部署工具：Jenkins + Docker容器化RuoYi后端