基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

說在前面:此款 demo 是基於 環信sdk 開發的一款具有單聊、群聊、聊天室、音視頻等功能的應用。在此之前我們已經開發完 Vue、react(web端)、微信小程序。這三個熱門領域的版本,如有需要源碼可以後臺留言索取。

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

安裝開發工具


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

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


工具安裝:

微信開發者工具

HBuilderX


項目demo介紹:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

項目demo啟動預覽:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

快速集成環信 sdk:


1、複製整個utils文件

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

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

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

2、如何使用環信的appkey ,可以在環信 console 後臺註冊一個 賬號申請appkey ,可以參考這裡 ,獲取到 appkey 以後添加到配置文件中 ,如下圖所示:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

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


在uni-app中 使用環信 sdk 實現添加、刪除好友:


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

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

發送好友請求:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

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

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

同意好友請求:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

拒絕好友請求:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

實現收發消息:


1、給好友發送消息:

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

2、接收到消息:

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

基於環信sdk在uni-app框架中快速開發一款多平臺社交Demo

以上展示的僅僅為基本業務場景,更多的業務邏輯詳情請看demo示例。api具體詳情可以查看 環信sdk 文檔


最後結語:基於uni-app這個框架可實現多平臺, 雖然目前一期集成環信sdk的版本僅支持微信小程序版本,但二期我們將加入頭條、支付寶等小程序,敬請期待。PS:對於安卓、ios移動端,我們建議使用針對移動端開發的sdk版本。


基於uni-app的開發其中也趟了不少坑,在這裡就不多贅述了。迴歸到框架的選型來講,選用uni-app開發小程序,可同時並行多端小程序,這點是真香,一次開發多端發佈。至於審核嘛~ 時快時慢。


分享到:


相關文章: