融云 uni-app IMKit 正式上線(xiàn)，支持一套代碼同時(shí)運(yùn)行在 iOS、Android、H5、小程序主流四端，集成僅需 1 天，并可確保多平臺(tái)的一致性體驗(yàn)。

融云 uni-app IMKit 在 Vue 3 的高性能加持下開(kāi)發(fā)實(shí)現(xiàn)，使用 Vue 3 Composition API，提供更靈活高效的代碼組織方式；基于 Vue 3 強(qiáng)大的響應(yīng)式系統(tǒng)實(shí)現(xiàn)數(shù)據(jù)管理，讓組件開(kāi)發(fā)更模塊化、更易維護(hù)；同時(shí)依托 Vue 3 優(yōu)化的底層架構(gòu)帶來(lái)更快的運(yùn)行性能和更小的打包體積，全方位提升開(kāi)發(fā)效率和應(yīng)用性能，讓開(kāi)發(fā)者享受更流暢的集成體驗(yàn)。

高性能架構(gòu)設(shè)計(jì)

采用“開(kāi)源組件 + 閉源數(shù)據(jù)包”的架構(gòu)設(shè)計(jì)，融云 uni-app IMKit 可在提供豐富的界面組件的同時(shí)確保數(shù)據(jù)安全。

開(kāi)源的 UI 組件庫(kù)

提供豐富的界面組件：組件高度可復(fù)用，并提供統(tǒng)一的樣式系統(tǒng)和完善的類(lèi)型支持。

豐富的公共組件：

?導(dǎo)航欄組件：自定義導(dǎo)航欄，支持標(biāo)題、返回按鈕等

?頭像組件：支持默認(rèn)頭像、在線(xiàn)狀態(tài)顯示

?長(zhǎng)按彈窗：支持自定義菜單項(xiàng)

?狀態(tài)指示器：網(wǎng)絡(luò)狀態(tài)、連接狀態(tài)等

?徽標(biāo)組件：未讀消息數(shù)、提醒等

?自定義圖標(biāo)組件：支持自定義圖標(biāo)，及其大小和顏色

閉源的數(shù)據(jù)管理包

使用 im-uikit-store 統(tǒng)一管理數(shù)據(jù)流，數(shù)據(jù)流轉(zhuǎn)路徑清晰，狀態(tài)更新機(jī)制高效。

快速集成指南

前置條件

? 準(zhǔn)備 uni-app 項(xiàng)目

? 注冊(cè)開(kāi)發(fā)者賬號(hào)：注冊(cè)成功后，控制臺(tái)會(huì)默認(rèn)自動(dòng)創(chuàng)建您的首個(gè)應(yīng)用，默認(rèn)生成開(kāi)發(fā)環(huán)境下的 App Key，使用國(guó)內(nèi)數(shù)據(jù)中心。

? 獲取開(kāi)發(fā)環(huán)境的應(yīng)用 App Key：如不使用默認(rèn)應(yīng)用，請(qǐng)參考 如何創(chuàng)建應(yīng)用，并獲取對(duì)應(yīng)環(huán)境 App Key 和 App Secret。

下載資源

從融云官網(wǎng)下載以下資源

?RCUIKit 源碼目錄：包含 UI Kit 的核心實(shí)現(xiàn)

?Demo 源碼：包含完整的示例項(xiàng)目

導(dǎo)入 RCUIKit 源碼到項(xiàng)目中

SDK 初始化連接

? 創(chuàng)建 package.json 并添加依賴(lài)

{ ?
"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;
// 應(yīng)用 App Keyconst APP_KEY = 'your_app_key';
// lib 初始化
uni.$RongIMLib.init({ ?
appkey: APP_KEY, // 從融云開(kāi)發(fā)者后臺(tái)獲取
});

? 初始化 kit-store

import { RCKitStoreInstaller } from '@rongcloud/im-uikit-store';
// Kit store 初始化
const store = RCKitStoreInstaller();
uni.$RongKitStore = store;

? 連接 IM

// 連接 IM 'your_token' 臨時(shí)測(cè)試可從開(kāi)發(fā)者后臺(tái)獲取
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數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages ? ?{ ? ? ?
// 會(huì)話(huà)列表頁(yè) ? ? ?
"path": "RCUIKit/pages/conversation/index", ? ? ?
"style": { ? ? ? ?
"navigationStyle": "custom" ? ? ?} ? ?
}, ? ?
{ ? ? ?// 會(huì)話(huà)頁(yè) ? ? 
      "path": "RCUIKit/pages/chat/index", ? ? ?
      "style": { ? ? ? ?"navigationBarTitleText": "uni-uikit-demo", ? ? ? ?     "navigationStyle": "custom", ? ? ? ?
      "app-plus": { ? ? ? ? ?"bounce": "none" ? ? ? 
     ?} ? ? ?
    } ? ?
   }, ? ?
  { ? ?     
?// 轉(zhuǎn)發(fā)消息頁(yè) ? ? ?
"path": "RCUIKit/pages/chat/forward-message",
"style": {
 ? ? ? ?"navigationStyle": "custom" ? ? ?
         } ? ?
          }, ? ?
{ ? ? ?
  // 視頻播放頁(yè) ? ? ?
  "path": "RCUIKit/pages/chat/video-play", ? ? ?
  "style": { ? ? ? ?
  "navigationStyle": "custom" ? ? ?
     } ? ?
   } 
 ]
}

啟動(dòng)項(xiàng)目，預(yù)覽查看

? 在 HBuilderX 中打開(kāi)項(xiàng)目；

? 點(diǎn)擊“運(yùn)行” → “運(yùn)行到瀏覽器”或“運(yùn)行到手機(jī)或模擬器”；

? 等待項(xiàng)目編譯完成并啟動(dòng)。

{ ?
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages ? ?
{ ? ? ?
// 會(huì)話(huà)列表頁(yè) ? ? ?
"path": "RCUIKit/pages/conversation/index", ? ? ?
"style": { ? ? ? ?
   "navigationStyle": "custom" ? ? ?
    } ? ?
}, ? ?
    { ? ? ?
    // 會(huì)話(huà)頁(yè) ? ? ?
    "path": "RCUIKit/pages/chat/index", ? ? ?
    "style": { ? ? ? ?
 "navigationBarTitleText": "uni-uikit-demo", ? ? ?           ?"navigationStyle": "custom", ? ? ? ?                              
 "app-plus": { ? ? ? ? ?
    "bounce": "none" ? ? ? ?
      } ? ? ?
     } ? ?
    }, ? ?
    { ? ? ?
    // 轉(zhuǎn)發(fā)消息頁(yè) ? ? ?
    "path": "RCUIKit/pages/chat/forward-message", ? ? ?
    "style": {
 ? ??"navigationStyle": "custom" ? ? ?
       } ? ?
     }, ? ?
     { ? ? ?
       // 視頻播放頁(yè) ? ? ?
       "path": "RCUIKit/pages/chat/video-play", ? ? ?
       "style": {
 ? ? ? ?"navigationStyle": "custom" ? ? 
       } ? ?
     } ?
   ]
}