基于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原生插件文档

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 = 1400521882

1.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= conversationList

2.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群定制更多个性化的性能！