腾讯云即时通信IM小程序_AI解决方案_同尘科技
设置会话列表
会话列表由标题区和消息列表区组成,每部分都提供了 UI 样式。
修改标题区样式
标题区不仅具有本身作为 View 所有的功能,还包含了左、中两块区域。您可以在 TUIKit/miniprogram/pages/TUI-CustomerService/page/conversation/conversation.wxml
中进行修改,并且修改其对应的样式。
修改左侧图片区域
修改标题区样式
最近联系人
修改会话列表区样式
登录后, TUIKit 会根据用户名从 SDK 读取该用户的会话列表。会话列表提供一些常用功能定制,例如,头像样式,背景,字体大小,点击事件与删除/置顶/消息免打扰等,您可以在TUIKit/miniprogram/pages/TUI-CustomerService/components/tui-conversation/conversation-item/index.wxml
中进行修改,并修改其对应的样式
获取会话列表
getConversationList() { wx.$TUIKit.getConversationList().then((imResponse) => { logger.log(`| TUI-conversation | getConversationList | getConversationList-length: ${imResponse.data.conversationList.length}`); this.setData({ conversationList: imResponse.data.conversationList, }); }); },
从会话信息中获取需要展示的数据,以获取会话头像为例。
setConversationAvatar(conversation) { if (conversation.type === '@TIM#SYSTEM') { return 'https://web.sdk.qcloud.com/component/TUIKit/assets/system.png'; } if (conversation.type === 'C2C') { return conversation.userProfile.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'; } if (conversation.type === 'GROUP') { return conversation.groupProfile.avatar || '../../../static/assets/gruopavatar.svg'; } },
设置头像头像样式
设置消息未读小红点样式
99}}">99+ {{conversation.unreadCount}}
设置名称和消息展示样式
{{showMessage}}
设置消息展示时间
{{conversation.lastMessage.timeago}}
设置会话操作
{{showMute}} {{showPin}} 删除
设置头像
如果您是首次使用 IM SDK ,会为您设置一个默认头像,首先需要您在个人中心页面,选择头像,并且设置自己的头像。(目前不支持上传图片修改)。设置头像样式
调用修改个人资料接口进行头像修改
handleEditSubmitAvatar() { wx.$TUIKit.updateMyProfile({ avatar: this.data.avatar, }).then((imResponse) => { this.setData({ userInfo: imResponse.data, popupToggleAvatar: !this.data.popupToggleAvatar, }); }) .catch(() => { this.setData({ popupToggleAvatar: !this.data.popupToggleAvatar, }); }); },
设置聊天窗口
聊天窗口包含标题区,用法与会话列表相同。除此以外,聊天窗口包含两个区域,从上到下为消息区和输入区。效果图如下:
设置消息展示区
将会话信息传入消息区组件里,然后根据会话ID获取消息列表并对其进行展示。
注入会话信息
获取消息列表
getMessageList(conversation) { wx.$TUIKit.getMessageList({ conversationID: conversation.conversationID, nextReqMessageID: this.data.nextReqMessageID, count: 15, }) }
在 wxml 页面对获取到的消息列表进行渲染。
修改消息气泡
消息展示区可以根据不同的消息去设置独特的样式,在 TUIKit/miniprogram/TUI-CustomerService/components/tui-chat/message-elements
目录下设置,可以设置自己和对方的消息气泡。例如语音消息的消息气泡,
{{renderDom[0].second}}s
设置输入区域
输入区
输入区域可以在输入框上方增加快捷发送功能,在 TUIKit/miniprogramTUI-CustomerService/components/tui-chat/message-private
中以组件添加自己想要增加的快捷功能,然后在 TUIKit/miniprogram/TUI-CustomerService/components/tui-chat/message-input/index.json
中进行注册。之后在下图进行样式的更改。
对即时通讯IM解决方案有疑惑?想了解解决方案收费? 联系解决方案专家
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠
阿里云解决方案也看看?: 点击对比阿里云的解决方案
暂无评论,你要说点什么吗?