即时通信 IM Web&小程序&uni-app

一、使用须知

1. 云端搜索插件能力全新升级，支持消息/用户/群/群成员搜索。

Web 端无 UI 集成

·搜索云端消息：searchCloudMessages

·搜索云端用户：searchCloudUsers

·搜索云端群组：searchCloudGroups

·搜索云端群成员：searchCloudGroupMembers

Web 端含 UI 集成

·含 UI 集成目前仅支持搜索云端消息，其他类型搜索功能正在加急研发中，敬请期待。

Android、iOS、Mac、Windows 云端搜索功能正在加急研发中，敬请期待。

2. 调用接口前，请前往 控制台 购买正式云端搜索插件或领取体验版并开通对应搜索功能，否则将调用失败。

二、功能体验

点击体验消息云端搜索功能： Web&H5 Demo。

三、无 UI 集成

无 UI 使用消息云端搜索功能请参见 Chat SDK 接口文档：

·搜索云端消息：searchCloudMessages

·搜索云端用户：searchCloudUsers

·搜索云端群组：searchCloudGroups

·搜索云端群成员：searchCloudGroupMembers

四、快速集成消息云端搜索

Web&H5 Vue3Uniapp Vue2&Vue3

五、步骤1: 集成 TUIKit

·@tencentcloud/chat-uikit-vue3 ≥ 3.3.0，如未集成，请务必先根据 Vue3 TUIKit 快速集成指引 进行集成。

六、步骤2：控制台开通云端搜索插件

开通指引：插件市场 > 概述与开通指引。

七、步骤1: 集成 TUIKit

·【】腾讯云聊天+通话+直播响应式 SDK，如未集成，请务必先根据 Uniapp TUIKit 快速集成指引 进行集成。

八、步骤2：控制台开通云端搜索插件

开通指引：插件市场 > 概述与开通指引。

九、独立引入消息云端搜索

注意：说明：

注意：以上 快速集成消息云端搜索 中已默认包含消息云端搜索全部功能，无需重复引入。

注意：如果你想独立引入 <TUISearch> 消息云端搜索，请参考以下教程。

Web&H5 Vue3Uniapp Vue2&Vue3

十、前提条件

·@tencentcloud/chat-uikit-vue3 ≥ 3.3.0，如未集成，请务必先根据 Vue3 TUIKit 快速集成指引 进行集成。

十一、引入 <TUISearch>

在你所需要使用 消息云端搜索 功能的 .vue 界面，引入 <TUISearch> 。

<TUISearch> 参数说明

<TUISearch> 效果展示

使用 TUISearch

import { TUISearch } from "@tencentcloud/chat-uikit-vue";// 全局搜索<TUISearch searchType="global" />// 会话内搜索<TUISearch searchType="conversation" />

删除默认引入的 TUISearch

TUIKit 中默认集成 <TUISearch>, 如你不按照默认集成方式使用，可在 TUIKit/index.vue 中，注释掉<TUISearch>即可。

Uniapp TUISearch 支持两种方式引入：组件方式引入与界面方式引入。

十二、前提条件

·【】腾讯云聊天+通话+直播响应式 SDK，如未集成，请务必先根据 Uniapp TUIKit 快速集成指引 进行集成。

组件方式引入界面方式引入

在你所需要使用 消息云端搜索 功能的 .vue 界面，引入 <TUISearch> 。

<TUISearch> 参数说明

<TUISearch> 效果展示

使用 TUISearch

// 以下路径仅为示例路径，请根据你项目自身路径进行调整import { TUISearch } from "/TUIKit/components/TUISearch/index.vue";// 全局搜索<TUISearch searchType="global" />// 会话内搜索<TUISearch searchType="conversation" />

删除默认引入的 TUISearch

TUIKit 中默认集成 <TUISearch> ， 如你不按照默认集成方式使用，可在 TUIKit/components/TUIConversation/index.vue 中，注释掉<TUISearch>即可。

在 pages.json 新增 TUISearch 页面{ "pages": [ …, { "path": "TUIKit/components/TUISearch/index", "style": { "navigationBarTitleText": "聊天记录" } } ], …}跳转到 TUISearch 界面uni.navigateTo({ url: "/TUIKit/components/TUISearch/index",});

十三、新增搜索消息类型

目录位置： src/TUIKit/components/TUISearch/search-type-list.ts

searchMessageTypeList 中包含了所有“搜索消息类型” Tab 定义，如需新增 searchMessageTypeList未定义的搜索消息类型，请按照以下结构在 searchMessageTypeList 中进行新增：

[keyName: string]: { key: string;// 消息搜索类型 key，请保持唯一性 label: string;// 消息搜索类型渲染 label value: Array<string>;// 消息搜索类型实际搜索列表 }; // 例如，定义搜索自定义类型消息export const searchMessageTypeList = { … customMessage: { key: "customMessage",// 消息搜索类型 key，请保持唯一性 label: "自定义",// 消息搜索类型渲染 label value: [TUIChatEngine.TYPES.MSG_CUSTOM],// 消息搜索类型实际搜索列表 }};

因为 TUIKit 使用 i18next 支持国际化，如你声明新的 label，请在 src/TUIKit/locales/zh_cn/TUISearch.ts 以及 src/TUIKit/locales/en/TUISearch.ts 增加相应的国际化词条进行翻译。

如需将已定义的 searchMessageTypeList 中某类型增加到全局搜索类型列表或者会话内搜索类型列表，仅需将其 key 填入 globalSearchTypeKeys 或 conversationSearchTypeKeys 即可。

// 例如，将以上新增的 自定义消息 customMessage 应用到“全局搜索”消息类型列表export const globalSearchTypeKeys = […, "customMessage"];// 例如，将以上新增的 自定义消息 customMessage 应用到“会话内搜索”消息类型列表export const conversationSearchTypeKeys = […, "customMessage"];

十四、新增消息云端搜索时间范围

目录位置： src/TUIKit/components/TUISearch/search-time-list.ts

searchMessageTimeList 中包含了所有“搜索时间范围” Tab 定义，如需新增 searchMessageTimeList 未定义的搜索时间范围类型，请按照以下结构在 searchMessageTimeList 中进行新增：

[keyName: string]: { key: string;// 消息搜索时间范围 key，请保持唯一性 label: string;// 消息搜索时间范围渲染 label value: { timePosition: number; // 消息搜索时间范围起始位置，默认为 0，从当前时间开始搜索 timePeriod: number; // 从 timePosition 向前搜索的时间范围 };}; // 例如，定义搜索“近两天“时间范围export const searchMessageTimeList = { … twoDay: { key: "twoDay",// 消息搜索时间范围 key，请保持唯一性 label: "近两天",// 消息搜索时间范围渲染 label value: { timePosition: 0,// 消息搜索时间范围起始位置，默认为 0，从当前时间开始搜索 timePeriod: 2 * oneDay,// 从 timePosition 向前搜索的时间范围 }, },};

因为 TUIKit 使用 i18next 支持国际化，如你声明新的 label，请在 src/TUIKit/locales/zh_cn/TUISearch.ts 以及 src/TUIKit/locales/en/TUISearch.ts 增加相应的国际化词条进行翻译。