uni-app (小程序)

最近更新时间:2024-09-20 21:28:31

我的收藏
本文将介绍如何定制 TUIRoomkit 的用户界面,我们提供了两个方案供您选择:界面微调方案自定义 UI 方案

方案一:界面微调方案

通过直接修改我们提供的 UI 源代码,对 TUIRoom 的用户界面进行调整,TUIRoom 的界面源代码位于 Github 中的 MiniProgram/ 文件夹下面:

替换图标

您可以直接修改 MiniProgram/src/roomkit/TUIRoom/assests/icons 文件夹下的图标组件,以确保整个 app 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。




调整 UI 布局

您可以通过修改 MiniProgram/src/roomkit/TUIRoom/components/ 文件下的不同页面来调整多人视频会议界面的UI布局。
- components/
- base
- Chat 聊天
- common 公用图标组件
- ManageMember 成员管理
- RoomContent Room 视频
- RoomFooter Room 页面 Footer部分
- RoomHeader Room 页面 Header部分
- RoomHome Home 页面
- RoomInvite 邀请成员
- RoomLogin 登录页面
- RoomMore 更多
- RoomSetting 设置
- RoomSidebar 抽屉组件

方案二:自定义 UI 方案

TUIRoomKit 的整体功能是基于 RTC Room Engine SDK 实现的,您可以完全基于 RTC Room Engine SDK 实现一套自己的 UI 界面。详情可见