TUIKit SwiftUI 是基于腾讯云 IM SDK 的一套 SwiftUI UI 组件库,提供了聊天、会话列表、联系人管理等即时通信功能的完整解决方案。本文介绍如何手动集成该组件并实现核心功能。
关键概念
TUIKit SwiftUI 提供了一套完整的即时通信 UI 组件,向下依赖 AtomicXCore 数据层,向上可构建各种功能性 Page。
Page 层:基于 TUIKit SwiftUI 组件封装的完整功能页面:ChatPage、ContactsPage、ConversationsPage,您可以直接使用。
TUIKit SwiftUI (UI 组件层):基于 AtomicXCore 构建的 SwiftUI UI 组件,您可将其嵌套到自己已有的 App 页面中。
AtomicXCore(数据层):提供数据管理和业务逻辑,包含各种 Store 和 Manager。
前提条件
Xcode 12.0 及以上版本。
iOS 15.0 及以上系统版本 。
Swift 5 及以上版本。
一个有效的腾讯云账号及 Chat 应用。可参见 开通服务 从控制台获取以下信息:
SDKAppID:App 在控制台获取的 Chat 应用的 ID,为应用的唯一标识。
SDKSecretKey:应用的密钥。
说明:
本项目当前仅支持手动本地 DevelopmentPods 源码集成,暂不支持通过远程 CocoaPods、SPM 等包管理器集成。
集成并引入组件
下载源码
git clone https://github.com/Tencent-RTC/TUIKit_iOS_SwiftUI.git
项目目录结构说明:
atomic-x/├── Sources/ # UI 组件源码(必需集成)│ ├── MessageList/ # 消息列表组件│ ├── MessageInput/ # 消息输入组件│ ├── ConversationList/ # 会话列表组件│ ├── ContactList/ # 联系人列表组件│ ├── BaseComponent/ # 基础组件│ └── ... # 其他UI组件├── Resources/ # 资源文件(必需集成)│ ├── assets/ # 图片资源│ └── strings/ # 本地化字符串文件chat/├── uikit/ # Page 组件(参考实现)│ ├── ChatPage.swift│ ├── ContactsPage.swift│ └── ConversationsPage.swift└── demo/ # 示例应用(可选参考)
集成组件
1. 将组件目录完整复制到您的 Xcode 项目中,如下图所示,其中 SwiftUIDemo 是示例项目,TUIKit_iOS_SwiftUI 是从 GitHub 上下载的组件源码:

2. 修改您 Podfile 中每个组件的本地路径。path 是 TUIKit_iOS_SwiftUI 文件夹相对于您工程 Podfile 文件的位置,常见的有:
TUIKit_iOS_SwiftUI 文件夹位于您工程 Podfile 文件父目录:
pod 'AtomicX/Chat', :path => '../TUIKit_iOS_SwiftUI/atomic-x/AtomicX.podspec'TUIKit_iOS_SwiftUI 文件夹位于您工程 Podfile 文件当前目录:
pod 'AtomicX/Chat', :path => './TUIKit_iOS_SwiftUI/atomic-x/AtomicX.podspec'TUIKit_iOS_SwiftUI 文件夹位于您工程 Podfile 文件子目录:
pod 'AtomicX/Chat', :path => '/TUIKit_iOS_SwiftUI/atomic-x/AtomicX.podspec'以 Podfile 跟 TUIKit_iOS_SwiftUI 是同级目录为例,Podfile 中添加:
platform :ios, '14.0'target 'Demo' douse_frameworks! :linkage => :staticpod 'AtomicX/Chat', :path => './TUIKit_iOS_SwiftUI/atomic-x/AtomicX.podspec'pod 'ChatUIKit', :path => './TUIKit_iOS_SwiftUI/chat/uikit/ChatUIKit.podspec'pod 'AtomicXCore', '3.4.0'end#Pods configpost_install do |installer|installer.pods_project.targets.each do |target|target.build_configurations.each do |config|config.build_settings['SWIFT_VERSION'] = '5.0'#Do not strip Swift symbolsconfig.build_settings['STRIP_SWIFT_SYMBOLS'] = 'NO'config.build_settings['DEBUG_INFORMATION_FORMAT'] = 'dwarf-with-dsym'#Fix Xcode14 Bundle target errorconfig.build_settings['EXPANDED_CODE_SIGN_IDENTITY'] = ""config.build_settings['CODE_SIGNING_REQUIRED'] = "NO"config.build_settings['CODE_SIGNING_ALLOWED'] = "NO"config.build_settings['ENABLE_BITCODE'] = "NO"config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = "14.0"endendend
3. Podfile 修改完毕后,执行以下命令,安装本地 TUIKit SwiftUI 组件。示例:
pod install
pod install 会自动安装所需的依赖库:

注意:
使用本地集成方案时,如需升级时需要从 GitHub 获取最新的组件代码,覆盖您本地项目的 TUIKit SwiftUI 目录。
当私有化修改和远端有冲突时,需要手动合并,处理冲突。
配置项目
1. 配置 Build Settings
在项目的 Build Settings 中添加以下配置:
Swift Language Version: Swift 5。
iOS Deployment Target: 14.0 或更高。
2. 配置 Info.plist
添加必要的权限配置:
<key>NSCameraUsageDescription</key><string>App需要访问相机来拍摄照片和视频</string><key>NSMicrophoneUsageDescription</key><string>App需要访问麦克风来录制音频</string><key>NSPhotoLibraryUsageDescription</key><string>App需要访问相册来选择图片和视频</string>
接入步骤
步骤1:配置用户鉴权

步骤2:用户登录
登录鉴权后才能正常使用组件的功能。您可以调用 login 接口,传入上文获取的 SDKAPPID、userSig 用于登录鉴权。login 内部已自动处理初始化逻辑,无须额外调用初始化接口。
import AtomicXCore// 用户登录LoginStore.shared.login(sdkAppID: sdkAppID, userID: userID, userSig: userSig, completion: { [weak self] result inguard let self = self else { return }switch result {case .success:// 登录成功,可跳转聊天或会话页case .failure(let error):// 登录失败,可弹框报错}})
警告:
步骤3:构建聊天界面
您可以基于 TUIKit SwiftUI 中的 MessageList、MessageInput 组件,构建一个聊天页面。
MessageList 内建的功能是:
展示单聊或群聊消息列表。
支持对单条消息操作:查看图片消息大图、播放视频或语音消息、复制文本消息、撤回消息、删除消息等。
MessageInput 内建的功能是:
支持用户组建并发送多种类型的消息:文本、表情、图片、语音、视频、文件等。
您可以将 MessageList 和 MessageInput 直接集成到现有的 App 页面中,也可以新构建一个完整的聊天页,组装后的一种 UI 效果如下图所示:

将 MessageList 和 MessageInput 组装为聊天页,可参考
chat/uikit/ChatPage.swift 文件里的实现,ChatPage 主要做了以下工作:1. 在最上方添加了 headerView,展示会话的名称。
2. 按照移动端用户使用习惯,上下拼接 MessageList 和 MessageInput。
核心示例代码如下所示:
import AtomicXimport AtomicXCoreimport SwiftUIpublic struct ChatPage: View {...public var body: some View {return VStack(spacing: 0) {self.navigationBarViewDivider().background(self.themeState.colors.strokeColorPrimary)VStack(spacing: 0) {MessageList(conversationID: self.conversation.id,listStyle: self.listStyle,locateMessage: self.locateMessage,onUserClick: { userID inonUserAvatarClick?(userID)})self.messageInputAreaView}.ignoresSafeArea(.keyboard)}.toast(toast)}// Headerprivate var navigationBarView: some View {HStack {Button(action: {onBack?()}) {Image(systemName: "chevron.left").font(.system(size: 18, weight: .semibold)).foregroundColor(themeState.colors.textColorLink)}.padding(.leading, 16)Button(action: {onNavigationAvatarClick?()}) {HStack(spacing: 12) {Avatar(url: conversation.avatarURL,name: conversation.title ?? conversation.conversationID,size: .s)VStack(alignment: .leading, spacing: 2) {Text(conversation.title ?? conversation.conversationID).font(.system(size: 17, weight: .semibold)).foregroundColor(themeState.colors.textColorPrimary).lineLimit(1)if conversation.type == .group {Text("Group Chat").font(.system(size: 12)).foregroundColor(themeState.colors.textColorSecondary)}}}}.buttonStyle(PlainButtonStyle())Spacer()}.frame(height: 44)}// MessageInputprivate var messageInputAreaView: some View {VStack(spacing: 0) {MessageInput(text: $messageText,conversationID: conversation.id,style: inputStyle,onHeightChange: { height inself.inputAreaHeight = height}).padding(.bottom, 8)}}...}
步骤4:接入智能客服 Desk 用户端

若需同时集成智能客服 Desk 用户端,请先 开通智能客服 Desk 服务,并根据 iOS 接入智能客服用户端 文档完成
TencentCloudAIDeskCustomer 包引入和配置,即可在您的应用中引入客服会话能力。#import <TencentCloudAIDeskCustomer/TencentCloudCustomerManager.h>int SDKAppID = 0; // 开通了智能客服 Desk 的应用 IDNSString *userID = @"";NSString *userSig = @"";// 上述三个参数, 可以和您登录腾讯云 IM 的保持一致, 也可以使用不同的应用和用户// 用户昵称。设置后,用户端转人工成功时,人工客服在工作台可见。您可将用户手机号,用户来源等信息写入昵称,长度限制500字节// 注意!设置后,即时通信 IM 同 userID 的昵称也会被更新// 如您不希望变更,请设置为 @"" 或 nilNSString *nickName = @"";// 用户头像。设置后,用户端转人工成功时,人工客服在工作台可见// 注意!设置后,即时通信 IM 同 userID 的头像也会被更新// 如您不希望变更,请设置为 @"" 或 nilNSString *avatar = @"";[[TencentCloudCustomerManager sharedManager]initWithProfile:SDKAppIDuserID:userIDuserSig:userSignickName:nickNameavatar:avatarcompletion:^(NSError *error) {if (error) {NSLog(@"login failed. error:%@", error);}}];// 点击打开智能客服会话页面[[TencentCloudCustomerManager sharedManager] pushCustomerServiceChatFromController:self];
常见问题
功能常见问题
登录失败,提示签名错误怎么办?
请检查 SDKAppID 和 UserSig 是否正确,UserSig 是否已过期。可以参考上文“配置用户鉴权”重新生成 UserSig。