共计 7124 个字符，预计需要花费 18 分钟才能阅读完成。
基于 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+
成果演示
教程目录
-
从 0 开始配置工程项目
1.1 获取 Demo 工程并且导入到 HbuilderX 中
1.2 试用云端插件并且导入到 Demo 工程中
1.3 配置测试用的腾讯云 UserId + UserSig
1.4 打包自定义基座，并且应用自定义基座进行开发调试
-
理解仿微信 App 利用的设计与革新
2.1 界面布局的设计与定制化开发
2.2 批改测试 UserId + UserSig
2.3 聊天会话治理与更新聊天会话我的项目
2.4 聊天记录的加载与音讯收发
2.5 定位 SDK 配置与收发定位音讯
2.6 贴图表情定制化开发
-
一对一语音视频在线通话接入
3.1 试用 TRTC 插件并且导入到 Demo 工程中
3.2 腾讯云后盾开启 TRTC 性能
3.3 配置 TRTC-Calling 同步登陆 SDK 性能
3.4 配置音视频通话并且定制化开发
参考文档资源：
uniapp 腾讯云 TXIM 原生插件文档
uniapp 腾讯云 TRTCCalling 原生插件文档
腾讯云 TXIM 原生 SDK 文档
腾讯云 TRTCCalling 原生 SDK 文档
uniapp 腾讯云 TXIM 原生插件
uniapp 腾讯云 TRTCCalling 原生插件
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 插件市场，搜寻《腾讯云即时通讯 - 好友群聊语音图视频(付费版)》，点击试用，抉择咱们刚刚从新获取之后的 AppId，为该 AppId 申请收费试用插件。
确定申请实现之后，咱们回到 HbuilderX 中，关上 manifest.json(根目录下)，点击 App 原生插件配置，导入云端插件。
确定显示如图所示（如果须要原生相册 / 一对一语音视频通话的，则须要再多 2 个对应的云端插件）之后，就能够开始下一步，在腾讯云后盾配置测试应用 UserId 和 UserSig
1.3 配置测试用的腾讯云 UserId + UserSig
腾讯云系列的 SDK 均采纳 userId + UserSig 的形式做用户登陆，个别状况下咱们是通过后端返回的形式获取，然而这里咱们显然还没有接入后端，因而咱们须要本人生成多个测试应用的 UserId + UserSig，个别五个即可，生成之后咱们替换到 Demo 中便能够看到成果。
（先确保曾经登陆腾讯云并且创立了利用，创立利用参考官网文档：《》）
腾讯云 IM 控制台：https://console.cloud.tencent…
关上腾讯云 IM 控制台后点击对应的利用进入治理，在这里咱们须要先记录一下 SDKAppID，如下图所示咱们的 SDKAppID 是 1400521882。
失去 SDKAppID 之后，咱们点击【辅助工具】，点击【UserSig 生成 & 校验】，在这里咱们通过腾讯云 IM 控制台的辅助工具来失去所需的 UserId + UserSIg，留神这里生成的有效期是 180 天，请在有效期内实现测试。
反复操作，这样咱们就失去了 5 组 UserID + UserSig，以及 SDKAppID，数据如下：
{id: '10001', sign: 'eJwtzF0LgjAYBeD-suuQd5tbInRjGF2kGa3upU17G8owkyL6782Py-MczvkSdTgHg*lITFgAZDVl1KbtscKJKQDQpXhqWzqHmsQ0BAgjSSnMjXk77Ix3IQTzi1l7bEaTXvlaRnx5wXr8rS6FKur0w4fH8XXS21zyJL1fG9btVCttn6Aubb6-ZdmG-P6UADBd'},
{id: '10002', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgZGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbWEJNyUwHmlvh7e*X52VhWelqnpJtmh9WGZZi6OxvmBRmll0eox9u4Znk4pNvnm*WkesYaqtUCwC*HDA6'},
{id: '10003', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgbGUInilOzEgoLMFCUrQxMDAxMLM0NDA4hMakVBZlEqUNzU1NQIqAMiWpKZCxIzA4oam5sbGUFNyUwHWZceo5-sGuzt7p-pGaNfWpUT6F0Q5OrqX2js5Z6aWRkUkuqSl1Xk6ePs6BaVbqtUCwDxBzDx'},
{id: '10004', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgYmUInilOzEgoLMFCUrQxOgqIWZoaEBRCa1oiCzKBUobmpqagTUAREtycwFiZkBRY3NzY2NoaZkpgPNdXb1TvMMSk0xSw33ci5N83YJCnKr8vfyMshIdUqO0S-PdUvL94r0NCitski3VaoFAL*XMJM_'},
{id: '10005', sign: 'eJyrVgrxCdYrSy1SslIy0jNQ0gHzM1NS80oy0zLBwoYGBgamUInilOzEgoLMFCUrQxOgqJGhhYURRCa1oiCzKBUobmpqagTUAREtycwFiZkZm5kaG1oaGkJNyUwHmluVm1fkUxCaWFjqllGYEqOfWxQSFlkWblmQ7JTqHpQcllZk7Jvo6ZZrFuUUaKtUCwD1lzGr'},
const SDKAppID = 14005218821.4 打包自定义基座，并且应用自定义基座进行开发调试
在打包之前，咱们须要装置依赖，这里须要开发者装置 nodejs 运行环境，以及装置 hbuilderx scss 编译插件，没有装置的开发者请依照以下链接装置对应的环境。可能用失去的网站及内容：
nodejs 官方网站：https://nodejs.org/zh-cn/
nodejs 中文网：http://nodejs.cn
scss/sass 编译插件：https://ext.dcloud.net.cn/plu…
装置实现之后，开发者能够在 hbuilderx 中关上终端，输出以下命令实现依赖装置。
因为 uniapp 框架限度问题，应用原生插件必须先打包自定义基座，而后通过自定义基座开发调试。这里咱们先演示安卓如何打包自定义基座并且应用自定义基座进行开发（IOS 操作流程统一，证书须要应用开发证书或者企业证书，不能应用公布证书）
2. 理解仿微信 App 利用的设计与革新
2.1 界面布局的设计与定制化开发
对于仿微信 App 利用来说，Demo 依据 UI 性能的不同设计划分为 7 个组件，搁置在 components 目录下，具体对应如下：
通过将 UI 组件与业务逻辑拆散的形式，升高了业务与 UI 整体的耦合度，使得须要定制化开发 UI 的时候只批改 UI 组件即可，升高开发成本。
各个组件对应的成果如下：
会话好友列表(ChatContactItem)
文字输入框(ChatInputBox)
语音输入框(ChatInputBox)
聊天界面容器 (ChatLayout)
聊天音讯项(ChatMessageItem)
聊天输入框扩大面板(Drawer)
对于业务界面而言，分为 3 个界面，别离如下：
login.vue – 登录界面，用于登录腾讯云账号
list.vue – 会话界面，显示历史聊天会话列表与最近一次聊天信息
singleChat.vue – 一对一单聊界面，显示聊天音讯与进行聊天交互的界面。
对于开发者如何进行革新与调试，次要分为 2 种场景：
更换主题配色与格调。这种状况下次要批改组件内的图标与色彩即可，对于业务界面局部则依据需要批改 navBar BackgroundColor 即可。
更换界面排版格调。这种状况下次要批改组件内的图标与排版地位即可，对于改变较大的局部须要依据排版的要求，调整 ChatLayout（比方新增 slot 等操作）。
2.2 批改测试 UserId + UserSig
在 demo 工程中内置的测试 UserId 与 UserSig 存在过期的状况，在下面的操作中咱们配置了属于咱们测试的 UserId 和 UserSig，在这里咱们需改为咱们下面配置的 UserId 和 UserSig，这样能够不便咱们开发调试 App，当然同时咱们也须要批改 SDKAppID，否则将会报错提醒 UserId 匹配不上该 SDKAppID 的谬误。
批改工作很简略，咱们只须要批改 2 处中央，如下图标记。
留神：批改之后咱们不须要从新打包自定义基座，然而最好重新启动调试，因为 uniapp 的编译机制，有时候会导致局部安卓设施并不会刷新同步额定引入的 js 文件，从而呈现一些调试开发上的意外“惊喜”
2.3 聊天会话治理与更新聊天会话我的项目
聊天会话指的是用户与好友 / 群组聊天之后，生成一个本地的聊天会话记录，开发者个别显示为音讯 / 会话列表。在这里 TXIM 曾经将其封装好了一系列 CURD 办法，通过事件反馈更新会话列表信息（排序 / 更新草稿 / 更新上标等）。
获取列表
聊天会话列表的获取在 list.vue 界面的以下地位，次要是初始化的时候通过 getConversationList 办法获取到上一次最初更新的会话信息
在这里咱们须要保留 this.nextSeq，以便咱们分页获取会话列表，在这里次要的代码是这个办法
let{data} =awaitthis.$txim.getConversationList(this.nextSeq,999)// 这里的 999 代表 pageSize = 999，个别状况下生产环境为 20 即可依据腾讯的官网定义，咱们并不需要像传统的列表查问一样传 pageIndex，腾讯每次会在 data 中返回 nextSeq，以作为下一次查问的 seq 记录，获取完会话列表之后，咱们只须要依据最初一次音讯的 timestamp 进行降序排序，即能够实现让最新的音讯显示在列表顶部。
更新会话列表
因为即时通讯是实时通信的，音讯更新也是实时的，因而咱们须要监听会话音讯变更事件，从而实现当会话列表更新的时候，视图也随着底层数据变动进行变动，如重排，显示下标等。在界面中实现这部分监听逻辑的的代码次要在这里。
一般来说，当咱们获取到会话更新记录的状况下，咱们不肯定只是获取到一条，因而咱们须要循环 data 以更新所有变更我的项目，在 demo 中获取到新的会话的时候并没有做排序的解决，生产环境中倡议实现排序，以便用户及时发现新的音讯，实现形式也很简略，咱们只须要对最终的 conversationList 进行 timestamp 排序即可，代码如下：
letconversationList =this.conversationList.sort((a,b) =>b.lastMessage.timestamp- a.lastMessage.timestamp)
this.conversationList= conversationList2.4 聊天记录的加载与音讯收发
聊天记录的加载与音讯收发 demo 中曾经集成在 singleChat.vue 文件中了，次要的逻辑为 singleChat 封装所有的音讯收发和聊天音讯查询方法，而对于聊天音讯的显示与音讯编辑，图文视频抉择编辑都由子组件实现后通过 emit 事件的形式同志 singleChat 发送音讯，具体开发者能够参考 componetns 目录下的聊天组件。
聊天音讯的加载
在这里，当咱们获取到想要聊天的 userid 之后，咱们须要先加载聊天音讯，这里咱们不探索如何滚动加载 / 懒加载数据，咱们只针对聊天历史音讯如何加载。在 singleChat 页面中，mounted 钩子失效后咱们将执行 this.getLogs 办法获取聊天记录，而 getLogs 办法的具体代码如下：
在这里咱们仍然须要传入 pageSize，也就是 count: 20 这里，而咱们仍然不须要传入 pageIndex, 依据最初一条音讯的 id(lastMsgId)咱们就能够实现分页获取数据。在这里还有 2 个特地的解决
聊天音讯转组件 payload
在这里咱们有一个比拟特地的代码是 this.HistoryMessageToChatLog，这里因为咱们封装了一个音讯组件，为了不便迁徙组件至其余的 IM SDK，咱们将音讯组件的数据格式抽象化，因而这里就是将腾讯 TXIM 音讯构造转成音讯组件的构造，不便解析。
数据过滤
在这里咱们有一个 filter 办法过滤音讯，这是因为 status < 3 的状况下才是失常的音讯，> 3 的状况下是发送失败的音讯，生产环境下如果开发者有需要获取发送失败的历史音讯并且从新发送的，请自行处理
2.5 定位 SDK 配置与收发定位音讯
尽管咱们曾经内置了定位收发的办法以及音讯回显，然而开发者仍然须要配置本人的 appkey 才能够失常运作（请勿应用 demo 自带的 appkey，有生效的可能性）
百度地图 appkey 申请教程：https://lbsyun.baidu.com/inde…
高德地图 appkey 申请地址：https://lbs.amap.com/faq/quot…
获取到 appkey 之后（个别是安卓一个，ios 一个），咱们须要填写在以下地位
一共须要配置 2 个中央，请留神，如果配置了 App 模块，也须要从新打包自定义基座才能够开始调试，因而集体举荐在工程一开始就配置好，以防呈现须要从新期待，浪费时间的问题。
2.6 贴图表情定制化开发
开发者只须要在 component/ChatInputDrawer 目录下的 face.vue 文件中批改本人的表情包资源即可，具体位置如下
在此处增加本人的 packages 即可，请留神标记为 tip 之后才属于贴图表情包，而后开发者须要调整款式以反对贴图表情包，demo 工程中暂无反对。
3. 一对一语音视频在线通话接入
3.1 试用 TRTC 插件并且导入到 Demo 工程中
关上 uniapp 腾讯云 TRTC Calling 原生插件地址：https://ext.dcloud.net.cn/plu… 点击试用，抉择咱们刚刚从新获取之后的 AppId，为该 AppId 申请收费试用插件。
确定申请实现之后，咱们回到 HbuilderX 中，关上 manifest.json(根目录下)，点击 App 原生插件配置，导入云端插件。
确定配置好了之后，就能够和后面导入 TXIM 的一样步骤，打包自定义基座，抉择自定义基座运行即可。
3.2 腾讯云后盾开启 TRTC 性能
如果开发者曾经开通过 TRTC 服务的请疏忽，一般来说创立了 IM 利用之后，咱们还须要同步开明音视频通话性能。
首先开发者在确保曾经登陆腾讯云平台的时候，关上链接：https://console.cloud.tencent… 而后点击抉择须要开明 TRTC 服务的利用。
点击立刻开明之后，腾讯云会主动配置并且开明 TRTC 服务，这样咱们就能够实现一个 appid 同时应用 TXIM 和 TRTCCalling 了。
3.3 配置 TRTC-Calling 同步登陆 SDK 性能
实际上在提供的 demo 外面，曾经内置了 trtc 的 jssdk 以及相干代码，因为并非所有的开发者都须要音视频通话的性能，因而咱们屏蔽了音视频的注入代码。开发者须要自行开启。具体位置如下：
3.4 配置音视频通话并且定制化开发
一般而言，沿用 demo 的目录构造的话不须要批改过多的代码，然而如果开发者须要自定义目录构造，批改文件地位，定制化款式，那么须要留神以下的几个中央：
批改音视频通话界面门路
在 demo 中咱们是间接写死了通话界面的门路，在 utils/txcalling 文件中，开发者须要自行批改此处，以实现承受到通话邀请时候能失常弹出来通话邀请界面。
批改通话界面款式
这里通话界面目前只设计了一对一通话的款式，开发者能够依据本人的需要批改界面款式，甚至反对多人视频通话，具体位置如下：
ok，到这里基于 uniapp+vue 实现仿微信即时聊天的性能就能够全副残缺实现啦
对于文章中提到的这些原生插件，能够参考 uniapp 插件市场中的插件，在插件市场搜寻“智密”就有有开源的代码工程哦，也能够增加 QQ 群定制更多个性化的性能！
