基于uniapp + nvue实现的uniapp仿微信界面性能聊天利用 txim 实例我的项目，实现了以下性能。
1: 聊天会话治理
2: 好友列表
3: 文字、语音、视频、表情、地位等聊天音讯收发
4: 一对一语音视频在线通话
技术实现
开发环境：HbuilderX + node.js
技术框架：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-layoutclass="page"ref="chatLayout":end="end"></chat-layout>this.$refs.chatLayout.scrollToBottom()至此uniapp开发仿微信App聊天界面利用的分享到此为止咯，下一次再分享语音视频通话局部。
对于这部分的代码应用到的原生插件，能够参考uniapp插件市场中的插件，在插件市场也有开源的代码工程哦。
DCloud 插件市场中的名称为《腾讯云即时通讯-好友群聊语音图视频》https://ext.dcloud.net.cn/plu...
通过插件市场对应的按钮能够间接导入开源代码，然而记得先装置HbuilderX哦