基于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联系凯发真人娱乐哦