Merge pull request #1489 from haoxiuwen/doc-v2

Optimize Applet Integration Docs

Author: haoxiuwen

docs/document/applet/alipay.md

@@ -2,15 +2,17 @@
 
 <Toc />
 
-### 注册环信账号
+支付宝小程序 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，并挂载在全局对象下。
 

docs/document/applet/baidu.md

@@ -1,16 +1,16 @@
 # 百度小程序集成介绍
 
-<Toc />
+百度小程序 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，并挂载在全局对象下。
 
@@ -80,5 +78,6 @@ WebIM.conn = new WebIM.connection({
   useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url）
   isHttpDNS: false, // 在小程序上需设置为false
 });
+```
 
 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。

docs/document/applet/bytedance.md

@@ -2,15 +2,17 @@
 
 <Toc />
 
-### 注册环信账号
+抖音小程序 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，并挂载在全局对象下。
 
@@ -77,6 +74,6 @@ WebIM.conn = new WebIM.connection({
   useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url）
   isHttpDNS: false, // 在小程序上需设置为false
 });
-
+```
 
 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。

docs/document/applet/qq.md

@@ -2,23 +2,21 @@
 
 <Toc />
 
-## 前提条件
+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，并挂载在全局对象下。
 
@@ -84,5 +78,6 @@ WebIM.conn = new WebIM.connection({
   useOwnUploadFun: false, // 是否使用自己的上传方式（如将图片文件等上传到自己的服务器，构建消息时只传url）
   isHttpDNS: false, // 在小程序上需设置为false
 });
+```
 
 小程序端的基本功能和 Web 端一致，请参考 [Web 端文档](/document/web/integration.html)。

docs/document/applet/wechat.md

@@ -1,20 +1,18 @@
-# 微信小程序集成介绍
+# 微信小程序集成
 
 <Toc />
 
-### 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，并挂载在全局对象下。