1: 聊天會話管理
2: 好友清單
3: 文字、語音、視訊、表情、位置等聊天消息收發
4: 一對一語音視訊線上通話
開發環境：HbuilderX + nodejs
技術架構：uniapp + vue2.x + node-sass
狀态管理：Vuex
自定義元件：ChatLayout、ChatContactItem、ChatInputBox、ChatMessageItem、ChatMsgItemPop
測試環境：App端(Android + IOS)
插件：Zhimi-TXIM
代碼：開源
在uniapp開發下，安卓和ios端表現效果高度一緻，借由nvue的元件渲染機制，在實作元件分離的同時又能兼顧高效的渲染速度，長清單和消息加載速度均在2s内完成渲染。
相較于各種傳統的仿微信界面設計，各種class漫天飛，各類js事件侵入業務元件的設計，我們進行了UI元件的解耦合，使得業務代碼與底層界面元件完美分離，實作積木式搭建界面，開發更加專注于業務，而不緻于牽一發而動全身。
通過解耦合之後的設計，使得代碼可讀性變高，降低維護成本，進一步增加了客制化的可定制性。
對于新式的微信彈出氣泡菜單元件，項目中也得以實作，不僅僅是彈出菜單清單，得益于長按事件的傳入，我們可以根據元素的位置自動确定是向上彈出還是向下彈出，效果如下:
使用起來也極其簡單，隻需要引入元件之後傳入長按事件的event，元件會自動計算自己所在的位置，開發者隻需要修改彈出元件内的業務即可。
當我們仿微信聊天的時候，不免遇到一個問題，就是發送完消息之後頁面總是停留在目前滑動位置，而不是底部，得益于解耦合之後的優勢，在chatLayout元件下我們已經實作完畢，僅需要一句代碼便可以實作發送/接受消息後滾動到底部。
至此uniapp開發仿微信App聊天界面應用的分享到此為止咯，下一次再分享語音視訊通話部分。
對于這部分的代碼使用到的原生插件，可以參考uniapp插件市場中的插件，在插件市場也有開源的代碼工程哦。