uniapp+nvue實現仿微信App界面+功能 —— uni-app實現聊天+語音+視頻+圖片消息

基於uniapp + nvue實現的uniapp仿微信界面功能聊天應用 txim 實例項目，實現了以下功能。

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內完成渲染。

 

---

解耦合UI組件，積木式搭建界面

相較於各種傳統的仿微信界面設計，各種class漫天飛，各類js事件侵入業務組件的設計，我們進行了UI組件的解耦合，使得業務代碼與底層界面組件完美分離，實現積木式搭建界面，開發更加專注於業務，而不致於牽一發而動全身。

 

未解耦合的各類良莠不齊的界面代碼(定制化還得改class樣式還害怕沖突)

<scroll-view id="scrollview" scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">
    <view class="uni-chatMsgCnt" id="msglistview">
        <view class="msgitem">xxx</view>
        <view class="msgitem">xxx</view>
        <view class="msgitem">xxx</view>
        ...
    </view>
</scroll-view>

 

解耦后的組件式搭建，布局清晰，代碼可獨性高

<chat-layout
  class="page"
  ref="chatLayout"
  :end="end"
  @upperLoading="loadMoreLog"
  @scroll="onChatLayoutScroll"
  @clickRoot="onRootClick"
>
    <chat-message-item
      v-for="item in chatLogs"
      :ref="item.id"
      :self="item.self"
      :head="item.head"
      :type="item.type"
      :data="item.data"
    >
    </chat-message-item>
</chat-layout>

 

通過解耦合之后的設計，使得代碼可讀性變高，降低維護成本，進一步增加了客制化的可定制性。

 

---

uniapp仿微信彈出氣泡菜單組件

對於新式的微信彈出氣泡菜單組件，項目中也得以實現，不僅僅是彈出菜單列表，得益於長按事件的傳入，我們可以根據元素的位置自動確定是向上彈出還是向下彈出，效果如下:

 

 

使用起來也極其簡單，只需要引入組件之后傳入長按事件的event，組件會自動計算自己所在的位置，開發者只需要修改彈出組件內的業務即可。

import ChatMsgItemPop from '../components/ChatMsgItemPop.nvue'

 

<chat-msg-item-pop
    :show="currentPopItemEvent"
    @clickFn="onPopClickFn($event)"
/>

 

---

uniapp實現聊天頁面滾動到底部

當我們仿微信聊天的時候，不免遇到一個問題，就是發送完消息之后頁面總是停留在當前滑動位置，而不是底部，得益於解耦合之后的優勢，在chatLayout組件下我們已經實現完畢，僅需要一句代碼便可以實現發送/接受消息后滾動到底部。

<chat-layout
    class="page"
    ref="chatLayout"
    :end="end"
></chat-layout>

this.$refs.chatLayout.scrollToBottom()

 

至此uniapp開發仿微信App聊天界面應用的分享到此為止咯，下一次再分享語音視頻通話部分。

對於這部分的代碼使用到的原生插件，可以參考uniapp插件市場中的插件，在插件市場也有開源的代碼工程哦。

TXIM：https://ext.dcloud.net.cn/plugin?id=5116

 歡迎加入插件使用交流QQ群：755910061 一起討論uniapp開發