设置会话列表
会话列表由标题区和消息列表区组成,每部分都提供了 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
中进行注册。之后在下图进行样式的更改。