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

本文主要是介绍uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

基于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内完成渲染。

​

---

​

快速搭建项目

​

 通过uniapp插件市场(腾讯云即时通讯-好友群聊语音图视频）导入示例项目之后，我们需要调整几个地方才可以打包项目

​

1. 申请免费试用

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

 

​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 修改App图标

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

​

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 选择原生插件

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

 

 

​

4. 打包自定义基座

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

​

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

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

​

---

获取腾讯云UserId + UserSig

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

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

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

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

​

---

仿微信聊天界面 

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

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

 ​

​

---

一对一在线语音视频通话

对于使用demo运行的开发者，可以参考（uniapp+nvue开发之仿微信语音+视频通话功能 ：实现一对一语音视频在线通话）部署语音视频通话功能。

 

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

​

---

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

​

 

这篇关于uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！