uniapp+nvue实现仿微信App界面+功能|uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息 uniapp+nvue实现仿微信App界面+功

基于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样式还害怕冲突)

xxxxxxxxx...

解耦后的组件式搭建，布局清晰，代码可独性高

通过解耦合之后的设计，使得代码可读性变高，降低维护成本，进一步增加了客制化的可定制性。
uniapp仿微信弹出气泡菜单组件对于新式的微信弹出气泡菜单组件，项目中也得以实现，不仅仅是弹出菜单列表，得益于长按事件的传入，我们可以根据元素的位置自动确定是向上弹出还是向下弹出，效果如下。

uniapp+nvue实现仿微信App界面+功能|uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息

文章图片

使用起来也极其简单，只需要引入组件之后传入长按事件的event，组件会自动计算自己所在的位置，开发者只需要修改弹出组件内的业务即可。

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

uniapp实现聊天页面滚动到底部当我们仿微信聊天的时候，不免遇到一个问题，就是发送完消息之后页面总是停留在当前滑动位置，而不是底部，得益于解耦合之后的优势，在chatLayout组件下我们已经实现完毕，仅需要一句代码便可以实现发送/接受消息后滚动到底部。

this.$refs.chatLayout.scrollToBottom()

至此uniapp开发仿微信App聊天界面应用的分享到此为止咯，下一次再分享语音视频通话部分。
对于这部分的代码使用到的原生插件，可以参考uniapp插件市场中的插件，在插件市场也有开源的代码工程哦。
DCloud 插件市场中的名称为《腾讯云即时通讯-好友群聊语音图视频》https://ext.dcloud.net.cn/plu...
【uniapp+nvue实现仿微信App界面+功能|uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息】通过插件市场对应的按钮可以直接导入开源代码，但是记得先安装HbuilderX哦