有奖捉虫:云通信与企业服务文档专题,速来> HOT

设置会话列表

会话列表由标题区和消息列表区组成,每部分都提供了 UI 样式。

修改标题区样式

标题区不仅具有本身作为 View 所有的功能,还包含了左、中两块区域。

您可以在 TUIKit/miniprogram/pages/TUI-Conversation/conversation/conversation.wxml 中进行修改,并且修改其对应的样式。

修改列表区样式

登录后, TUIKit 会根据用户名从 SDK 读取该用户的会话列表。会话列表提供一些常用功能定制,例如,头像样式,背景,字体大小,点击事件与删除会话等,示例代码如下:

设置头像

如果您是首次使用 IM SDK ,会为您设置一个默认头像,首先需要您在个人中心页面,选择头像。(目前不支持上传图片修改)。

会话列表的头像在 TUIKit/miniprogram/pages/TUI-Conversation/conversation/conversation.js 中进行获取然后在同目录下的 conversation.wxml 展示。

设置聊天窗口

聊天窗口包含标题区,用法与会话列表相同。除此以外,聊天窗口包含两个区域,从上到下为消息区和输入区。效果图如下:

修改消息区域 MessageList 样式

本文提供自定义修改气泡、文字、显示消息已读未读等常见的用法。

修改头像相关属性

TUIKit 的界面在显示用户时,会从用户资料中读取头像地址显示。

如果用户没有设置头像会显示默认头像,您可以自定义设置默认头像,以及头像相关样式。

修改消息气泡


不同类型消息的消息气泡具有自己独特的样式,都在 TUIKit/miniprogram/components/tui-chat/message-elements 目录下设置,可以设置自己和对方的消息气泡。例如语音消息的消息气泡,

设置输入区域

输入区域,包含快捷输入、语音输入、文字输入、表情输入以及更多的“+”输入

增加快捷输入功能

TUIKit/miniprogram/components/tui-chat/message-private 中添加自己想要增加的快捷功能,然后在 TUIKit/miniprogram/components/tui-chat/message-input/index.json 中进行注册。之后在下图进行样式的更改。