我的微信聊天模拟器开源了，关于其功能或技术细节，您有什么具体疑问吗？

说实话，我最近有点沉迷于搞这个微信聊天模拟器，哈哈，你懂的，就是那种能模拟微信聊天的工具。

起因是前两天我在网上看到一个类似的工具， 感觉还不错， 拉倒吧... 但又觉得它不够完美，咱就是说有些地方还是差点意思。

佛系。 比如说 它用的还是老版本的微信界面很多新版微信的功能都没有，害，那些自媒体小编肯定很头疼。

拜托大家... 于是我就想，不如自己动手搞一个吧，反正闲着也是闲着。

技术选型

先说说我得选个合适的技术栈，对吧？

思来想去， 我决定用Vue 3 + TypeScript为啥呢？主要原因是 Vue 3 的 Composition API 实在太香了 逻辑复用变得超级简单， 绝了... 而 TypeScript 又能帮我提前扼杀一堆潜在的 Bug。

行吧... UI 组件库嘛， 我顺手就用了Element-plus虽然主要界面是我手写的，但有些地方用成熟的组件库还是很方便的，你懂的。

Vite 的极速体验

开发过程中， 我直接用了Vite v8+不对不对，现在都 v9 了吧？ 是最新版，PUA。。

有人可能会说：“稳定版不香吗？”但我想说作为前端开发者，如果不时刻保持对新技术的敏感度，很快就会被时代抛弃，结果你猜怎么着？。

Vite 的极速冷启动和 HMR， 在开发过程中真的能省下不少喝咖啡的时间，这种丝滑的体验，谁用谁知道，无语了...。

实现细节

聊天的核心自然是“消息”了 但如果我把所有类型的消息都写在一个组件里那代码维护起来绝对是一场灾难。

我直接好家伙。 所以我采取了策略模式的思想， 将消息按类型进行了切割，每个消息类型都是一个独立的 Vue 组件，在渲染时根据数据中的msgType字段动态决定加载哪一个。

举个例子， 比如文本消息语音消息时间消息这三种基础格式，每种都有自己的组件。

还有个值得说道的细节：自动滚动。很多人习惯用nextTick 但在 搞起来。 消息频繁更新时MutationObserver其实是更稳健的选择。

它能监听到 DOM 子节点的变化， 一旦有新消息插入， 共勉。 立马触发滚动回调，保证用户看到的永远是最新的那一条。

UI 还原度

为了追求极致的还原度， 我没有简单粗暴地画个框完事，而是将“手机”这个概念进行了单独的封装，境界没到。。

这不仅仅是一个容器， 它包含了顶部的状态栏、中间的导航栏以及底部的输入栏区域，甚至连那个小三角的角度、边框弧度、阴影偏移量我都抠得非常细，当冤大头了。。

iPhone 的“刘海”和灵动岛更是让我抓狂， 反复调整了无数次 CSS，拿着尺子在屏幕上比对，强迫症都快被逼出来了。

开源与未来计划

项目已经正式开源了！

妥妥的！ v0.版本虽然只支持几种基础格式， 但我的架构已经为后续留足了口子，后续会逐渐更新其他消息格式，比如图片消息、视频消息、转账、红包等功能，请大家持续关注这个项目！欢迎去 Gitee 点个 Star，你们每一个 Star，都是我熬夜更新的动力！后期会逐渐更新其他消息格式，请大家持续关注这个项目。如果你觉得这个项目对你有帮助， 或者单纯想鼓励一下我这个“失踪人口”，欢迎去 Gitee 点个 Star ⭐。你们的每一个 Star，都是我熬夜更新的动力！后期会逐渐更新其他消息格式，请大家持续关注这个项目。

v0.x 版本规划

• 当前版本：v0.x
• 支持功能：文本消息、 语音消息、时间消息等基础格式
• 下一步计划：图片消息、视频消息、转账、红包等功能的开发

再说说

代码无止境,折腾永不停。如果您对项目有任何疑问，或者有更好的建议,欢迎在评论区留言,咱们一起探讨!，大胆一点...

"