融云 uni-app IMKit 正式上線，支持一套代碼同時運行在 iOS、Android、H5、小程序主流四端，集成僅需 1 天，并可確保多平臺的一致性體驗。
融云 uni-app IMKit 在 Vue 3 的高性能加持下開發實現，使用 Vue 3 Composition API，提供更靈活高效的代碼組織方式；基于 Vue 3 強大的響應式系統實現數據管理，讓組件開發更模塊化、更易維護；同時依托 Vue 3 優化的底層架構帶來更快的運行性能和更小的打包體積，全方位提升開發效率和應用性能，讓開發者享受更流暢的集成體驗。
高性能架構設計
采用“開源組件 + 閉源數據包”的架構設計，融云 uni-app IMKit 可在提供豐富的界面組件的同時確保數據安全。
開源的 UI 組件庫
提供豐富的界面組件：組件高度可復用，并提供統一的樣式系統和完善的類型支持。
豐富的公共組件：
?導航欄組件：自定義導航欄，支持標題、返回按鈕等
?頭像組件：支持默認頭像、在線狀態顯示
?長按彈窗：支持自定義菜單項
?狀態指示器：網絡狀態、連接狀態等
?徽標組件：未讀消息數、提醒等
?自定義圖標組件：支持自定義圖標，及其大小和顏色
閉源的數據管理包
使用 im-uikit-store 統一管理數據流，數據流轉路徑清晰，狀態更新機制高效。
快速集成指南
前置條件
? 準備 uni-app 項目
? 注冊開發者賬號：注冊成功后，控制臺會默認自動創建您的首個應用，默認生成開發環境下的 App Key，使用國內數據中心。
? 獲取開發環境的應用 App Key：如不使用默認應用，請參考 如何創建應用，并獲取對應環境 App Key 和 App Secret。
下載資源
從融云官網下載以下資源
?RCUIKit 源碼目錄：包含 UI Kit 的核心實現
?Demo 源碼：包含完整的示例項目
導入 RCUIKit 源碼到項目中
SDK 初始化連接
? 創建 package.json 并添加依賴
{"dependencies": {"@rongcloud/engine": "^5.18.0","@rongcloud/imlib-next": "^5.18.0","@rongcloud/im-uikit-store": "1.0.0","base-64": "^1.0.0","mobx": "^6.13.7"}
}
? 初始化 Web IMLib SDK
import * as RongIMLib from '@rongcloud/imlib-next';uni.$RongIMLib = RongIMLib;
// 應用 App Key
const APP_KEY = 'your_app_key';
// lib 初始化
uni.$RongIMLib.init({appkey: APP_KEY, // 從融云開發者后臺獲取
});
? 初始化 kit-store
import { RCKitStoreInstaller } from '@rongcloud/im-uikit-store';// Kit store 初始化
const store = RCKitStoreInstaller();
uni.$RongKitStore = store;
? 連接 IM
// 連接 IM 'your_token' 臨時測試可從開發者后臺獲取
const TOKRN = 'your_token';
uni.$RongIMLib.connect(TOKRN).then((res) => {const { code, data } = res;if (code !== uni.$RongIMLib.ErrorCode.SUCCESS) {uni.showToast({title: `登錄失敗 code: ${code}`, icon: 'none',});}
});
配置路由
在 pages.json 中添加以下配置
{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{// 會話列表頁"path": "RCUIKit/pages/conversation/index","style": {"navigationStyle": "custom"}},{// 會話頁"path": "RCUIKit/pages/chat/index","style": {"navigationBarTitleText": "uni-uikit-demo","navigationStyle": "custom","app-plus": {"bounce": "none"}}},{// 轉發消息頁"path": "RCUIKit/pages/chat/forward-message","style": {"navigationStyle": "custom"}},{// 視頻播放頁"path": "RCUIKit/pages/chat/video-play","style": {"navigationStyle": "custom"}}]
}
啟動項目，預覽查看
? 在 HBuilderX 中打開項目；
? 點擊“運行” → “運行到瀏覽器”或“運行到手機或模擬器”；
? 等待項目編譯完成并啟動。
{"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages{// 會話列表頁"path": "RCUIKit/pages/conversation/index","style": {"navigationStyle": "custom"}},{// 會話頁"path": "RCUIKit/pages/chat/index","style": {"navigationBarTitleText": "uni-uikit-demo","navigationStyle": "custom","app-plus": {"bounce": "none"}}},{// 轉發消息頁"path": "RCUIKit/pages/chat/forward-message","style": {"navigationStyle": "custom"}},{// 視頻播放頁"path": "RCUIKit/pages/chat/video-play","style": {"navigationStyle": "custom"}}]
}
