【手把手教程】基于uniapp+vue+腾讯IM+腾讯音视频开发的仿微信界面IM实例项目-半天时间让您拥有自己的IM源码(代码已开源到gitee)

基于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+

---

效果演示

  

教程目录

1. 从0开始配置工程项目

1.1 获取Demo工程并且导入到HbuilderX中

1.2 试用云端插件并且导入到Demo工程中

1.3 配置测试用的腾讯云UserId + UserSig

1.4 打包自定义基座，并且使用自定义基座进行开发调试

2. 了解仿微信App应用的设计与改造

2.1 界面布局的设计与定制化开发

2.2 修改测试UserId + UserSig

2.3 聊天会话管理与更新聊天会话项目

2.4 聊天记录的加载与消息收发

2.5 定位SDK配置与收发定位消息

2.6 贴图表情定制化开发

3. 一对一语音视频在线通话接入

3.1 试用TRTC插件并且导入到Demo工程中

3.2 腾讯云后台开启TRTC功能

3.3 配置TRTC-Calling同步登陆SDK功能

3.4 配置音视频通话并且定制化开发

---

参考文档资源：

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中便可以看到效果。