一、理论知识筹备
您须要对微信小程序开发有所理解:
1)真正零根底入门学习笔记系列
2)从零开始的微信小程序入门教程
3)最全教程:微信小程序开发入门详解
您须要对 WebSocket 技术有所理解:
1)老手疾速入门:WebSocket 扼要教程
2)WebSocket 详解(一):初步意识 WebSocket 技术
3)WebSocket 从入门到精通,半小时就够!
4)从零了解 WebSocket 的通信原理、协定格局、安全性
规范 WebSocket 协定文档、API 手册:
1)WebSocket 的 API 手册
2)WebSocket 的 RFC 规范文档
微信小程序中的 WebSocket API 手册:
1)微信官网 WebSocket 文档链接
小提示:微信小程序中的 WebSocket API 跟规范 HTML5 中的 WebSocket 接口及用法略有不同,但次要 API 都能一一对应,相差不大。
二、开发工具筹备
1)微信小程序开发工具:
(JackJiang 应用的版本号如上图所示,为了不便间接援用工程,倡议你也应用此版或较新版本)2)一站式下载地址:微信官网下载地址点此进入。3)微信小程序开发工具成果预览:
三、SDK 文件用处阐明
3.1 文件概览
纯微信规范 JS API 实现,无任何第 3 方库依赖:
MobileIMSDK- 微信小程序端 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- 微信小程序端外围算法层的 log 输出,不便开发者调试。
参数 enable:{boolean} true 示意开启 log 输入,否则不输入,开发者不调用本函数的话零碎默认是 false(即不输入 log)。
7)IMSDK.setDebugSDKEnable(enable):
用处:是否开启 MobileIMSDK- 微信小程序端框架层的 log 输出,不便开发者调试。
参数 enable:{boolean} true 示意开启 log 输入,否则不输入,开发者不调用本函数的话零碎默认是 false(即不输入 log)。
8)IMSDK.setDebugPingPongEnable(enable):
用处:是否开启 MobileIMSDK- 微信小程序端框架层的底层网络 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- 微信小程序端外围逻辑,开发者能够不须要实现!)。
举荐用法:开发者可在此回调中解决底层网络的流动状况。
17)IMSDK.callback_onIMPong():
用处:由开发者设置的回调办法:收到服务端的心跳包反馈的回调告诉(本回调并非 MobileIMSDK- 微信小程序端外围逻辑,开发者能够不须要实现!)。
举荐用法:开发者可在此回调中解决底层网络的流动状况。
18)IMSDK.callback_onIMShowAlert(alertContent):
用处:由开发者设置的回调办法:框架层的一些提示信息显示回调(本回调并非 MobileIMSDK- 微信小程序端外围逻辑,开发者能够不须要实现!)。
阐明:开发者不设置的状况下,框架默认将调用 wx.showModal()显示提示信息,否则将应用开发者设置的回调——目标次要是给开发者自定义这种信息的 UI 显示,晋升 UI 体验,别无它用】。
参数 1:{String}:必填项,文本类型,示意提醒内容。
19)IMSDK.callback_onIMKickout(kickoutInfo):
用处:由开发者设置的回调办法:收到服务端的“踢出”指令(本回调并非 MobileIMSDK- 微信小程序端外围逻辑,开发者能够不须要实现!)。
参数 1:{PKickoutInfo}:非空,详见:PKickoutInfo。
20)IMSDK.callback_onMessagesLost(lostMessages):
用处:由开发者设置的回调办法:音讯未送达的回调事件告诉。
产生场景:比方用户刚发完音讯但网络曾经断掉了的状况下,表现形式如:就像手机 qq 或微信一样音讯气泡边上会呈现红色图标以示没有发送胜利)。
倡议用处:应用层可通过回调中的指纹特色码找到原音讯并能够 UI 上将其标记为“发送失败”以便即时告之用户。
参数 1:{Array}:由框架的 QoS 算法断定进去的未送达音讯列表。
21)IMSDK.callback_onMessagesBeReceived(theFingerPrint):
用处:由开发者设置的回调办法:音讯已被对方收到的回调事件告诉。
阐明:目前,断定音讯被对方收到是有两种可能:– 1) 对方的确是在线并且实时收到了;– 2) 对方不在线或者服务端转发过程中出错了,由服务端进行离线存储胜利后的反馈(此种状况严格来讲不能算是“已被收到”,但对于应用层来说,离线存储了的音讯原则上就是已送达了的音讯:因为用户下次登陆时必定能通过 HTTP 协定取到)。
倡议用处:应用层可通过回调中的指纹特色码找到原音讯并能够 UI 上将其标记为“发送胜利”以便即时告之用户。
参数 1:{String}:已被收到的音讯的指纹特色码(惟一 ID),应用层可据此 ID 找到原先已发的音讯并可在 UI 是将其标记为”已送达“或”已读“以便晋升用户体验。
五、如何接入 SDK
5.1 如何引入 SDK 到您的微信小程序工程中?
很简略:只须要将第 2 节中提到的 SDK 所有 JS 文件复制到您的微信小程序工程下即可。
以下是 SDK 全副文件在工程中的门路和地位(以自带的 Demo 工程为例,如下图所示):
5.2 如何在代码中调用 SDK?
第一步:援用 SDK 的接口主文件(具体例子详见 Demo 中的 im-manager.js 文件)
第二步:为 SDK 设置回调各种函数(具体例子详见 Demo 中的 im-manager.js 文件)
第三步:初始化 SDK(具体例子详见 Demo 中的 app.js 文件)
留神:上图中登录连贯的 IP 地址请设置为您的 MobileIMSDK 服务器地址哦。第四步:在你的主界面或登陆界面中调用 IM 的登陆办法即可(具体例子详见 Demo 中的主界面 main.js 文件)
六、Demo 运行办法(模拟器形式)
6.1 重要阐明
MobileIMSDK 的小程序端工程(包含 Demo 代码),不依赖任何第 3 方库,齐全应用微信小程序官网规范 API 实现,所以你在拿到 MobileIMSDK 的小程序端工程后间接开箱即可运行,切莫搞简单、不要擅自加戏!
6.2 配置要连贯的 MobileIMSDK 服务器 IP
留神:下图中登陆连贯的 IP 地址请设置为您自已的 MobileIMSDK 服务器地址哦。
情谊提醒:MobileIMSDK 的服务端该怎么部署就不是本手册要探讨的内容了,你能够参见《即时通讯框架 MobileIMSDK 的 Demo 应用帮忙:Server 端》。
▲ 配置要连贯的服务器 IP(以上代码详见 /app.js 文件)
6.3 勾销域名校验
微信强制要求小程序必须领有备案的域名及 TLS 证书,测试时关掉这个限度,否则无奈运行哦(参见微信官网手册)。
勾销域名校验的办法如下:
6.4 编译整个工程
如下图所示,点击编译后,将主动在右边模拟器里显示自带的 Demo 界面:
6.5 在模拟器中的运行成果
Demo 的登陆界面运行截图:
Demo 的主界面运行截图:
七、Demo 运行办法(真机调试形式)
7.1 勾销域名校验
微信强制要求小程序必须领有备案的域名及 TLS 证书,测试时关掉这个限度,否则无奈运行哦(参见微信官网手册)。
勾销域名校验的办法如下:
7.2 关上真机调试二维码
如下图所示,点击小虫子图标后将显示真机调试二维码(关上你的微信扫描这个二维码即可):
7.3 用微信扫描调试二维码
如下图所示,关上你的微信,扫描二维码后就可在真机上调试了:
7.4 在真机调试模式下的运行成果
以下是真机调试实拍图:
以下是真机运行性能阐明图(拼合图):
八、常见问题(FAQ)
8.1 为什么管制台下有些 log 不显示?
起因是:微信开发工具中,管制台下的日志级别默认进行了过过滤,勾选所有日志级别,就能看到 SDK 的具体日志输入了。
勾选所有的日志输入级别:
而后就能看到 SDK 中具体的日志输入了(就像下图这样),不便调试和钻研:
8.2 为什么调试时报错“域名不在非法的域名列表中”?
以下是报错信息截图:
起因是:微信强制要求小程序必须领有备案的域名及 TLS 证书,测试时关掉这个限度,否则无奈运行哦(参见微信官网手册)。解决办法是:敞开域名校验(如下图所示):
8.3 为什么真机调试时报“找不到 log2 目录”?
以下是报错信息截图:
如上图所示,报错信息是:“Error: accessSync:fail no such file or directory, access ‘wxfile://usr/miniprogramLog/log2”。起因:这是微信小程序开发工具的官网 bug,能够不必理睬这个问题。
九、援用材料
[1] 微信小程序开发者手册
[2] MobileIMSDK 开源框架的 API 文档
[3] MobileIMSDK 开源 IM 框架源码(Github 地址点此)
[4] 开源轻量级 IM 框架 MobileIMSDK 的微信小程序端已公布
[5] 即时通讯框架 MobileIMSDK 的微信小程序端根本介绍
[6] 即时通讯框架 MobileIMSDK 的 Demo 应用帮忙:Server 端
[7] 最全教程:微信小程序开发入门详解
[8] WebSocket 从入门到精通,半小时就够!
(本文已同步公布于:http://www.52im.net/thread-4168-1-1.html)