# 36shuo

**Repository Path**: lancer_0/36shuo

## Basic Information

- **Project Name**: 36shuo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev-vue3
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-24
- **Last Updated**: 2026-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Easemob UIKit Demo (Vue3)

<Toc />

环信单群聊 UIKit 是基于环信即时通讯云 IM SDK 开发的一款即时通讯 UI 组件库，提供各种组件实现会话列表、聊天界面、联系人列表及后续界面等功能，帮助开发者根据实际业务需求快速搭建包含 UI 界面的即时通讯应用。

示例项目中上传头像，获取群组头像功能依赖 app server 来实现，如果你要实现自己的 app server，请参考app server [示例代码](https://github.com/easemob/easemob-demo-appserver/tree/dev-demo)。需要确保 app server 中使用的 appKey 和本项目中配置的是相同的。


## 支持平台（vue3）

- Android
- iOS
- 微信小程序
- H5

## 静态资源说明

UIKit中依赖的静态资源（`ChatUIKit/assets`）放置在环信服务器中,有访问频率限制，建议您将静态资源放置在您的业务服务器上，然后修改 `ChatUIKit/const/index.ts` 文件中的 `ASSETS_URL` 为您的资源服务器地址。

## 快速跑通DEMO

### 1.下载 `easemob-uikit-uniapp` 项目并安装依赖


下载源码到你当前的工作空间 ${workspace}

```bash
git clone https://github.com/easemob/easemob-uikit-uniapp.git
```

切换路径到 `${workspace}/easemob-uikit-uniapp/demo` 中，并安装项目依赖。

```bash
cd easemob-uikit-uniapp/demo && npm i
```

### 2. 通过 HBuilderX打开demo项目

通过 [HBuilderX](https://dcloud.io/hbuilderx.html) 打开项目中的 demo 文件夹, 即 `${workspace}/easemob-uikit-uniapp/demo`

### 3. 获取环信AppKey和服务连接地址

AppKey和服务器连接地址可在 [环信即时通讯云控制台](https://console.easemob.com/) 中获取。

在应用列表中获取AppKey

<img src="./image1.png" alt="appkey" width="500" />

点击管理进入`即时通讯/服务概览`，获取您的服务连接地址

<img src="./image2.png" alt="url" width="500" />


将获得的appKey和服务器连接地址，赋值给 `${workspace}/easemob-uikit-uniapp/demo/const/index.ts` 文件中的 `APPKEY`、 `API_URL` 和 `URL` 参数。

```javascript
const APPKEY = "";  // 环信appkey
const API_URL = "" // 环信 rest api地址 https协议
const URL = "" // 环信 websocket 地址 wss协议
```

### 第四步：使用 HBuilderX 运行 demo

打开 HBuilderX 工具栏 -> 运行, 选择指定运行平台, 例如浏览器, 然后点击运行

<img src="./image3.png" alt="run" width="300" />


## 自定义消息模板


```javascript
const msg = chatSDK.message.create({
	to: convStore.currConversation!.conversationId,
	chatType: convStore.currConversation!.conversationType,
	type: "custom",
	customExts:{
		"text":"您好！为便于我们更好地了解您，建议您先填写您的基本信息和预期目标。",
		"butName":"点击即可开始填写", // 点击按钮文字
		"url":"roure", // 路径
		"id":"100", // id
		type:"", // 类型
	},
	customEvent:"textLink",
});
ChatUIKit.messageStore.sendMessage(msg);
```



## 相关链接

- [集成文档](https://doc.easemob.com/uikit/chatuikit/uniapp/chatuikit_integrated.html);