uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能

article/2025/9/22 7:12:08

基于uniapp + nvue实现的uniapp仿微信App聊天应用 txim 实例项目,实现了以下功能。

1: 聊天会话管理

2: 好友列表

3: 文字、语音、视频、表情、位置等聊天消息收发

4: 一对一语音视频在线通话


 技术实现

  • 开发环境:HbuilderX + nodejs
  • 技术框架:uniapp + vue2.x + node-sass
  • 状态管理:Vuex
  • 测试环境:App端(Android + IOS)
  • 插件:Zhimi-TXIM、Zhimi-TRTCCalling
  • 代码:开源

效果概览

在uniapp开发下,安卓和ios端表现效果高度一致,借由nvue的组件渲染机制,在实现组件分离的同时又能兼顾高效的渲染速度,长列表和消息加载速度均在2s内完成渲染。


快速搭建项目

image.png

 通过uniapp插件市场(腾讯云即时通讯-好友群聊语音图视频(付费版)-QQ群755910061-智密科技 - DCloud 插件市场)导入示例项目之后,我们需要调整几个地方才可以打包项目

1. 申请免费试用

由于uniapp插件市场的限制,我们需要先申请免费插件试用

 

image.png

2. 修改App图标

由于Demo没有自带图标,因此需要选择一个图片作为图片,点击浏览然后随便选择一张图片,自动生成即可。

 

image.png

 

3. 选择原生插件

如果是在线试用的选择云端插件,如果是下载在本地的选择本地插件,找到 腾讯云 相关的插件勾选即可

4. 打包自定义基座

因为使用了原生插件,因此我们需要先打包原生基座,点击“发行”菜单后根据下图配置先打包一个供测试的自定义基座

5. 打包完成后选择自定义基座运行

这里是很多人忽略的地方,打包完成之后我们需要选择自定义基座,否则会出现找不到TXIM等报错信息。


获取腾讯云UserId + UserSig

对于官方文档而言,已经有获取方式的描述,这里不过多赘叙,直接参考官方文档:

获取腾讯云UserId+UserSig:腾讯云即时通讯(TXIM) · 语雀

配置腾讯云AppSdkId:目录结构与SDK配置 · 语雀

获取到的UserId和UserSig,我们需要修改源码中login.vue文件这个地方,否则我们无法正常登陆到腾讯云IM


仿微信聊天界面 

在demo中其实已经内置了一套简易的api演示,对于仿微信聊天界面部分,需要加官方群获取,这里可以参考(登录 · 语雀)

官方文档:产品概述 · 语雀

 


一对一在线语音视频通话

对于使用demo运行的开发者,可以参考(登录 · 语雀)部署语音视频通话功能。

 

ezgif-4-9591ca8b5247.gif

 

需要正常使用语音视频通话功能,还需要先开启trtcCalling登陆功能,在源码中login.vue文件中这个地方注释了语音视频通话部分的功能,开发者需要自行打开


至此,今天的uniapp+nvue仿微信App聊天应用,实现好友聊天,语音视频通话功能就分享结束啦,有不清楚的开发者可以加QQ群755910061联系我们哦 

 

 

 

 


http://chatgpt.dhexx.cn/article/LF2pHNvt.shtml

相关文章

WhatsApp聊天记录迁移新手机,备份如何找回和删除?

当外贸人更换手机时,面临的第一大问题就是WhatsApp数据迁移的问题。 因为WhatsApp的聊天记录、联系人、图片、视频等,都是与客户息息相关的数据,对外贸人来讲都非常重要,所以一定要确保在换手机过程中不丢失WhatsApp的任何资料。…

[uni-app]聊天App实例

项目简介 基于uni-appvuevuexuniPopswiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息、表情(gif动图),图片预览、地图位置、红包、仿微信朋友圈等功能 效果图 在H5 / 小程序 …

开发社交聊天APP需要注意什么?如何快速开发聊天功能

随着互联网的发展,人们的沟通方式也在悄悄发生变化,由原来的面对面沟通,发展为网上沟通。让大家日常生活的通讯越来越方便了,各种APP层出不穷。那么,想开发一款社交聊天并进行运营,需要注意哪些方面&#x…

比较好用的聊天交友软件?最受年轻人欢迎的APP在这

现在都有哪些比较火,比较好用的聊天交友软件?移动社交是一件越来越普遍的事情,人们可以通过互联网,在社交软件上认识众多的一样的有趣人群,在国内都有哪些**的交友app哪个好??在中国在中国最受年轻人欢迎的APP又有哪些呢? 微信 微信可以…

程序员的时钟/原生抖音罗盘时钟代码分享/ 罗盘文字时钟软件非常火 /文字时钟

原生抖音罗盘时钟代码分享 罗盘文字时钟软件非常火 文字时钟 本站给大家分享这款就是通过原生j来s实现的文字时钟源码,有喜欢的朋友可以下载哦,无需安装,上传访问即可使用 简单实现:https://sucaiip.com/time-302.html

Android实现模拟时钟(简单+漂亮)--时针、分针、秒针

前言 前不久在网上看见Android实现的模拟时钟,感觉十分有意思,这里是地址: http://www.eoeandroid.com/forum.php?modviewthread&tid58324可惜的是这种方式没有 秒表。笔者突然对其有了兴趣,也想去实现以下自己的模拟时钟。折…

网页电子时钟

如图就是一个简易的网页电子时钟&#xff0c;利用Javascript和 html和 css就可以制作 <div class"wrapper"><div class"time-box"><div class"hour"></div><div class"sec"></div></div>&…

时钟啊时钟

效果图 JS /*** color --color 父级定义颜色 css直接使用变量*/ import { useState, useEffect } from react; import styles from ./style.less const index () > {const [time, setTime] useState({hours: 00,minutes: 00,seconds: 00})useEffect(() >{countDown() …

模拟钟表的手机软件_手机时钟软件推荐

下载 生活服务|47.3MB 更新时间&#xff1a;2019-04-04 12:04:18 评分&#xff1a;7 概要&#xff1a;抖音文字云时钟app是一款异常火爆的数字时钟软件&#xff0c;该软件在抖音上已经被众多小伙伴种草了&#xff0c;它拥有非常炫酷的背景&#xff0c;设置安装起来也非常简便&a…

抖音文字时钟壁纸html,抖音文字时钟

抖音文字时钟是一款为最近非常火的珍惜时间打造的钟表&#xff0c;有记录时间的功能也有很强大的警示作用&#xff0c;告诉我们时间的重要性&#xff0c;它有很多的模式可以调节使用&#xff0c;展现出自己喜欢的需要的时钟模式来&#xff0c;有需要的用户们就来这里下载吧。 温…

实现时钟特效

需求&#xff1a; 显示年、月、日、星期和二十四进制的时钟特效&#xff01; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>时钟特效</title><style> body{backgrou…

超级实用的动态时钟。

绘制时钟 时钟动态效果的实现基于canvas画布的重绘&#xff0c;也就是说每秒都要在canvas画布上重新绘画一遍图形&#xff0c;在配合定时器即可实现动态效果。而实现此时钟主要有两个步骤&#xff0c;1是表盘的绘制&#xff0c;2是指针的绘制。 绘制时钟表盘 时钟表盘的刻度…

教你制作 简易罗盘动态时钟 网页文件

简易罗盘动态时钟&#xff08;含html文件和源码&#xff09; 快来获取 首先给大家展示成品截图 首选展示index.txt代码 <动态罗盘时钟> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"v…

用前端代码编写一个动态的罗盘时钟

用前端代码编写一个动态的罗盘时钟 前言一、代码如下1.index2.js3.css 页面效果 前言 今天给大家分享一个罗盘时钟的前端代码&#xff0c;喜欢的小伙伴帮忙点赞一下噢&#xff01; 一、代码如下 1.index <!DOCTYPE html> <html lang"en"> <head>…

android时钟字体,文字时钟下载-文字时钟 安卓版v1.6.1-PC6安卓网

文字时钟屏保app是一款功能齐全又实用的时钟显示软件&#xff0c;文字时钟屏保app主界面是一个自带时间、日期、天气的LED数字时钟和模拟时钟&#xff0c;全屏显示翻页时钟&#xff0c;酷炫美观又实用。这款文字时钟屏保app可以一直保持显示状态。 软件介绍 文字时钟屏保app是一…

日历与时钟

目录 公历 黑色星期五 生物韵律 公历 在公历中&#xff0c;当年份为4的整数倍&#xff0c;但不是100的整数倍时&#xff0c;会出现闰年的现象。 y40 mod(y,4) 0 && mod(y,100)||mod(y,400)0 输出当时的年、月、日、时、分、秒 f%6d %6d %6d %6d %6d %9.3f\n cclock …

手机时钟软件推荐,创意时钟APP介绍

手机上有好用的时钟APP&#xff0c;时钟软件哪个好用? 每个人的手机屏幕都有着自己独特的设计&#xff0c;而时钟软件能够为用户的手机再增添一些风采和魅力&#xff0c;更有专为来年人设计的大字体桌面时钟&#xff0c;更加的清晰直观&#xff0c;各种特色的桌面时钟app中都有…

各种好用的在线时钟、网页时钟汇总推荐集合

电脑全屏时钟网页版https://www.sioe.cn/rili/quanpingshizhong.php 网页时钟http://www.gz7k.com/ 在线时钟 - 现在几点https://naozhong.net.cn/shijian/ 桌面时钟_在线极简时钟同步北京时间网提供桌面时钟&#xff0c;在线极简同步时钟。https://www.beijing-time.org…

html在线时钟

html在线时钟 <script src"https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style…

html 、css、js动态文字时钟

效果思路是利用css的transform属性和js&#xff0c;来实现时钟布局和旋转。 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…