TUIChat
组件中,支持发送及接收两种类型的表情:表情类型 | 发送形式 | 是否文字混排 | 发送内容 | TUIKit 默认自带 |
小表情 | 文本消息 MSG_TEXT | 是 | 表情图片Key | 默认包含 |
大表情 | 表情消息 MSG_FACE | 否 | index: 表情组emojiGroupID data:表情图片Key | 默认包含 |
@custom
格式标识符的文件名:TUIKit 中需要通过匹配 @custom
来解析自定义表情资源。URL + 表情图片Key
,所以请务必将您要新增的表情包资源上传至统一的网络路径 URL
下。TUIKit 源码
中对新增表情包资源增加相关声明。TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
文件是自定义表情的声明文件。import { EMOJI_TYPE } from '../../../constant';// 填写您的自定义大表情网络路径, 示例如下export const CUSTOM_BIG_EMOJI_URL = 'https://web.sdk.qcloud.com/im/test/emoji-test/';// 声明您的自定义大表情列表组,示例如下export const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [{emojiGroupID: 4, // 表情组 IDtype: EMOJI_TYPE.CUSTOM, // 表情组类型: CUSTOM 自定义表情组url: CUSTOM_BIG_EMOJI_URL, // 表情组公共 Url 前缀// 表情列表声明,格式为 Key + 表情文件类型后缀,请务必保证列表中每个 Key 保持唯一性list: ['@custom_cat32.png', '@custom_cat33.png', '@custom_cat34.png', '@custom_cat35.png', '@custom_cat36.png', '@custom_cat37.png', '@custom_cat38.png', '@custom_cat39.png','@custom_cat40.png', '@custom_cat45.png', '@custom_cat46.png', '@custom_cat47.png', '@custom_cat49.png', '@custom_cat50.png', '@custom_cat51.png'],},];
baseURL + 表情图片Key
,所以请您务必将要新增的表情包资源上传至统一的网络路径 baseURL
下。@custom
来解析自定义表情资源,每个自定义小表情资源 key 必须包含 @custom
格式标识符。TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
// 填写您的自定义小表情网络路径, 示例如下// export const CUSTOM_BASIC_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/emoji/';export const CUSTOM_BASIC_EMOJI_URL = '';// 配置 CUSTOM_BASIC_EMOJI_URL_MAPPING:// CUSTOM_BASIC_EMOJI_URL_MAPPING 记录每个 emojiKey 与其对应表情图片 url 的映射关系,url 包含文件后缀// 每个 emojiKey 必须包含@custom 标识才能解析,示例如下
export const CUSTOM_BASIC_EMOJI_URL_MAPPING = {'[@custom_Expect]': 'emoji_0@2x.png','[@custom_Blink]': 'emoji_1@2x.png','[@custom_Guffaw]': 'emoji_2@2x.png','[@custom_KindSmile]': 'emoji_3@2x.png',...}
TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
// 重写中文词条 key-value 声明,示例如下const Emoji = {'[@custom_Expect]': '[期待]','[@custom_Blink]': '[眨眼]','[@custom_Guffaw]': '[大笑]',...}
TUIKit/components/TUIChat/emoji-config/locales/en.ts
// 重写英文词条 key-value 声明,示例如下const Emoji = {'[@custom_Expect]': '[Expect]','[@custom_Blink]': '[Blink]','[@custom_Guffaw]': '[Guffaw]',...}
emojiGroupID = 0 | emojiGroupID = 1 | emojiGroupID = 2 | emojiGroupID = 3 |
| | | |
TUIKit/components/TUIChat/emoji-config/default-emoji.ts
删除对于该组表情的定义即可:// 比如,删除 emojiGroupID = 1 的大表情组export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [// {// emojiGroupID: 1,// type: EMOJI_TYPE.BIG,// url: DEFAULT_BIG_EMOJI_URL,// list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',// 'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],// },...];
本页内容是否解决了您的问题?