基于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聊天利用,实现好友聊天,语音视频通话性能就分享完结啦