一、開發(fā)工具準(zhǔn)備
1)微信小程序開發(fā)工具:
(JackJiang使用的版本號(hào)如上圖所示,為了方便直接引用工程,建議你也使用此版或較新版本)
2)一站式下載地址:微信官方下載地址點(diǎn)此進(jìn)入。
3)微信小程序開發(fā)工具效果預(yù)覽:
三、SDK文件用途說明
3.1?文件概覽
純微信標(biāo)準(zhǔn)JS API實(shí)現(xiàn)台谢,無任何第3方庫(kù)依賴:
MobileIMSDK-微信小程序端SDK本身只是JS文件源碼的集合,自帶的Demo代碼只是為了方便隨時(shí)測(cè)試SDK代碼岁经,目的主要是用于演示SDK的API調(diào)用朋沮,Demo代碼不屬于SDK框架的一部分。
大致的目錄說明:
3.2?詳細(xì)說明
SDK各模塊/文件作用說明:
四缀壤、主要API接口
4.1?主要API接口概覽
所有SDK接口均由?/mobileimsdk/mobileimsdk-client-sdk.js?提供樊拓。
以下是主要API接口概覽圖:
如下圖所示:接口設(shè)計(jì)跟MobileIMSDK的APP版一樣,均為高內(nèi)聚和低侵入式的回調(diào)方式傳入業(yè)務(wù)層處理邏輯塘慕,無需(也不建議)開發(fā)者直接修改SDK級(jí)代碼筋夏。
4.2?主要API接口用途說明
1)IMSDK.isLogined():
用途:是否已經(jīng)完成過首次登陸。
說明 :用戶一旦從自已的應(yīng)用中完成登陸IM服務(wù)器后图呢,本方法就會(huì)一直返回true(直到退出登陸IM)条篷。
返回值:{boolean}骗随,true表示已完成首次成功登陸(即已經(jīng)成功登陸過IM服務(wù)端了,后面掉線時(shí)不影響此標(biāo)識(shí))赴叹,否則表示尚未連接IM服務(wù)器蚊锹。
2)IMSDK.isOnline():
用途:是否在線。
說明:表示網(wǎng)絡(luò)連接是否正常稚瘾。
返回值:{boolean},true表示網(wǎng)絡(luò)連接正常姚炕,否則表示已掉線摊欠,本字段只在this._logined=true時(shí)有意義(如果都沒有登陸到IM服務(wù)器,怎么存在在線或掉線的概念呢)柱宦。
3)IMSDK.getLoginInfo():
用途 :返回登陸時(shí)提交的登陸信息(用戶名些椒、密碼/token等)。
說明 :格式形如:{loginUserId:'',loginToken:''}掸刊,此返回值的內(nèi)容由調(diào)用登陸函數(shù) loginImpl()時(shí)傳入的內(nèi)容決定免糕。字段定義詳見:PLoginInfo。
返回值:{boolean}忧侧,true表示網(wǎng)絡(luò)連接正常石窑,否則表示已掉線,本字段只在this._logined=true時(shí)有意義(如果都沒有登陸到IM服務(wù)器蚓炬,怎么存在在線或掉線的概念呢)松逊。
4)IMSDK.sendData(p, fnSucess, fnFail, fnComplete):
用途:向某人發(fā)送一條消息。
參數(shù)p:{Protocal} 要發(fā)送的消息協(xié)議包對(duì)象肯夏,Protocal詳情請(qǐng)見“/module/mb_constants.js”下的createCommonData函數(shù)說明经宏。
參數(shù)fnSuccess :{function} 接口調(diào)用成功的回調(diào)函數(shù),非必填項(xiàng)
參數(shù)fnFail :{function} 接口調(diào)用失敗的回調(diào)函數(shù)驯击,非必填項(xiàng)
參數(shù)fnComplete :{function} 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功烁兰、失敗都會(huì)執(zhí)行),非必填項(xiàng)
返回值:{int} 0表示成功徊都,否則表示錯(cuò)誤碼沪斟,錯(cuò)碼詳見“/module/mb_constants.js”下的MBErrorCode對(duì)象屬性說明。
5)IMSDK.disconnectSocket():
用途:客戶端主動(dòng)斷開客戶端socket連接暇矫。
說明:當(dāng)開發(fā)者登陸IM后币喧,需要退出登陸時(shí),調(diào)用本函數(shù)就對(duì)了袱耽,本函數(shù)相當(dāng)于登陸函數(shù) loginImpl()的逆操作杀餐。
6)IMSDK.setDebugCoreEnable(enable):
用途:是否開啟MobileIMSDK-微信小程序端核心算法層的log輸入,方便開發(fā)者調(diào)試朱巨。
參數(shù)enable:{boolean} true表示開啟log輸出史翘,否則不輸出,開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false(即不輸出log)。
7)IMSDK.setDebugSDKEnable(enable):
用途:是否開啟MobileIMSDK-微信小程序端框架層的log輸入琼讽,方便開發(fā)者調(diào)試必峰。
參數(shù)enable:{boolean} true表示開啟log輸出,否則不輸出钻蹬,開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false(即不輸出log)吼蚁。
8)IMSDK.setDebugPingPongEnable(enable):
用途:是否開啟MobileIMSDK-微信小程序端框架層的底層網(wǎng)絡(luò)WebSocket心跳包的log輸出,方便開發(fā)者調(diào)試问欠。
參數(shù)enable:{boolean} true表示開啟log輸出肝匆,否則不輸出,開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false(即不輸出log)顺献。
注意:必須 setDebugEnable(true) 且 setDebugPingPongEnable(true) 時(shí)旗国,心跳log才會(huì)真正輸出,方便控制注整。
返回值:true表示開啟log輸出能曾,否則不輸出,開發(fā)者不調(diào)用本函數(shù)的話系統(tǒng)默認(rèn)是false(即不輸出log)肿轨。
9)IMSDK.loginImpl(varloginInfo, wsUrl):
用途:登陸/連接MobileIMSDK服務(wù)器時(shí)調(diào)用的方法寿冕。
說明:登陸/連接MobileIMSDK服務(wù)器由本函數(shù)發(fā)起
參數(shù)varloginInfo:{PLoginInfo} 必填項(xiàng),登陸要提交給Websocket服務(wù)器的認(rèn)證信息椒袍,不可為空蚂斤,對(duì)象字段定義見:PLoginInfo
參數(shù)wsUrl:{string} 必填項(xiàng):要連接的Websocket服務(wù)器地址,不可為空槐沼,形如:wss://yousite.net:3000/websocket曙蒸。
10)IMSDK.callback_onIMLog(message, toConsole):
用途:由開發(fā)者設(shè)置的回調(diào)方法:用于debug的log輸出。
推薦用法:開發(fā)者可在此回調(diào)中按照自已的意圖打印MobileIMSDK微信小程序端框架中的log岗钩,方便調(diào)試時(shí)使用纽窟。
參數(shù)1:?{String}:必填項(xiàng),字符串類型兼吓,表示log內(nèi)容臂港。
參數(shù)2:?{boolean}:選填項(xiàng),true表示輸出到console视搏,否則默認(rèn)方式(由開發(fā)者設(shè)置的回調(diào)決定)审孽。
11)IMSDK.callback_onIMData(p, options):
用途 :由開發(fā)者設(shè)置的回調(diào)方法:用于收到聊天消息時(shí)在UI上展現(xiàn)出來(事件通知于收到IM消息時(shí))恭垦。
推薦用法:開發(fā)者可在此回調(diào)中處理收到的各種IM消息贴见。
參數(shù)1:?{Protocal}:詳情請(qǐng)見“/module/mb_constants.js”下的Protocal類定義)。
12)IMSDK.callback_onIMAfterLoginSucess():
用途:由開發(fā)者設(shè)置的回調(diào)方法:客戶端的登陸請(qǐng)求被服務(wù)端成功認(rèn)證完成后的回調(diào)(事件通知于 登陸/認(rèn)證 成功后)植袍。
推薦用法:開發(fā)者可在此回調(diào)中進(jìn)行登陸IM服務(wù)器成功后的處理筋遭。
13)IMSDK.callback_onIMAfterLoginFailed(isReconnect):
用途:由開發(fā)者設(shè)置的回調(diào)方法:客戶端的登陸請(qǐng)求被服務(wù)端認(rèn)證失敗后的回調(diào)(事件通知于 登陸/認(rèn)證 失敗后)打颤。
說明:補(bǔ)充說明:登陸/認(rèn)證失敗的原因可能是用戶名暴拄、密碼等不正確等,但具體邏輯由服務(wù)端的 callBack_checkAuthToken回調(diào)函數(shù)去處理编饺。
推薦用法:開發(fā)者可在此回調(diào)中提示用戶登陸IM服務(wù)器失敗乖篷。。
參數(shù)1:?{boolean}:true表示是掉線重連后的認(rèn)證失斖盖摇(在登陸其間可能用戶的密碼信息等發(fā)生了變更)撕蔼,否則表示首次登陸時(shí)的認(rèn)證失敗。
14)IMSDK.callback_onIMReconnectSucess():
用途:由開發(fā)者設(shè)置的回調(diào)方法:掉線重連成功后的回調(diào)(事件通知于掉線重連成功后)秽誊。
推薦用法:開發(fā)者可在此回調(diào)中處理掉線重連成功后的界面狀態(tài)更新等鲸沮,比如設(shè)置將界面上的“離線”文字更新成“在線”。
15)IMSDK.callback_onIMDisconnected():
用途:由開發(fā)者設(shè)置的回調(diào)方法:網(wǎng)絡(luò)連接已斷開時(shí)的回調(diào)(事件通知于與服務(wù)器的網(wǎng)絡(luò)斷開后)养距。
推薦用法:開發(fā)者可在此回調(diào)中處理掉線時(shí)的界面狀態(tài)更新等,比如設(shè)置將界面上的“在線”文字更新成“離線”日熬。
16)IMSDK.callback_onIMPing():
用途 :由開發(fā)者設(shè)置的回調(diào)方法:本地發(fā)出心跳包后的回調(diào)通知(本回調(diào)并非MobileIMSDK-微信小程序端核心邏輯棍厌,開發(fā)者可以不需要實(shí)現(xiàn)!)竖席。
推薦用法:開發(fā)者可在此回調(diào)中處理底層網(wǎng)絡(luò)的活動(dòng)情況耘纱。
17)IMSDK.callback_onIMPong():
用途:由開發(fā)者設(shè)置的回調(diào)方法:收到服務(wù)端的心跳包反饋的回調(diào)通知(本回調(diào)并非MobileIMSDK-微信小程序端核心邏輯,開發(fā)者可以不需要實(shí)現(xiàn)1霞觥)束析。
推薦用法:開發(fā)者可在此回調(diào)中處理底層網(wǎng)絡(luò)的活動(dòng)情況。
18)IMSDK.callback_onIMShowAlert(alertContent):
用途:由開發(fā)者設(shè)置的回調(diào)方法:框架層的一些提示信息顯示回調(diào)(本回調(diào)并非MobileIMSDK-微信小程序端核心邏輯憎亚,開發(fā)者可以不需要實(shí)現(xiàn)T笨堋)。
說明:開發(fā)者不設(shè)置的情況下第美,框架默認(rèn)將調(diào)用wx.showModal()顯示提示信息蝶锋,否則將使用開發(fā)者設(shè)置的回調(diào)——目的主要是給開發(fā)者自定義這種信息的UI顯示,提升UI體驗(yàn)什往,別無它用】扳缕。
參數(shù)1:{String}:必填項(xiàng),文本類型别威,表示提示內(nèi)容躯舔。
19)IMSDK.callback_onIMKickout(kickoutInfo):
用途:由開發(fā)者設(shè)置的回調(diào)方法:收到服務(wù)端的“踢出”指令(本回調(diào)并非MobileIMSDK-微信小程序端核心邏輯,開發(fā)者可以不需要實(shí)現(xiàn)J」拧)粥庄。
參數(shù)1:{PKickoutInfo}:非空,詳見:PKickoutInfo豺妓。
20)IMSDK.callback_onMessagesLost(lostMessages):
用途:由開發(fā)者設(shè)置的回調(diào)方法:消息未送達(dá)的回調(diào)事件通知飒赃。
發(fā)生場(chǎng)景:比如用戶剛發(fā)完消息但網(wǎng)絡(luò)已經(jīng)斷掉了的情況下利花,表現(xiàn)形式如:就像手機(jī)qq或微信一樣消息氣泡邊上會(huì)出現(xiàn)紅色圖標(biāo)以示沒有發(fā)送成功)。
建議用途:應(yīng)用層可通過回調(diào)中的指紋特征碼找到原消息并可以UI上將其標(biāo)記為“發(fā)送失敗”以便即時(shí)告之用戶载佳。
參數(shù)1:{Array}:由框架的QoS算法判定出來的未送達(dá)消息列表炒事。
21)IMSDK.callback_onMessagesBeReceived(theFingerPrint):
用途:由開發(fā)者設(shè)置的回調(diào)方法:消息已被對(duì)方收到的回調(diào)事件通知。
說明:目前蔫慧,判定消息被對(duì)方收到是有兩種可能:
- 1) 對(duì)方確實(shí)是在線并且實(shí)時(shí)收到了挠乳;
- 2) 對(duì)方不在線或者服務(wù)端轉(zhuǎn)發(fā)過程中出錯(cuò)了,由服務(wù)端進(jìn)行離線存儲(chǔ)成功后的反饋(此種情況嚴(yán)格來講不能算是“已被收到”姑躲,但對(duì)于應(yīng)用層來說睡扬,離線存儲(chǔ)了的消息原則上就是已送達(dá)了的消息:因?yàn)橛脩粝麓蔚顷憰r(shí)肯定能通過HTTP協(xié)議取到)。
建議用途:應(yīng)用層可通過回調(diào)中的指紋特征碼找到原消息并可以UI上將其標(biāo)記為“發(fā)送成功”以便即時(shí)告之用戶黍析。
參數(shù)1:{String}:已被收到的消息的指紋特征碼(唯一ID)卖怜,應(yīng)用層可據(jù)此ID找到原先已發(fā)的消息并可在UI是將其標(biāo)記為”已送達(dá)“或”已讀“以便提升用戶體驗(yàn)。
五阐枣、如何接入SDK
5.1?如何引入SDK到您的微信小程序工程中马靠?
很簡(jiǎn)單:只需要將第2節(jié)中提到的SDK所有JS文件復(fù)制到您的微信小程序工程下即可。
以下是SDK全部文件在工程中的路徑和位置(以自帶的Demo工程為例蔼两,如下圖所示):
5.2?如何在代碼中調(diào)用SDK甩鳄?
第一步:引用SDK的接口主文件(具體例子詳見Demo中的im-manager.js文件)
第二步:為SDK設(shè)置回調(diào)各種函數(shù)(具體例子詳見Demo中的im-manager.js文件)
第三步:初始化SDK(具體例子詳見Demo中的app.js文件)
注意:上圖中登錄連接的IP地址請(qǐng)?jiān)O(shè)置為您的MobileIMSDK服務(wù)器地址哦。
第四步:在你的主界面或登陸界面中調(diào)用IM的登陸方法即可(具體例子詳見Demo中的主界面main.js文件)
六额划、Demo運(yùn)行方法(模擬器方式)
6.1?重要說明
MobileIMSDK的小程序端工程(包括Demo代碼)妙啃,不依賴任何第3方庫(kù),完全使用微信小程序官方標(biāo)準(zhǔn)API實(shí)現(xiàn)俊戳,所以你在拿到MobileIMSDK的小程序端工程后直接開箱即可運(yùn)行揖赴,切莫搞復(fù)雜、不要私自加戲抑胎!
6.2?配置要連接的MobileIMSDK服務(wù)器IP
注意:下圖中登陸連接的IP地址請(qǐng)?jiān)O(shè)置為您自已的MobileIMSDK服務(wù)器地址哦储笑。
友情提示:?MobileIMSDK的服務(wù)端該怎么部署就不是本手冊(cè)要討論的內(nèi)容了,你可以參見《即時(shí)通訊框架MobileIMSDK的Demo使用幫助:Server端》圆恤。
▲ 配置要連接的服務(wù)器IP(以上代碼詳見 /app.js文件)
6.3取消域名校驗(yàn)
微信強(qiáng)制要求小程序必須擁有備案的域名及TLS證書突倍,測(cè)試時(shí)關(guān)掉這個(gè)限制,否則無法運(yùn)行哦(參見微信官方手冊(cè))盆昙。
取消域名校驗(yàn)的方法如下:
6.4編譯整個(gè)工程
如下圖所示羽历,點(diǎn)擊編譯后,將自動(dòng)在左邊模擬器里顯示自帶的Demo界面:
6.5在模擬器中的運(yùn)行效果
Demo的登陸界面運(yùn)行截圖:
Demo的主界面運(yùn)行截圖:
七淡喜、Demo運(yùn)行方法(真機(jī)調(diào)試方式)
7.1?取消域名校驗(yàn)
微信強(qiáng)制要求小程序必須擁有備案的域名及TLS證書秕磷,測(cè)試時(shí)關(guān)掉這個(gè)限制,否則無法運(yùn)行哦(參見微信官方手冊(cè))炼团。
取消域名校驗(yàn)的方法如下:
7.2?打開真機(jī)調(diào)試二維碼
如下圖所示澎嚣,點(diǎn)擊小蟲子圖標(biāo)后將顯示真機(jī)調(diào)試二維碼(打開你的微信掃描這個(gè)二維碼即可):
7.3?用微信掃描調(diào)試二維碼
如下圖所示疏尿,打開你的微信,掃描二維碼后就可在真機(jī)上調(diào)試了:
7.4?在真機(jī)調(diào)試模式下的運(yùn)行效果
以下是真機(jī)調(diào)試實(shí)拍圖:
以下是真機(jī)運(yùn)行功能說明圖(拼合圖):
八易桃、常見問題(FAQ)
8.1?為什么控制臺(tái)下有些log不顯示褥琐?
原因是:微信開發(fā)工具中,控制臺(tái)下的日志級(jí)別默認(rèn)進(jìn)行了過過濾晤郑,勾選所有日志級(jí)別敌呈,就能看到SDK的詳細(xì)日志輸出了。
勾選所有的日志輸出級(jí)別:
然后就能看到SDK中詳細(xì)的日志輸出了(就像下圖這樣)造寝,方便調(diào)試和研究:
8.2?為什么調(diào)試時(shí)報(bào)錯(cuò)“域名不在合法的域名列表中”磕洪?
以下是報(bào)錯(cuò)信息截圖:
原因是:微信強(qiáng)制要求小程序必須擁有備案的域名及TLS證書,測(cè)試時(shí)關(guān)掉這個(gè)限制诫龙,否則無法運(yùn)行哦(參見微信官方手冊(cè))析显。
解決方法是:關(guān)閉域名校驗(yàn)(如下圖所示):
8.3?為什么真機(jī)調(diào)試時(shí)報(bào)“找不到log2目錄”?
以下是報(bào)錯(cuò)信息截圖:
如上圖所示签赃,報(bào)錯(cuò)信息是:“Error: accessSync:fail no such file or directory, access 'wxfile://usr/miniprogramLog/log2”谷异。
原因:這是微信小程序開發(fā)工具的官方bug,可以不用理會(huì)這個(gè)問題姊舵。
九晰绎、引用資料
[3]?MobileIMSDK開源IM框架源碼(Github地址點(diǎn)此)
[4]?開源輕量級(jí) IM 框架 MobileIMSDK 的微信小程序端已發(fā)布
[5]?即時(shí)通訊框架MobileIMSDK的微信小程序端基本介紹