基于uniapp+vue实现一个仿微信App的聊天应用实践实现以下功能1：用户登录2：聊天会话管理3：文字/图片/视频/定位消息收发4：贴纸表情消息5：一对一语音视频在线通话项目开发环境IDE：HbuilderX3.0+开发框架：uniapp+vue2.x+sass运行平台:Android,IOS环境要求:window7+,macOS10.12.6+,node10.14.5+效果demo教程目录从0开始配置工程1.1获取Demo工程导入HbuilderX1.2试试云插件并导入Demo工程1.3配置测试使用腾讯云UserId+UserSig1.4封装自定义库，使用自定义库进行开发调试了解设计改造类微信App应用的实现2.1界面布局设计及定制化开发2.2修改测试UserId+UserSig2.3聊天会话管理及更新聊天会话工程2.4加载聊天记录及收发消息2.5定位SDK配置及收发定位消息2.6自定义开发贴纸和表情一对一语音视频在线通话接入3.1试用TRTC插件并导入Demo工程3.2腾讯云后台开启TRTC功能3.3配置TRTC-Calling同步登录SDKfunction3.4配置音视频通话，自定义开发参考文档资源：uniapp腾讯云TXIM原生插件文档uniapp腾讯云TRTCCalling原生插件文档腾讯云TXIM原生SDK文档腾讯云TRTCCalling原生SDK文档uniapp腾讯云TXIM原生插件-inuniapp腾讯云TRTC调用原生插件1.开始configurationprojectfrom01.1获取Demo工程，将其导入到HbuilderX中，获取Demo工程。该项目可以通过gitee链接地址获取，项目名称：Zion。lin/Zhimi.OpenSource.UniApp.TXIM.Vue有两种获取方式。具体方法如下：方法一：打开gitee链接后，点击Clone/Downloadonline，下载zip包解压得到源码工程方法二：通过命令行Clonegit得到源码工程git克隆https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue.git拿到工程后，我们需要手动导入到HbuilderX中，也很简单。我们只需要将工程拖入HbuilderX中即可完成导入工作。完成项目导入后，我们还需要对项目做一些调整。双击打开manifest.json（根目录下），选择“基本配置”，再次点击获取AppId。否则，打包自定义基类时可能会出错。属于此帐户的问题。1.2试用云插件并导入Demo工程打开uniapp插件市场，搜索《腾讯云即时通讯-好友群聊语音图视频(付费版)》，点击试用，选择我们刚刚重新获取的AppId，为这个AppId申请一个免费试用插件.确认应用完成后，我们回到HbuilderX，打开manifest.json（根目录下），点击App原生插件配置，导入云插件。确认显示如图后（如果需要原生相册/一对一语音视频通话，还需要另外两个相应的云插件），就可以开始下一步了，使用UserId以及腾讯云后台配置测试中的UserSig1。3.腾讯云UserId+UserSig用于配置测试。腾讯云系列SDK采用userId+UserSig的方式进行用户登录。一般我们从后台返回获取，但是这里我们显然没有连接到后台。因此，我们需要自己生成多个UserId+UserSig进行测试，通常5个就够了。生成之后，我们可以在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'},constSDKAppID=14005218821.4打包自定义基座，并且使用自定义基座进行开发调试在打包之前，我们需要安装依赖，这里需要开发者安装nodejs运行环境，以及安装hbuilderxscss编译插件，没有安装Developerspleasefollowthelinkbelowtoinstallthewebsitesandcontentthatmaybeusedinthecorrespondingenvironment:nodejsofficialwebsite:https://nodejs.org/zh-cn/nodejsChinesewebsite:http://nodejs.cnscss/sasscompileplug-in:https://ext.dcloud.net.cn/plu...Aftertheinstallationiscomplete,thedevelopercanopenaterminalinhbuilderxandenterthefollowingcommandtocompletethedependencyinstallation.Duetothelimitationsoftheuniappframework,theuseofnativeplug-insmustfirstpackagethecustombase,andthendevelopanddebugthroughthecustombase.HerewefirstdemonstratehowAndroidpackagesacustombaseandusesacustombasefordevelopment(theIOSoperationprocessisthesame,thecertificateneedstouseadevelopmentcertificateoranenterprisecertificate,andcannotuseareleasecertificate)2.UnderstandthedesignandtransformationofWeChat-likeAppapplications2.1InterfacelayoutdesignandcustomizeddevelopmentForWeChat-likeAppapplications,Demoisdividedinto7componentsaccordingtodifferentdesignsofUIfunctions,whichareplacedinthecomponentsdirectory.Thespecificcorrespondenceisasfollows:byseparatingtheUIcomponentsfromthebusinesslogic,whichreducestheoverallcouplingbetweenthebusinessandtheUI,sothatwhentheUIneedstobecustomized,onlytheUIcomponentscanbemodified,reducingthedevelopmentcost.各组件对应效果如下：聊天好友列表（ChatContactItem）文本输入框（ChatInputBox）语音输入框（ChatInputBox）聊天界面容器（ChatLayout）聊天消息项（ChatMessageItem）聊天输入框扩展面板（Drawer）业务interface，分为3个界面，如下：login.vue-登录界面，用于登录腾讯云账号list.vue-对话界面，显示历史聊天列表和最新聊天信息singleChat.vue-一对一-一个单一的聊天界面，显示聊天信息和聊天交互的界面。至于开发者如何修改和调试，主要有两种场景：改变主题颜色和样式。在这种情况下，您只需要修改组件中的图标和颜色即可。对于业务界面，可以根据需要修改navBarBackgroundColor。改变界面的布局风格。此时只需要修改组件中的图标和排版位置即可。对于较大的部分，需要根据排版要求（如添加槽位等）调整ChatLayout。2.2修改测试UserId+UserSigdemo工程中内置的测试UserId和UserSig已经过期。在上面的操作中，我们配置了属于我们测试的UserId和UserSig。这里我们需要更改我们上面配置的UserId和UserSig，方便我们开发调试App。当然，我们还需要同时修改SDKAppID，否则会报错UserId与SDKAppID不匹配。修改工作很简单，我们只需要修改2个地方，如下图标注。注意：修改后我们不需要重新打包custombase，但是最好重启调试，因为uniapp的编译机制有时会导致部分Android设备不刷新同步额外导入的js文件，导致部分调试2.3聊天会话管理和更新聊天会话项目聊天会话是指用户与好友/群组聊天后产生的本地聊天会话记录，开发者一般将其显示为消息/会话列表。这里TXIM封装了一系列CURD方法，通过事件反馈来更新会话列表信息（排序/更新草稿/更新上标等）。获取列表聊天会话列表在list.vue界面的以下位置获取。主要是在初始化时通过getConversationList方法获取最后更新的session信息。这里我们需要保存this.nextSeq，这样我们就可以获取页面中的session列表了。这里的主要代码是这个方法let{data}=awaitthis.$txim.getConversationList(this.nextSeq,999)//这里的999表示pageSize=999，一般生产环境是20，按照腾讯官方的定义，我们不'需要像传统的列表查询一样传递pageIndex。腾讯每次都会返回数据中的nextSeq作为下一次查询的seq记录。获取会话列表后，我们只需要按照上一条消息的时间戳降序排序即可，即最新的消息可以显示在列表的最前面。更新session列表由于即时通讯是实时通信，消息更新也是实时的，所以我们需要监听session消息变化事件，这样当session列表更新时，view也随着底层数据的变化而变化，比如重排，显示下标等。在界面中实现这部分监控逻辑的代码主要在这里。一般来说，我们在获取session更新记录的时候，不一定只获取一条，所以需要循环数据，更新所有变化项。当我们在demo中获取到新session时，我们不对它们进行排序，建议在生产环境中实现排序，以便用户及时发现新消息。实现方法也很简单。我们只需要按时间戳对最终的conversationList进行排序即可。代码如下：letconversationList=this.conversationList.sort((a,b)=>b.lastMessage.timestamp-a.lastMessage.timestamp)this.conversationList=conversationList2.4加载聊天记录和消息加载聊天记录以及消息demo已经集成在singleChat.vue文件中，主要逻辑封装了singleChat所有的消息收发和聊天消息查询方法，以及聊天消息的显示和消息编辑，图形、文本的选择和编辑和视频都是通过子组件实现的，然后由singleChat通过emit事件发送出去。具体开发者请参考componetns目录下的聊天组件。聊天消息的加载就在这里。在我们得到我们想要聊天的用户ID之后，我们需要先加载聊天消息。这里我们不探讨如何滚动/延迟加载数据。我们只关注如何加载聊天记录消息。在singleChat页面中，mountedhook生效后，我们会执行this.getLogs方法获取聊天记录，getLogs方法的具体代码如下：这里还是需要传入pageSize，即count:20这里，我们仍然不需要传入pageIndex，根据上一条消息的id(lastMsgId)，完成分页获取数据。还有两个用于处理聊天消息的特殊负载。这里我们有一个特殊的代码，叫做this.HistoryMessageToChatLog。由于我们封装了一个消息组件，为了方便该组件移植到其他IMSDK，我们将对消息组件的数据格式进行抽象，所以这里是将腾讯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后（一般一个用于Android，一个用于ios），我们需要填写以下位置，共配置2个地方。请注意，如果你配置了App模块，你还需要重新打包custombase。开始调试，所以个人建议在项目开始的时候配置，防止需要再次等待，浪费时间。2.6贴纸表情的自定义开发开发者只需在component/ChatInputDrawer目录下的face.vue文件中修改自己的表情包资源即可。属于贴纸包，开发者需要调整样式支持贴纸包，demo工程不支持。3、一对一语音视频在线通话接入3.1试用TRTC插件，导入Demo工程打开uniapp腾讯云TRTC通话原生插件地址：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文件中，开发者需要自行修改这个地方来实现调用邀请。呼叫邀请界面可以正常弹出。修改通话界面样式这里，通话界面目前只针对一对一通话设计。开发者可以根据自己的需要修改界面风格，甚至支持多人视频通话。完全可以实现微信即时聊天的功能。文中提到的这些原生插件，大家可以参考uniapp插件市场的插件。在插件市场搜索“知米”即可找到开源代码项目。还可以加QQ群定制更多个性化功能！
