From a9e0b76bb01e88b1e1b9d74b84fc492151e64376 Mon Sep 17 00:00:00 2001 From: haoxiuwen Date: Fri, 7 Nov 2025 11:01:29 +0800 Subject: [PATCH] Optimize Applet Integration Docs --- docs/document/applet/alipay.md | 28 ++++++++++++------------- docs/document/applet/baidu.md | 25 +++++++++++----------- docs/document/applet/bytedance.md | 25 ++++++++++------------ docs/document/applet/qq.md | 35 +++++++++++++------------------ docs/document/applet/wechat.md | 30 +++++++++++--------------- 5 files changed, 63 insertions(+), 80 deletions(-) diff --git a/docs/document/applet/alipay.md b/docs/document/applet/alipay.md index 247689feb..df5255029 100644 --- a/docs/document/applet/alipay.md +++ b/docs/document/applet/alipay.md @@ -2,15 +2,17 @@ -### 注册环信账号 +支付宝小程序 SDK 集成步骤如下： -开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，来获取唯一 App Key，SDK 初始化时需要配置 App Key。 +## 步骤一 注册环信账号 -### 搭建支付宝小程序开发环境 +开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，获取唯一 App Key，SDK 初始化时需要配置 App Key。 + +## 步骤二 搭建支付宝小程序开发环境 首先需要下载并安装 [开发者工具](https://opendocs.alipay.com/mini/ide/download)，然后按照支付宝小程序的 [接入流程](https://opendocs.alipay.com/mini/006kyi) 一步步创建一个小程序。 -### 配置服务器域名 +## 步骤三 配置服务器域名 小程序在发布前，需要配置合法域名。 @@ -38,36 +40,32 @@ ![img](/images/applet/service_overview.png) -### 说明 - +:::tip 支付宝小程序：支付宝小程序在一段时间内只能保留一个 WebSocket 连接，如果当前已存在 WebSocket 连接，那么会自动关闭该连接，并重新创建一个新的 WebSocket 连接。 +::: -### 集成 SDK - -#### 下载 SDK +## 步骤四 下载 SDK 可以通过以下两种方式获取 SDK： -- 通过官网 [下载 SDK](https://www.easemob.com/download/im)。 +- 通过官网 [下载 SDK](https://www.easemob.com/download/im#applets)。 - 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件。 -#### 引入 SDK +## 步骤五 引入 SDK - 开始一个全新的项目 1. 将下载的 SDK（src/sdk/）导入到自己的项目中。 2. 引入 SDK：`import EasemobChat from "../sdk/Easemob-chat-4.x.x.js";` - 基于 Demo 二次开发 -将下载的代码导入开发者工具即可运行起来。 - -#### 调用示例 +将下载的代码导入开发者工具即可运行起来。调用示例如下： ```javascript //使用示例 import EasemobChat from "../sdk/Easemob-chat-4.x.x.js"; // 4.0 版本sdk ``` -#### 实例调用方式 +## 步骤六 实例化 SDK 实例化 SDK，并挂载在全局对象下。 diff --git a/docs/document/applet/baidu.md b/docs/document/applet/baidu.md index 0c0b6dd17..5a3c1f23d 100644 --- a/docs/document/applet/baidu.md +++ b/docs/document/applet/baidu.md @@ -1,16 +1,16 @@ # 百度小程序集成介绍 - +百度小程序 SDK 集成步骤如下： -### 注册环信账号 +## 步骤一 注册环信账号 -开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，来获取唯一 App Key，SDK 初始化时需要配置 App Key。 +开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，获取唯一 App Key，SDK 初始化时需要配置 App Key。 -### 搭建百度小程序开发环境 +## 步骤二 搭建百度小程序开发环境 首先需要下载并安装 [开发者工具](https://smartprogram.baidu.com/docs/introduction/tool/)，然后按照百度小程序的 [接入流程](https://smartprogram.baidu.com/docs/develop/tutorial/startdevelop/) 一步步创建一个小程序。 -### 配置服务器域名 +## 步骤三 配置服务器域名 小程序在发布前，需要配置合法域名。 @@ -38,20 +38,18 @@ ![img](/images/applet/service_overview.png) -### 说明 - +:::tip 百度小程序注册主体不能为个人，必须为企业、媒体、政府等。 +::: -### 集成 SDK - -#### 下载 SDK +## 步骤四 下载 SDK 可以通过以下两种方式获取 SDK： - 通过官网 [下载 SDK](https://www.easemob.com/download/im) - 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件 -#### 引入 SDK +## 步骤五 引入 SDK - 开始一个全新的项目 1. 将下载的 SDK（src/sdk/）导入到自己的项目中。 @@ -60,14 +58,14 @@ 将下载的代码导入开发者工具即可运行起来。 -#### 调用示例 +调用示例如下所示： ```javascript //使用示例 import EasemobChat from "../sdk/Easemob-chat-4.x.x.js"; // 4.0 版本sdk ``` -#### 实例调用方式 +## 步骤六 实例化 SDK 实例化 SDK，并挂载在全局对象下。 @@ -79,5 +77,6 @@ WebIM.conn = new WebIM.connection({ apiUrl: "https://a1.easemob.com", // rest server useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url） }); +``` 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。 diff --git a/docs/document/applet/bytedance.md b/docs/document/applet/bytedance.md index 06de65820..1f0ec8947 100644 --- a/docs/document/applet/bytedance.md +++ b/docs/document/applet/bytedance.md @@ -2,15 +2,17 @@ -### 注册环信账号 +抖音小程序 SDK 集成步骤如下： -开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，来获取唯一 App Key，SDK 初始化时需要配置 App Key。 +## 步骤一 注册环信账号 -### 搭建抖音小程序开发环境 +开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，获取唯一 App Key，SDK 初始化时需要配置 App Key。 + +## 步骤二 搭建抖音小程序开发环境 首先需要下载并安装 [开发者工具](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/developer-instrument-update-and-download/)，然后按照抖音小程序的 [接入流程](https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/guide/start/kick-off) 一步步创建一个小程序。 -### 配置服务器域名 +## 步骤三 配置服务器域名 小程序在发布前，需要配置合法域名。 @@ -38,33 +40,28 @@ ![img](/images/applet/service_overview.png) -### 集成 SDK - -#### 下载 SDK +## 步骤四 下载 SDK 可以通过以下两种方式获取 SDK： - 通过官网 [下载 SDK](https://www.easemob.com/download/im) - 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件 - -#### 引入 SDK +## 步骤五 引入 SDK - 开始一个全新的项目 1. 将下载的 SDK（src/sdk/）导入到自己的项目中。 2. 引入 SDK：`import EasemobChat from "../sdk/Easemob-chat-4.x.x.js";` - 基于 Demo 二次开发 -将下载的代码导入开发者工具即可运行起来。 - -#### 调用示例 +将下载的代码导入开发者工具即可运行起来。调用示例如下： ```javascript //使用示例 import EasemobChat from "../sdk/Easemob-chat-4.x.x.js"; // 4.0 版本sdk ``` -#### 实例调用方式 +## 步骤六 实例调用方式 实例化 SDK，并挂载在全局对象下。 @@ -76,6 +73,6 @@ WebIM.conn = new WebIM.connection({ apiUrl: "https://a1.easemob.com", // rest server useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url） }); - +``` 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。 diff --git a/docs/document/applet/qq.md b/docs/document/applet/qq.md index da9a662c7..73d8d2768 100644 --- a/docs/document/applet/qq.md +++ b/docs/document/applet/qq.md @@ -2,23 +2,21 @@ -## 前提条件 +QQ 小程序 SDK 集成步骤如下： -### 注册环信账号 +## 步骤一 注册环信账号 -开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，来获取唯一 appKey，SDK 初始化时需要配置 appKey。 +开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html) 获取唯一 appKey，SDK 初始化时需要配置 appKey。 -## 实现步骤 - -### 搭建 QQ 小程序开发环境 +## 步骤二 搭建 QQ 小程序开发环境 首先需要下载并安装 [开发者工具](https://q.qq.com/wiki/tools/devtool/)，然后按照 QQ 小程序的 [接入流程](https://q.qq.com/wiki/#_2-注册开发者平台) 一步步创建一个小程序 -### 配置服务器域名 +## 步骤三 配置服务器域名 小程序在发布前，需要配置合法域名。 -登录 QQ 小程序 [开发者平台](https://q.qq.com/)，进入 “开发 > 开发设置” 页面配置以下服务器地址。 +登录 QQ 小程序 [开发者平台](https://q.qq.com/)，进入 **开发 > 开发设置** 页面配置以下服务器地址。 | 域名类型 | 具体域名 | | :------ | :----- | @@ -42,36 +40,32 @@ ![img](/images/applet/service_overview.png) -### 说明 - +:::tip QQ、微信小程序： 1.7.0 及以上版本，最多可以同时存在 5 个 WebSocket 连接，需开发者控制好连接数量，超出此限制 SDK 将不能连接上服务器。 +::: -### 集成 SDK - -#### 下载 SDK +## 步骤四 下载 SDK 可以通过以下两种方式获取 SDK： -- 通过官网 [下载 SDK](https://www.easemob.com/download/im) -- 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件 +- 通过官网 [下载 SDK](https://www.easemob.com/download/im)。 +- 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件。 -#### 引入 SDK +## 步骤五 引入 SDK - 开始一个全新的项目 1. 将下载的 SDK（src/sdk/）导入到自己的项目中。 2. 引入 SDK：`import EasemobChat from "../sdk/Easemob-chat-4.x.x.js";` - 基于 Demo 二次开发 -将下载的代码导入开发者工具即可运行起来。 - -#### 调用示例 +将下载的代码导入开发者工具即可运行起来。调用示例如下： ```javascript //使用示例 import EasemobChat from "../sdk/Easemob-chat-4.x.x.js"; // 4.0 版本sdk ``` -#### 实例调用方式 +## 步骤六 实例化 SDK 实例化 SDK，并挂载在全局对象下。 @@ -83,5 +77,6 @@ WebIM.conn = new WebIM.connection({ apiUrl: "https://a1.easemob.com", // rest server useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url） }); +``` 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。 diff --git a/docs/document/applet/wechat.md b/docs/document/applet/wechat.md index d1b592e9e..a46c2d0dc 100644 --- a/docs/document/applet/wechat.md +++ b/docs/document/applet/wechat.md @@ -1,20 +1,18 @@ -# 微信小程序集成介绍 +# 微信小程序集成 -### Demo 体验 +微信小程序 SDK 集成步骤如下： -你可以[体验微信小程序 Demo](/product/demo.html#各端原生开发-demo)，使用微信扫描二维码，并查看 Demo 源码。 +## 步骤一 注册环信账号 -### 注册环信账号 +开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，获取唯一 App Key，SDK 初始化时需要配置 App Key。 -开发者需要在环信控制台 [注册并创建应用](/product/console/app_create.html)，来获取唯一 App Key，SDK 初始化时需要配置 App Key。 - -### 搭建微信小程序开发环境 +## 步骤二 搭建微信小程序开发环境 首先需要下载并安装 [开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，然后按照微信小程序的 [接入流程](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7)一步步创建一个小程序。 -### 配置服务器域名 +## 步骤三 配置服务器域名 小程序在发布前，需要配置合法域名。 @@ -44,32 +42,28 @@ ![img](/images/applet/service_overview.png) -### 集成 SDK - -#### 下载 SDK +## 步骤四 下载 SDK 可以通过以下两种方式获取 SDK： -- 通过官网 [下载 SDK](https://www.easemob.com/download/im) -- 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件 +- 通过官网 [下载 SDK](https://www.easemob.com/download/im#applets) +- 从环信的 [github 仓库](https://github.com/easemob/webim-weixin-xcx/tree/master/src/sdk) 中获取 SDK 中的文件。 -#### 引入 SDK +## 步骤五 引入 SDK - 开始一个全新的项目 1. 将下载的 SDK（src/sdk/）导入到自己的项目中。 2. 引入 SDK：`import EasemobChat from "../sdk/Easemob-chat.js";` - 基于 Demo 二次开发 -将下载的代码导入开发者工具即可运行起来。 - -#### 调用示例 +将下载的代码导入开发者工具即可运行起来。调用示例如下： ```javascript //使用示例 import EasemobChat from "../sdk/Easemob-chat-4.x.x.js"; // 4.0 版本sdk ``` -#### 实例调用方式 +## 步骤六 实例化 SDK 实例化 SDK，并挂载在全局对象下。