基于 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-layout
class="page"
ref="chatLayout"
:end="end"
></chat-layout>
this.$refs.chatLayout.scrollToBottom()
至此 uniapp 开发仿微信 App 聊天界面利用的分享到此为止咯,下一次再分享语音视频通话局部。
对于这部分的代码应用到的原生插件,能够参考 uniapp 插件市场中的插件,在插件市场也有开源的代码工程哦。
DCloud 插件市场中的名称为《 腾讯云即时通讯 - 好友群聊语音图视频 》https://ext.dcloud.net.cn/plu…
通过插件市场对应的按钮能够间接导入开源代码,然而记得先装置 HbuilderX 哦