跳到主要内容
新版 Web IMKit SDKWeb IMKit SDK 从 5.36.0 版本开始升级了 UI 和 SDK 结构。如果您集成的版本低于 5.36.0,请参考旧版 Web IMKit 文档

自定义表情

Emoji 表情

Web IMKit 提供了基础的 Emoji 表情列表,包含 U+1F601 - U+1F64F 和 U+1F910 - U+1F92F 共 111 个 Emoji 字符。

您可以通过 cloneChatEmojiLibrary 方法获取 Emoji 表情列表,以便于自定义修改。修改完成后,通过 setChatEmojiLibrary 方法进行更新。

JavaScript
const library = kitApp.cloneChatEmojiLibrary();

// 修改 Emoji 表情面板图标。建议使用 SVG 图片资源。
library.icon = '';
// 修改 Emoji 字符列表
library.chats.push('📚');

// 该方法仅限在 kitApp.ready() 调用前有效。
kitApp.setChatEmojiLibrary(library);
提示

setChatEmojiLibrary 方法仅在 kitApp.ready() 调用前有效。

图片表情

Web IMKit 当前不提供任何内置图片表情包,但您可以通过 setImageEmojiLibraries 方法进行自定义图片表情包的配置。当用户点击图片表情时,Web IMKit 会以图片消息或 GIF 消息的形式发送。

如需读取当前已注册的图片表情库配置,可调用 cloneImageEmojiLibraries()。该方法返回的是当前配置的拷贝;在未注册任何图片表情包时,返回空数组。

JavaScript
const libraries = kitApp.cloneImageEmojiLibraries();

参数列表

参数类型必传说明
idString表情包 ID,由业务层自行定义。
iconString表情包图标,用于表情面板中不同表情库的切换按钮显示。建议使用 SVG 图片资源。
orderNumbericon 图标在表情面板中的展示顺序。order 值越小,展示越靠前。
itemWidthNumber表情包单个表情在表情面板内的展示宽度。
itemHeightNumber表情包单个表情在表情面板内的展示高度。
itemsArray of IRCKitImageEmoji表情包中的表情元素列表。元素结构请查阅 APIDoc IRCKitImageEmoji

代码示例

JavaScript
// 定义图片表情包
const library1 = {
id: 'library1',
icon: '', // 表情包图标。建议使用 SVG 图片资源,用于表情面板的切换按钮显示。
itemWidth: 100, // 表情包单个表情在表情面板内的展示宽度。
itemHeight: 80, // 表情包单个表情在表情面板内的展示高度。
order: 0, // 表情包在表情面板中的展示顺序。`order` 值越小,展示越靠前。
items: [
// 静态图片表情
{
url: 'https://xxxxx', // 网络资源托管地址。需确保地址在各端网络环境的可访问性。
thumbnail: '', // 缩略图数据,需为 Base64 字符串,同时也作为表情面板的展示图,以避免因大量请求原图而造成流量浪费。
},
// GIF 表情
{
url: 'https://xxxxx',
thumbnail: '',
// 若图片资源为 GIF 图片,且希望以 GIF 消息形式发送,则需要补充提供 GIF 图片信息。
// 否则,SDK 将默认以普通图片消息形式发送。
gif: {
size: 100, // 图片大小,单位为字节(Byte)。
width: 100,
height: 100,
}
},
// ...
],
}
const library2 = { /* ... */ }
// SDK 支持同时配置多个图片表情包
kitApp.setImageEmojiLibraries([ library1, library2 ]);