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.0javascript
// 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工作流引擎）
-
-
💎?總結
UniApp + RuoYi組合適用于中后臺移動化場景，核心優勢在于：
-
高效對接：通過Token機制與跨域配置實現無縫通信
-
多端覆蓋：一套代碼編譯至APP/小程序/H5，降低維護成本
-
企業級擴展：基于RuoYi的權限/日志/代碼生成器快速迭代業務模塊
資源推薦：
開源項目：RuoYi-Uniapp基礎模板
調試工具：Apifox（替代Postman，自動同步RuoYi-Swagger接口）
部署工具：Jenkins + Docker容器化RuoYi后端
-萬能密碼登錄)
