tencent cloud

即时通信 IM

动态与公告
产品动态
公告
产品简介
产品概述
基本概念
应用场景
功能介绍
账号系统
用户资料与关系链
消息管理
群组相关
公众号系统
音视频通话 Call
使用限制
购买指南
计费概述
价格说明
购买指引
续费指引
停服说明
退费说明
开发指引
Demo 专区
开通服务
体验 Demo
快速跑通
下载中心
SDK & Demo 源码
更新日志
聊天互动(含 UI)
TUIKit 组件介绍
快速开始
全功能接入
单功能接入
AI 集成
构建基础界面
更多特性
定义外观
国际化界面语言
推送服务(Push)
服务概述
名词解释
开通服务
快速跑通
厂商通道
数据统计
排查工具
客户端 API
服务端 API
推送回调
高级功能
更新日志
错误码
常见问题
智能客服
功能概述
快速入门
集成指引
管理员操作手册
客服操作手册
更多实践
直播间搭建
AI 聊天机器人方案
超大娱乐协作社群
Discord 实现指南
游戏内集成 Chat 指南
类 WhatsApp Channel 搭建方案
发送红包
Chat 应对防火墙限制相关
无 UI 集成
快速开始
集成 SDK
初始化
登录登出
消息相关
会话相关
群组相关
社群话题
用户管理
离线推送
云端搜索
本地搜索
公众号
客户端 API
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C 接口
C++
服务端 API
生成 UserSig
REST API
第三方回调
控制台指南
新版控制台介绍
创建并升级应用
基本配置
功能配置
账号管理
群组管理
公众号管理
回调配置
用量统计
资源包查看指南
实时监控
开发辅助工具
访问管理
高级功能
常见问题
uni-app 常见问题
购买相关问题
SDK 相关问题
账号鉴权相关问题
用户资料与关系链相关问题
消息相关问题
群组相关问题
直播群相关问题
昵称头像相关问题
协议与认证
服务等级协议
安全合规认证
IM 政策
隐私政策
数据隐私和安全协议
平滑迁移方案
平滑迁移完整版
平滑迁移简化版
错误码
联系我们

Web & H5 & Uniapp(Vue)

PDF
聚焦模式
字号
最后更新时间: 2024-07-10 16:26:41

功能体验








含 UI 集成

快速集成消息云端搜索

Web&H5 Vue2&Vue3
Uniapp Vue2&Vue3

步骤1: 集成TUIKit

@tencentcloud/chat-uikit-vue ≥ 2.0.0,如未集成,请务必先根据 Vue2 & Vue3 TUIKit 快速集成指引 进行集成。

步骤2:控制台开通云端搜索插件

注意:
每个插件限免费试用 1 次,有效期 7 天,试用结束后将停服,请提前购买。试用时,仅支持搜索开通云端搜索功能后产生的消息内容,不支持历史消息搜索;购买插件后,将自动同步历史消息,支持历史消息搜索。

步骤3:搜索您的第一条消息

步骤1: 集成TUIKit

@tencentcloud/chat-uikit-uniapp ≥ 2.0.6,如未集成,请请务必先根据 uniapp TUIKit 快速集成指引 进行集成。

步骤2:控制台开通云端搜索插件

注意:
每个插件限免费试用 1 次,有效期 7 天,试用结束后将停服,请提前购买。试用时,仅支持搜索开通云端搜索功能后产生的消息内容,不支持历史消息搜索;购买插件后,将自动同步历史消息,支持历史消息搜索。

步骤3:搜索你的第一条消息

在完成 Uniapp TUIKit 快速集成指引 - 步骤6: 发送您的第一条消息后,搜索您刚才发送的消息。

独立引入消息云端搜索

说明:
以上 快速集成消息云端搜索 中已默认包含消息云端搜索全部功能,无需重复引入。
如果您想独立引入 <TUISearch> 消息云端搜索,请参考以下教程。
Web&H5 Vue2&Vue3
Uniapp Vue2&Vue3

前提条件

@tencentcloud/chat-uikit-vue ≥ 2.0.0,如未集成,请务必先根据 Vue2 & Vue3 TUIKit 快速集成指引进行集成。

引入 <TUISearch>

在您所需要使用 消息云端搜索 功能的 .vue 界面,引入 <TUISearch>
<TUISearch> 参数说明
参数名
类型
说明
searchType
String
global:全局搜索(default)
conversation:会话内搜索
<TUISearch> 效果展示
<TUISearch searchType="global" />
<TUISearch searchType="conversation" />






使用 TUISearch
import { TUISearch } from "@tencentcloud/chat-uikit-vue";
// 全局搜索
<TUISearch searchType="global" />
// 会话内搜索
<TUISearch searchType="conversation" />
删除默认引入的 TUISearch
TUIKit 中默认集成 <TUISearch>, 如您不按照默认集成方式使用,可在 TUIKit/index.vue 中,注释掉<TUISearch>即可。
Uniapp TUISearch 支持两种方式引入:组件方式引入与界面方式引入。

前提条件

@tencentcloud/chat-uikit-uniapp ≥ 2.0.6,如未集成,请请务必先根据 uniapp TUIKit 快速集成指引 进行集成。
组件方式引入
界面方式引入
在您所需要使用 消息云端搜索 功能的 .vue 界面,引入 <TUISearch>
<TUISearch> 参数说明
参数名
类型
说明
searchType
String
global:全局搜索
conversation:会话内搜索(default)
<TUISearch> 效果展示
<TUISearch searchType="global" />
<TUISearch searchType="conversation" />






使用 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 填入 globalSearchTypeKeysconversationSearchTypeKeys 即可。
// 例如,将以上新增的 自定义消息 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 增加相应的国际化词条进行翻译。





帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈