► 相干链接：
① 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从入门到精通，半小时就够！