基于uniapp + vue 实现仿微信App聊天应用实践,实现以下功能
1: 用户登陆
2: 聊天会话管理
3: 文本/图片/视频/定位消息收发
4: 贴图表情消息收发
5: 一对一语音视频在线通话
项目开发环境
IDE:HbuilderX 3.0+
开发框架:uniapp + vue2.x + sass
运行平台:Android、IOS
环境要求:window7+,macOS 10.12.6+, node 10.14.5+
效果演示
教程目录
参考文档资源:
uniapp 腾讯云TXIM原生插件文档:目录结构与SDK配置 · 语雀
uniapp 腾讯云TRTCCalling原生插件文档:介绍 · 语雀
腾讯云 TXIM 原生SDK文档:即时通信 IM SDK API(Android) - 客户端 API - 文档中心 - 腾讯云
腾讯云 TRTCCalling 原生SDK文档:实时音视频 TRTCCalling API(Web)- 腾讯云
uniapp 腾讯云TXIM原生插件地址:腾讯云即时通讯-好友群聊语音图视频 - DCloud 插件市场
uniapp 腾讯云TRTCCalling原生插件地址:腾讯云音视频通话-一对一多对多在线音视频通话 - DCloud 插件市场
1. 从0开始配置工程项目
1.1 获取Demo工程并且导入到HbuilderX中
获取Demo工程工程可以通过gitee链接地址获取,项目工程地址:
Zion.lin/Zhimi.OpenSource.UniApp.TXIM.Vue
获取方式分为2种,具体方式如下:
方法1: 打开gitee链接之后,在线点击克隆/下载,下载zip包后解压得到源码工程
方法2: 通过命令行克隆git得到源码工程
git clone https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue.git
得到工程之后,我们需要手动将其导入到HbuilderX,这也很简单,我们只需要将工程拖动到HbuilderX中,即可完成导入的工作。
在完成工程导入之后,我们还需要对项目进行一些调整,双击打开manifest.json(根目录下),选择“基础配置”,点击重新获取AppId,否则将有可能出现打包自定义基座时报错AppId不属于该账户的问题。
1.2 试用云端插件并且导入到Demo工程中
打开uniapp 腾讯云TXIM原生插件地址:腾讯云即时通讯-好友群聊语音图视频(付费版)-QQ群755910061-智密科技 - DCloud 插件市场 点击试用,选择我们刚刚重新获取之后的AppId,为该AppId申请免费试用插件。
确定申请完成之后,我们回到HbuilderX中,打开manifest.json(根目录下),点击App原生插件配置,导入云端插件。
确定显示如图所示(如果需要原生相册/一对一语音视频通话的,则需要再多2个对应的云端插件)之后,就可以开始下一步,在腾讯云后台配置测试使用UserId和UserSig
1.3 配置测试用的腾讯云UserId + UserSig
腾讯云系列的SDK均采用userId + UserSig的方式做用户登陆,一般情况下我们是通过后端返回的方式获取,但是这里我们显然还没有接入后端,因此我们需要自己生成多个测试使用的UserId + UserSig,一般五个即可,生成之后我们替换到Demo中便可以看到效果。