使用方式

一、載入表情解析器

開發者需要在呼叫表情模組的其他方法前，優先呼叫該方法

Api 方法： setupEmotionParser(): Promise<void>

範例：

// 安装观看页 SDK
await watchCore.setup();
// 加载表情功能
await watchCore.interactReceive.setupEmotionParser();
// 加载后即可调用表情模块的其他方法

二、取得黃臉表情節點

開發者可透過 getEmotionFaceDomList 方法取得節點並插入到頁面容器中。

監聽容器的點擊事件並呼叫 getEmotionFaceClickTarget 方法可取得觀眾點擊時的黃臉表情。

Api 方法： getEmotionFaceDomList(lang?: LanguageType): HTMLElement

參數說明：

• lang：LanguageType 類型，選傳

回傳值說明： 黃臉表情 dom 節點，HTMLElement 類型

範例：

const containerElem = document.querySelector('容器选择器');
// 插入表情节点
const elems = watchCore.chat.getEmotionFaceDomList();
containerElem.appendChild(elems);
// 监听容器节点的点击事件
containerElem.addEventListener('click', function(event) {
  const title = watchCore.emotion.getEmotionFaceClickTarget(event);
  console.log('点击的表情', title);
});

三、取得點擊事件中的黃臉表情

用於取得觀眾點擊黃臉表情容器時的表情物件，取得後插入到觀眾正在輸入的聊天訊息文字中。

Api 方法： getEmotionFaceClickTarget(event: Event): undefined | string

參數說明：

• event：點擊事件，Event 類型，必傳

回傳值說明： 黃臉表情字元，undefined | string 類型

範例：

// 观众正在输入的聊天消息
const inputMsg = '今天天气真好';

// 监听容器节点的点击事件
containerElem.addEventListener('click', function(event) {
  const title = watchCore.emotion.getEmotionFaceClickTarget(event);
  if (title) {
    console.log('点击的表情', title); // 如：[呲牙]、[害羞]
    inputMsg = inputMsg + title;
  }
});

四、把表情名稱轉成中文

Api 方法： translateEmotions(content: string, lang?: WatchSdkLangEnum): string

參數說明：

• content：發言內容，string 類型，必傳

• lang：WatchSdkLangEnum 類型，選傳

回傳值說明： 轉換後的內容

範例：

// 聊天发言内容
let content = '';
// 返回转换后的内容
let translatedContent =await watchCore.emotion.translateEmotions(content);

五、取得表情圖片列表

透過 getEmotionImages 取得標題圖片列表，取得該列表後，使用 id、url 呼叫 ChatModule.sendEmotionImageMsg 發送表情圖片訊息。

Api 方法： getEmotionImages(): Promise<EmotionImageData[]>

回傳值說明： Promise<EmotionImageData[]> 類型

範例：

const emotionImages = await watchCore.emotion.getEmotionImages();
// 表情图片列表数据示例：
[{ id: '0', title: '收到', url: 'https://s2.videocc.net/default-img/img-emotion/v1/shoudao.png' }]

// 发送表情图片
const item = emotionImages[2];
watchCore.chat.sendEmotionImageMsg({
  emotionId: item.id,
  emotionUrl: item.url,
});