ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-11-01 23:05:00  阅读:231  来源: 互联网

标签:uniapp nvue 视频 插件 通话 聊天 语音


基于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插件市场(腾讯云即时通讯-好友群聊语音图视频)导入示例项目之后,我们需要调整几个地方才可以打包项目

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演示,对于仿微信聊天界面部分,需要加官方群获取,这里可以参考

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

 ​


一对一在线语音视频通话

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

ezgif-4-9591ca8b5247.gif

 

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


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

 

标签:uniapp,nvue,视频,插件,通话,聊天,语音
来源: https://www.cnblogs.com/zhimitec/p/15496565.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有