共计 7808 个字符，预计需要花费 20 分钟才能阅读完成。
► 相干链接：
① MobileIMSDK-Uniapp 端的具体介绍
② MobileIMSDK-Uniapp 端的开发手册 new（* 精编 PDF 版）
一、理论知识筹备
您须要对 Uniapp 和 Vue 开发有所理解：
1）Uniapp 官网入门教程
2）可能是最好的 uniapp 入门教程
3）Uniapp 官网 Vue
疾速入门教程您须要对 WebSocket 技术有所理解：
1）老手疾速入门：WebSocket 扼要教程
2）WebSocket 详解（一）：初步意识 WebSocket 技术
3）WebSocket 从入门到精通，半小时就够！
4）从零了解 WebSocket 的通信原理、协定格局、安全性规范
WebSocket 协定文档、API 手册：
1）WebSocket 的 API 手册
2）WebSocket 的规范文档
Uniapp 的 WebSocket 文档和手册：
1）uniapp 官网文档
二、开发工具筹备
1）HBuilderX：
（JackJiang 应用的版本号如下图所示，为了不便间接援用工程，倡议你也应用此版或较新版本）2）一站式下载地址：HBuilderX 官网下载地址点此进入。3）HBuilderX 成果预览：
三、SDK 文件用处阐明
3.1 文件概览纯 Uniapp 规范 JS API 实现，无任何第 3 方库依赖，更无本地原生代码混编：MobileIMSDK-Uniapp 端 SDK 自身只是 JS 文件源码的汇合，自带的 Demo 代码只是为了不便随时测试 SDK 代码，目标次要是用于演示 SDK 的 API 调用，Demo 代码不属于 SDK 框架的一部分。大抵的目录阐明：
3.2 具体阐明 SDK 各模块 / 文件作用阐明：
四、次要 API 接口
4.1 次要 API 接口概览
所有 SDK 接口均由 /mobileimsdk/mobileimsdk-client-sdk.js 提供。以下是次要 API 接口概览图。
如下图所示：接口设计跟 MobileIMSDK 的 APP 版一样，均为高内聚和低侵入式的回调形式传入业务层解决逻辑，无需（也不倡议）开发者间接批改 sdk 级代码。
4.2 次要 API 接口概览
1）IMSDK.isLogined()：
用处：是否曾经实现过首次登陆。
阐明：用户一旦从自已的利用中实现登陆 IM 服务器后，本办法就会始终返回 true（直到退出登陆 IM）。
返回值：{boolean}，true 示意已实现首次胜利登陆（即曾经胜利登陆过 IM 服务端了，前面掉线时不影响此标识），否则示意尚未连贯 IM 服务器。
2）IMSDK.isOnline()：
用处：是否在线。阐明：示意网络连接是否失常。
返回值：{boolean}，true 示意网络连接失常，否则示意已掉线，本字段只在 this._logined=true 时有意义（如果都没有登陆到 IM 服务器，怎么存在在线或掉线的概念呢）。
3）IMSDK.getLoginInfo()：
用处：返回登陆时提交的登陆信息（用户名、明码 /token 等）。
阐明：格局形如：{loginUserId:”,loginToken:”}，此返回值的内容由调用登陆函数 loginImpl()时传入的内容决定。
字段定义详见：PLoginInfo 返回值：{boolean}，true 示意网络连接失常，否则示意已掉线，本字段只在 this._logined=true 时有意义（如果都没有登陆到 IM 服务器，怎么存在在线或掉线的概念呢）。
4）IMSDK.sendData(p, fnSucess, fnFail, fnComplete)：
用处：向某人发送一条音讯。
参数 p：{Protocal} 要发送的音讯协定包对象，Protocal 详情请见“/module/mb_constants.js”下的 createCommonData 函数阐明。
参数 fnSuccess：{function} 接口调用胜利的回调函数，
非必填项参数 fnFail：{function} 接口调用失败的回调函数，
非必填项参数 fnComplete：{function} 接口调用完结的回调函数（调用胜利、失败都会执行），
非必填项返回值：{int} 0 示意胜利，否则示意错误码，错码详见“/module/mb_constants.js”下的 MBErrorCode 对象属性阐明。
5）IMSDK.disconnectSocket()：
用处：客户端被动断开客户端 socket 连贯。
阐明：当开发者登陆 IM 后，须要退出登陆时，调用本函数就对了，本函数相当于登陆函数 loginImpl()的逆操作。
6）IMSDK.setDebugCoreEnable(enable)：
用处：是否开启 MobileIMSDK-Uniapp 端外围算法层的 log 输出，不便开发者调试。
参数 enable：{boolean} true 示意开启 log 输入，否则不输入，开发者不调用本函数的话零碎默认是 false（即不输入 log）。
7）IMSDK.setDebugSDKEnable(enable)：
用处：是否开启 MobileIMSDK-Uniapp 端框架层的 log 输出，不便开发者调试。
参数 enable：{boolean} true 示意开启 log 输入，否则不输入，开发者不调用本函数的话零碎默认是 false（即不输入 log）。
8）IMSDK.setDebugPingPongEnable(enable)：
用处：是否开启 MobileIMSDK-Uniapp 端框架层的底层网络 WebSocket 心跳包的 log 输入，不便开发者调试。
参数 enable：{boolean} true 示意开启 log 输入，否则不输入，开发者不调用本函数的话零碎默认是 false（即不输入 log）。
留神：必须 setDebugEnable(true) 且 setDebugPingPongEnable(true) 时，心跳 log 才会真正输入，不便管制。
返回值：true 示意开启 log 输入，否则不输入，开发者不调用本函数的话零碎默认是 false（即不输入 log）。
9）IMSDK.loginImpl(varloginInfo, wsUrl)：
用处：登陆 / 连贯 MobileIMSDK 服务器时调用的办法。
阐明：登陆 / 连贯 MobileIMSDK 服务器由本函数发动参数
varloginInfo：{PLoginInfo} 必填项，登陆要提交给 Websocket 服务器的认证信息，不可为空，对象字段定义见：
PLoginInfo 参数 wsUrl：{string} 必填项：要连贯的 Websocket 服务器地址，不可为空，形如：wss://yousite.net:3000/websocket。
10）IMSDK.callback_onIMLog(message, toConsole)：
用处：由开发者设置的回调办法：用于 debug 的 log 输入。
举荐用法：开发者可在此回调中依照自已的用意打印 MobileIMSDK 微信小程序端框架中的 log，不便调试时应用。
参数 1：{String}：必填项，字符串类型，示意 log 内容。
参数 2：{boolean}：选填项，true 示意输入到 console，否则默认形式 (由开发者设置的回调决定)。
11）IMSDK.callback_onIMData(p, options)：
用处：由开发者设置的回调办法：用于收到聊天音讯时在 UI 上展示进去（事件告诉于收到 IM 音讯时）。
举荐用法：开发者可在此回调中解决收到的各种 IM 音讯。
参数 1：{Protocal}：详情请见“/module/mb_constants.js”下的 Protocal 类定义)。
12）IMSDK.callback_onIMAfterLoginSucess()：
用处：由开发者设置的回调办法：客户端的登陆申请被服务端胜利认证实现后的回调（事件告诉于 登陆 / 认证 胜利后）。
举荐用法：开发者可在此回调中进行登陆 IM 服务器胜利后的解决。
13）IMSDK.callback_onIMAfterLoginFailed(isReconnect)：
用处：由开发者设置的回调办法：客户端的登陆申请被服务端认证失败后的回调（事件告诉于 登陆 / 认证 失败后）。
阐明：
补充阐明：登陆 / 认证失败的起因可能是用户名、明码等不正确等，但具体逻辑由服务端的 callBack_checkAuthToken 回调函数去解决。
举荐用法：开发者可在此回调中提醒用户登陆 IM 服务器失败。
参数 1：{boolean}：true 示意是掉线重连后的认证失败（在登陆其间可能用户的明码信息等产生了变更），否则示意首次登陆时的认证失败。
14）IMSDK.callback_onIMReconnectSucess()：
用处：由开发者设置的回调办法：掉线重连胜利后的回调（事件告诉于掉线重连胜利后）。
举荐用法：开发者可在此回调中解决掉线重连胜利后的界面状态更新等，比方设置将界面上的“离线”文字更新成“在线”。
15）IMSDK.callback_onIMDisconnected()：
用处：由开发者设置的回调办法：网络连接已断开时的回调（事件告诉于与服务器的网络断开后）。
举荐用法：开发者可在此回调中解决掉线时的界面状态更新等，比方设置将界面上的“在线”文字更新成“离线”。
16）IMSDK.callback_onIMPing()：
用处：由开发者设置的回调办法：本地收回心跳包后的回调告诉（本回调并非 MobileIMSDK-Uniapp 端外围逻辑，开发者能够不须要实现！）。
举荐用法：开发者可在此回调中解决底层网络的流动状况。
17）IMSDK.callback_onIMPong()：
用处：由开发者设置的回调办法：收到服务端的心跳包反馈的回调告诉（本回调并非 MobileIMSDK-Uniapp 端外围逻辑，开发者能够不须要实现！）。
举荐用法：开发者可在此回调中解决底层网络的流动状况。
18）IMSDK.callback_onIMShowAlert(alertContent)：
用处：由开发者设置的回调办法：框架层的一些提示信息显示回调（本回调并非 MobileIMSDK-Uniapp 端外围逻辑，开发者能够不须要实现！）。
阐明：开发者不设置的状况下，框架默认将调用 wx.showModal()显示提示信息，否则将应用开发者设置的回调——目标次要是给开发者自定义这种信息的 UI 显示，晋升 UI 体验，别无它用】。
参数 1：{String}：必填项，文本类型，示意提醒内容。
19）IMSDK.callback_onIMKickout(kickoutInfo)：
用处：由开发者设置的回调办法：收到服务端的“踢出”指令（本回调并非 MobileIMSDK-Uniapp 端外围逻辑，开发者能够不须要实现！）。
参数 1：{PKickoutInfo}：非空，详见：PKickoutInfo
20）IMSDK.callback_onMessagesLost(lostMessages)：
用处：由开发者设置的回调办法：音讯未送达的回调事件告诉。
产生场景：比方用户刚发完音讯但网络曾经断掉了的状况下，表现形式如：就像手机 qq 或微信一样音讯气泡边上会呈现红色图标以示没有发送胜利）。
倡议用处：应用层可通过回调中的指纹特色码找到原音讯并能够 UI 上将其标记为“发送失败”以便即时告之用户。
参数 1：{Array<rotocal>}：由框架的 QoS 算法断定进去的未送达音讯列表。
21）IMSDK.callback_onMessagesBeReceived(theFingerPrint)：
用处：由开发者设置的回调办法：音讯已被对方收到的回调事件告诉。
阐明：目前，断定音讯被对方收到是有两种可能：
1) 对方的确是在线并且实时收到了；
2) 对方不在线或者服务端转发过程中出错了，由服务端进行离线存储胜利后的反馈（此种状况严格来讲不能算是“已被收到”，但对于应用层来说，离线存储了的音讯原则上就是已送达了的音讯：因为用户下次登陆时必定能通过 HTTP 协定取到）。
倡议用处：应用层可通过回调中的指纹特色码找到原音讯并能够 UI 上将其标记为“发送胜利”以便即时告之用户。
参数 1：{String}：已被收到的音讯的指纹特色码（惟一 ID），应用层可据此 ID 找到原先已发的音讯并可在 UI 是将其标记为”已送达“或”已读“以便晋升用户体验。
五、如何接入 SDK
5.1 如何引入 SDK 到您的 Uniapp 工程中？
很简略：只须要将第 2 节中提到的 SDK 所有 JS 文件复制到您的 Uniapp 工程下即可。以下是 SDK 全副文件在工程中的门路和地位（以自带的 Demo 工程为例，如下图所示）：
5.2 如何在代码中调用 SDK？
第一步：援用 SDK 的接口主文件（具体例子详见 Demo 中的 im-manager.js 文件）
第二步：为 SDK 设置回调各种函数（具体例子详见 Demo 中的 im-manager.js 文件）
第三步：初始化 SDK（具体例子详见 Demo 中的 main.js 文件）
留神：上图中登录连贯的 IP 地址请设置为您的 MobileIMSDK 服务器地址哦。第四步：在你的主界面或登陆界面中调用 IM 的登陆办法即可（具体例子详见 Demo 中的主界面 index.vue 文件）
六、Demo 运行成果和性能阐明
▲ 上图是以 iOS 真机为例的运行截图（其它设施运行成果请见本文档前面的章节）
七、Demo 运行办法（运行到浏览器中）
7.1 重要阐明特地阐明：MobileIMSDK 的 Uniapp 端工程（包含 Demo 代码），不依赖任何第 3 方库，也不存在任何 Native 代码混编，齐全应用 Uniapp 官网规范 API 实现，所以你在拿到 MobileIMSDK 的 Uniapp 端工程后间接开箱即可运行，切莫搞简单、不要擅自加戏！
7.2 配置要连贯的 MobileIMSDK 服务器 IP 留神：下图中登陆连贯的 IP 地址请设置为您自已的 MobileIMSDK 服务器地址哦。情谊提醒：MobileIMSDK 的服务端该怎么部署就不是本手册要探讨的内容了，你能够参见《即时通讯框架 MobileIMSDK 的 Demo 应用帮忙：Server 端》。
▲ 配置要连贯的服务器 IP（以上代码详见 /app.js 文件）
7.3 一键运行如下图所示，在弹出菜单中点击“运行到内置浏览器”后，将主动在右边模拟器里显示自带的 Demo 界面：
7.4 在内置浏览器中的运行成果
1）Demo 的登陆界面运行截图：
2）Demo 的主界面运行截图：
3）Demo 运行的同时，能够查看具体的 log 输入（不便调试）：
7.5 在电脑浏览器中的运行成果（以 Chrome 为例）
1）Demo 的登陆界面在 Chrome 中的运行截图：
2）Demo 的主界面在 Chrome 中的运行截图：
八、Demo 运行办法（运行到 Android 真机）
8.1 抉择要运行的 App 基座
如下图所示，在弹出菜单中点击“运行到 Android App 基座”：
8.2 抉择要运行的 Android 真机如下图所示，在弹出菜单中选择已通过 USB 连贯的 Android 手机并点击“运行”：
8.3 在 Android 真机上的运行成果
九、Demo 运行办法（运行到 iOS 模拟器）
9.1 抉择要运行的 App 基座如下图所示，在弹出菜单中点击“运行到 iOS 模拟器 App 基座”：
9.2 抉择正在运行中的 iOS 模拟器如下图所示，在弹出菜单中选择已通过 XCode 启动的 iOS 模拟器并点击“运行”：
9.3 在 iOS 模拟器上的运行成果 1）Demo 运行残缺截屏：
2）Demo 运行实拍照片：
十、Demo 运行办法（运行到 iOS 真机）
10.1 抉择要运行的 App 基座如下图所示，在弹出菜单中点击“运行到 iOS App 基座”：
10.2 配置开发者证书签名等如下图所示，在弹出菜单中点击“应用 Apple 证书签名”（以便配置好真机须要的开发者证书等信息）：
10.3 抉择要运行的 iOS 真机如下图所示，在弹出菜单中选择已通过 USB 连贯的 iOS 真机并点击“运行”：
10.4 在 iOS 真机上的运行成果
十一、Demo 运行办法（运行到微信小程序）
11.1 抉择要导出的基座如下图所示，在弹出菜单中点击“微信开发者工具”（它将主动生成微信小程序并主动找开微信开发者工具）：
11.2HBuilderX 将主动生成微信小程序 1）HBuilder 主动生成微信小程序胜利时的控制台日志信息输入（有这样的信息就示意生成胜利了）：
2）HBuilder 会主动关上微信小程序开发工具，并导入上一步中主动生成的微信小程序：
十二、Demo 运行办法（运行到支付宝小程序）
12.1 抉择要导出的基座如下图所示，在弹出菜单中点击“支付宝开发者工具”（它将主动生成支付宝小程序并主动找开支付宝开发工具）：
12.2HBuilderX 将主动生成支付宝小程序 1）HBuilder 主动生成支付宝小程序胜利时的控制台日志信息输入（有这样的信息就示意生成胜利了）：
2）HBuilder 会主动关上支付宝小程序开发工具，手动导入上一步中主动生成的支付宝小程序：
十三、常见问题（FAQ）
13.1 为什么管制台下有些 log 不显示？
起因是：微信开发工具中，管制台下的日志级别默认进行了过过滤，勾选所有日志级别，就能看到 SDK 的具体日志输入了。勾选所有的日志输入级别：
而后就能看到 SDK 中具体的日志输入了（就像下图这样），不便调试和钻研：
13.2HBuilderX 内置浏览器对 css 的 mask-image 反对存在 bug 此 Bug 带来的景象：当运行在 HuilderX 的内置浏览器中，滚动条呈现时，图标就变成了方块了（mask-image 属性生效了）。影响范畴：经重复测试，Android、ios、PC 浏览器中都能失常运行，唯独 HuilderX 的内置浏览器会出这个问题。以下是 Bug 导致的问题截图：
Bug 上报地址：https://ask.dcloud.net.cn/question/168312 解决办法：目前暂无解决办法，只能等官网解决，好在只影响 HBuilderX 的内置浏览器，而内置浏览器除了偶然用于调试预览以外，并没有更多用处，所以没影响。此处特地写出，只是让开发者遇到此景象时不要困惑。
13.3HBuilderX 生成的领取小程序代码在 WebSocket 上存在 bug 此 Bug 带来的景象：当运行 HBuilderX 的生成的支付宝小程序时，一旦运行就会报“Cannot read properties of undefined (reading ‘onOpen’)”谬误。进而无奈实现网络连接。影响范畴：当于仅影响 HBuilderX 的生成的支付宝小程序。
以下是 Bug 导致的问题 log 信息：
Bug 上报地址：https://ask.dcloud.net.cn/question/168947 解决办法：目前暂无解决办法，只能等官网解决，临时测试时只影响了 HBuilderX 生成的支付宝小程序。
十四、援用材料
[1] Uniapp 官网开发者手册
[2] MobileIMSDK 开源框架的 API 文档
[3] MobileIMSDK 开源 IM 框架源码（Github 地址点此）
[4] MobileIMSDK-Uniapp 端发布公告
[5] MobileIMSDK-Uniapp 端根本介绍
[6] MobileIMSDK-Uniapp 端的开发手册（* 精编 PDF 版）
[7] MobileIMSDK 的 Demo 应用帮忙：Server 端[8] WebSocket 从入门到精通，半小时就够！
