uniapp+nvue实现仿微信App聊天应用 —— 成功实现好友聊天+语音视频通话功能
source link: https://segmentfault.com/a/1190000040902287
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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插件市场（https://ext.dcloud.net.cn/plu...）导入示例项目之后，我们需要调整几个地方才可以打包项目
1. 申请免费试用
由于uniapp插件市场的限制，我们需要先申请免费插件试用
2. 修改App图标
由于Demo没有自带图标，因此需要选择一个图片作为图片，点击浏览然后随便选择一张图片，自动生成即可。
3. 选择原生插件
如果是在线试用的选择云端插件，如果是下载在本地的选择本地插件，找到 腾讯云 相关的插件勾选即可
4. 打包自定义基座
因为使用了原生插件，因此我们需要先打包原生基座，点击“发行”菜单后根据下图配置先打包一个供测试的自定义基座
5. 打包完成后选择自定义基座运行
这里是很多人忽略的地方，打包完成之后我们需要选择自定义基座，否则会出现找不到TXIM等报错信息。
获取腾讯云UserId + UserSig
对于官方文档而言，已经有获取方式的描述，这里不过多赘叙，直接参考官方文档：
获取腾讯云UserId+UserSig：https://www.yuque.com/zhimike...
配置腾讯云AppSdkId：https://www.yuque.com/zhimike...
仿微信聊天界面
在demo中其实已经内置了一套简易的api演示，对于仿微信聊天界面部分，需要加官方群获取，这里可以参考uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
官方文档：产品概述
一对一在线语音视频通话
对于使用demo运行的开发者，可以参考：uniapp+nvue开发之仿微信语音+视频通话功能 ：实现一对一语音视频在线通话
部署语音视频通话功能。
需要正常使用语音视频通话功能，还需要先开启trtcCalling登陆功能，在源码中login.vue文件中这个地方注释了语音视频通话部分的功能，开发者需要自行打开
至此，今天的uniapp+nvue仿微信App聊天应用，实现好友聊天，语音视频通话功能就分享结束啦
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK