uniapp+nvue实现仿微信App界面+功能 —— uni-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样式还害怕冲突)

<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哦

25 声望
3 粉丝
0 条评论
推荐阅读
Uni-app开发App和插件以后如何开通广告盈利:uni-AD
Uni-app 作为近些年国内逐渐兴起的跨平台开发架构,一次开发就可以完成小程序、iOS APP、安卓 APP、 H5等平台的打包是受到关注的原因。于此同时,很多开发者也开始关注Uni-app架构之外的东西,比如说如何加入广告...

智密科技阅读 603

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

25 声望
3 粉丝
宣传栏