基于環(huán)信sdk在uni-app中快速開發(fā)多平臺社交Demo

說在前面：此款 demo 是基于 環(huán)信sdk 開發(fā)的一款具有單聊、群聊、聊天室、音視頻等功能的應用。在此之前我們已經(jīng)開發(fā)完 Vue、react(web端)、微信小程序。這三個熱門領(lǐng)域的版本，如有需要源碼可以后臺留言索取。

安裝開發(fā)工具

我們選用微信小程序來用做示例(如果選擇百度、支付寶安裝對應開發(fā)者工具即可)、

微信開發(fā)者工具建議還是安裝最新版的。uni-app的開發(fā)也必須安裝HBuilderX工具，這個是捆綁的，沒得選擇。要用uni-app，你必須得裝!

工具安裝：

微信開發(fā)者工具

HBuilderX

項目demo介紹：

項目demo啟動預覽：

快速集成環(huán)信 sdk：

1、復制整個utils文件

如果你想具體了解主要配置文件 請看這個鏈接：

http://docs-im.easemob.com/im/web/intro/start

2、如何使用環(huán)信的appkey ,可以在環(huán)信 console 后臺注冊一個 賬號申請appkey ,可以參考這里，獲取到 appkey 以后添加到配置文件中 ，如下圖所示：

以上兩個重要的配置準備完成之后就可以進行一系列的操作了(收發(fā)消息、好友申請、進群入群通知等)

在uni-app中 使用環(huán)信 sdk 實現(xiàn)添加、刪除好友：

1、在全局 App.vue 文件 鉤子函數(shù) onLaunch() 中監(jiān)聽各種事件 (好友申請、收到各類消息等)如圖：

發(fā)送好友請求：

在onPresence(message)事件中接收到好友消息申請：

同意好友請求：

拒絕好友請求：

　　實現(xiàn)收發(fā)消息：

1、給好友發(fā)送消息：

2、接收到消息：

在onTextMessage(message)事件中接收到好友消息，然后做消息上屏處理(具體消息上屏邏輯可看demo中代碼示例)：

以上展示的僅僅為基本業(yè)務(wù)場景，更多的業(yè)務(wù)邏輯詳情請看demo示例。api具體詳情可以查看環(huán)信sdk 文檔

最后結(jié)語：基于uni-app這個框架可實現(xiàn)多平臺， 雖然目前一期集成環(huán)信sdk的版本僅支持微信小程序版本，但二期我們將加入頭條、支付寶等小程序，敬請期待。PS：對于安卓、ios移動端，我們建議使用針對移動端開發(fā)的sdk版本。

基于uni-app的開發(fā)其中也趟了不少坑，在這里就不多贅述了。回歸到框架的選型來講，選用uni-app開發(fā)小程序，可同時并行多端小程序，這點是真香，一次開發(fā)多端發(fā)布。至于審核嘛～ 時快時慢。

生成海報

免責聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性，但不保證有關(guān)資料的準確性及可靠性，讀者在使用前請進一步核實，并對任何自主決定的行為負責。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負任何法律責任。任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時，應及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明，并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后，將會依法盡快聯(lián)系相關(guān)文章源頭核實，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。