前言

近期在处理业务时，涉及到了微信聊天记录消息存档的场景；接下来分析分析，实现微信聊天记录组件时，所需要注意的几点地方；

1. 分析原生微信聊天窗口

聊天窗口可分为PC端跟移动端，先看看PC端：

实现此聊天窗口，需要注意两点就是：

每次进入新的聊天窗口时，页面都是至于最底部，以保证查看到最新消息；
加载下一页数据时，将请求到的数据放到原数组前面，这时候vue会自动重新渲染页面，页面会回到顶部，这并不是我要的效果；我们想要的是，查看更多时，此时历史的消息会添加到顶部去，此时滚动条还是在原来位置，以保证当前页面位置不变；

同时，在想想手机端，也是同样的效果。每次进入新的聊天窗口，页面都至于最底部；另外，向上滑动时，会进行历史消息的加载，并保持在原来位置

2. 分析实现效果

这里根据不同的端，分析不同的实现方式；

1. 移动端

先将外层盒子翻转180°，这样可以改变默认的方向，能够使我们在进行滑动加载历史数据的时候，达到平滑流畅加载的一个效果；
在设置盒子以及消息文本的direction属性，以优化翻转后的页面错乱
根据实际情况，可自行优化其他元素的位置错乱

2. PC端

首先如果在PC端中，使用移动端的方法来实现此效果，虽然完美的解决了，加载数据时，保证当前页面位置不变的问题，但是会出现其他几个问题：

由于盒子翻转，纵向方向发生了改变，那么每次进入页面时，如果消息数量较少，比如只有一条消息时，那么此次该消息就会被至于底部；而原生微信聊天窗口，是至于顶部的，这就不符合我们的预期；
由于方向发生了改变，从而导致了滚动条的滚动方向发生了改变，当我们在页面内，鼠标向上滚动时，页面就会向下滚动；鼠标向下滚动时，页面就会向上；这就违背了我们正常使用产品时的思维，也不符合预期；

如何解决

目前暂未想到用上述方法时，如何解决这两个问题；所以可以采用其他方法，详见如下：

首先说明下几个属性点：

scrollTop - 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollHeight - 获取对象的滚动高度

在每次进入页面时，调用此函数，让每次进入页面时，都能够使盒子至于最底部

const wrap = document.getElementsByClassName('盒子类名')[0]
wrap.scrollTop = wrap.scrollHeight

在每次点击查看更多，加载历史数据时，记录加载前的滚动页面的位置，数据加载后，回到记录的滚动位置（此方法可行，但是会出现滚动条闪动效果，目前暂未找到解决方法，但不影响功能的使用）

点击加载更多前，记录滚动页面的整个高度，然后，当下一页数据加载完之后，重新获取一下滚动区域页面的高度，于是，这一次加载的数据的高度就是：现在的高度 - 上一次的高度

// 查看更多消息handleMoreMsg() {const wrap = document.getElementsByClassName('盒子类名')[0]this.lastScrollHeight = wrap.scrollHeightthis.$emit('moreMsg', ++this.page) // 加载历史数据setTimeout(() => {this.scroll()}, 150)},
// 滚动到指定位置scroll() {const wrap = document.getElementsByClassName('盒子类名')[0]const scrollTop = wrap.scrollHeight - this.lastScrollHeightwrap.scrollTop = scrollTop // 滚动高度},

总结

以上就是实现聊天记录组件所遇到的几个点，当然肯定也有其他更好的实现方式，待我再去探究探究~

实现消息存档—微信聊天记录组件相关推荐

查找企业微信聊天记录，会话存档有多重要
会话存档是基于企业微信API插口而开发设计的聊天记录查询专用工具.运用会话存档能不能找到误删除.到期的聊天记录呢?实际上能否通过会话存档找到企业微信中的聊天记录分两种状况,大家一起来看看吧:开启会话存 ...
企业微信-会话内容存档实时拉取企业微信聊天记录java版SDK
企业微信-会话内容存档实时拉取企业微信聊天记录java版SDK git传送门 https://gitee.com/flash127/wework-msgaudit wework-msgaudit 企 ...
企业微信聊天记录如何备份？企业微信如何导出聊天记录？
现在有很多的企业都是使用企业微信跟客户沟通,聊天中产生的聊天记录具有重要价值,因为包含了很多重要信息.如果这时候某位员工的电脑或者手机出现了问题,需要更换,那么这些聊天记录会不会也丢失了呢?如果还在, ...
删掉微信聊天记录怎么恢复？怎么恢复微信聊天记录？
您可以恢复已删除的微信历史记录吗? 这个问题没有确定的答案,因为恢复取决于许多因素,包括删除聊天记录的时间以及使用的设备类型.但是,有几种方法可以成功恢复已删除的微信历史记录,例如使用数据恢复软件或联 ...
微信聊天记录提取及分析（wordcloud+pyecharts）
0. 前言之所以想要提取微信的聊天记录并分析是因为也开始再学习python,但是单纯看看语法什么的又很无趣,无意间看到python可以进行微信聊天记录的分析,就自己尝试做了一下,感觉还是挺有意思 ...
java导出excel_如何导出你和女票的微信聊天记录
正文共:2497 字 16 图预计阅读时间:7 分钟前言 Sun和Star已经在一起将近两年了. 从两年前的夏天高考结束两个人加了微信,到现在,已经产生了不计其数的聊天记录....... 就在某一 ...
做一个关于我和她微信聊天记录的爱心词云图
前言: 因为最近接触到了词云图,所以就想做一个关于和女朋友聊天的词云图,但是现在很少使用QQ了,所以就不得不使用微信导出聊天记录.于是我坐在电脑面前查阅资料查了一天,但是在走到快导出微信聊天记录 ...
微信聊天记录如何恢复
微信是现在人几乎每天都要使用的软件,甚至现在连工作都离不开微信,不下心误删了微信聊天记录就麻烦了.当你的微信聊天记录删除了或者找不到了,可以试着把微信聊天记录去恢复再进行查找.具体微信聊天记录怎么恢复 ...
wechat微信聊天记录两台电脑转移
微信选择聊天记录路径后,会自动新建一个比如我软件安装在D:\Program Files (x86)\Tencent\WeChat 选择聊天记录保存在D:\Program Files,它自动识别了我的 ...
如何在 iPhone 上恢复微信聊天记录！
误删了微信聊天记录,如何在 iPhone 上恢复微信聊天记录如今,微信拥有庞大的用户群,很多人用它来沟通.支付.点餐等与我们日常生活相关的事情,我们的生活已经离不开它,它功能强大,使用方便,给我们带 ...

实现消息存档—微信聊天记录组件

前言