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-layoutclass="page"ref="chatLayout":end="end"@upperLoading="loadMoreLog"@scroll="onChatLayoutScroll"@clickRoot="onRootClick"
><chat-message-itemv-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插件市场中的插件,在插件市场也有开源的代码工程哦。
TXIM:腾讯云即时通讯-好友群聊语音图视频(付费版)-QQ群755910061-智密科技 - DCloud 插件市场
欢迎加入插件使用交流QQ群:755910061 一起讨论uniapp开发
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息相关推荐
- [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊
Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...
- android 仿微信demo————微信通讯录界面功能实现(移动端,服务端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- android开发百度地图坐标偏差,利用百度地图Android sdk高仿微信发送位置功能及遇到的问题...
接触了百度地图开发平台半个月了,这2天试着模仿了微信给好友发送位置功能,对百度地图的操作能力又上了一个台阶 我在实现这个功能的时候,遇到一些困难,可能也是别人将会遇到的困难,特在此列出 1.在微信发送 ...
- Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
- android 仿微信demo————登录功能实现(移动端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- Vue3 PC桌面端聊天室|vue3.0+elementPlus仿微信/QQ界面
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
- android 仿微信demo————注册功能完善添加头像功能(移动端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- android 仿微信demo————登录功能实现(服务端)
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
- AndroidStudio使用之仿微信首页界面
AndroidStudio使用之仿微信首页界面 介绍与分析AS实现微信首页的流程, 并附有源码链接: 码云 仿微信 AndroidStudio使用之仿微信首页界面 (一)文件目录 (二)界面分析 1. ...
最新文章
- Android中蓝牙的基本使用
- 正则表达式 一切从简
- FS,FT,DFT,DFS和DTFT的关系
- GC和JVM调优实战
- 前端学习(3332):ant design介绍button
- C#多线程之旅(2)——详解线程的开始和创建
- 文字转语音文件的两种方法
- 机器学习十大经典算法之随机森林
- mysql trim 索引_mysql 强大的trim() 函数
- Mac安装sshpass同时解决Calling Non-checksummed download of sshpass formula file from an arbitrary URL报错
- idea增加文件自动添加版本控制
- 解决Error基础连接已经关闭: 未能为SSL/TLS 安全通道建立信任关系
- 使用Revel(go)开发网站
- SLAM学习笔记-------------(五)相机与图像
- Excel怎么对比两个表格数据
- 蔡学镛:让架构接地气,不再云里雾里
- win 10系统语言栏不见了怎么办?
- 讨论:男孩为何要找比自己小的女孩?
- 北华大学c语言题库百度云,北华大学C语言题库精简打印版(全).doc
- 标准分幅下的图幅号转换成经纬度坐标【原理+源代码】