electron开发即时通讯软件，Windows端2021年度做过需求总结

总结一下这一年来，我做过的需求

1. 表情回复

这是我到公司的第一个需求，消息列表中增加一个表情回复按钮，点击发送表情，并展示表情

通过该需求熟悉了项目接收消息，发送消息和查询数据库，保存数据，im数据流更新等。

难点：快速上手项目，代码超级多，超级乱，第一眼看到绝对的怀疑人生，其实逻辑并不难，但是写了很多没有逻辑的代码。哎。。。。吐槽一下

2. 截屏截图功能

这是我做这个项目最有成就感的一个需求。

首先，目前市场上截图功能一般有C原生开发，单纯用electron开发的很少，（我没有在github找到直接能用的）。

调研，改造，重构。

用GitHub上面的几个项目，总结他们的优点，进行统一，然后完成需求。

遇到的问题：

1. 截图很慢，点击截图后，大概需要3秒才能完成。（难点）
2. 如何把截屏出来的图进行涂鸦绘画
3. 电脑分辨率问题，分辨率不同，展示的图片不能变形
4. 多屏问题，扩展分别展示，扩展屏位置（难点）
5. 如何预选中桌面上的所有展示的窗口（难点）
6. electron 低版本（低于9.x）无法识别系统窗口（只能升级electron或者使用win32接口）
7. 等等，省略一百个问题

问题解决办法：

1. 分析后，发现electron创建一个新的窗口特别耗时，把窗口实例提前创建出来，截图时只是把窗口展示出来，关闭截图，隐藏窗口。优化代码等。
2. 抄github钉钉的那个项目，react的代码，用vue重写一遍（过程也遇到了很多问题）
3. 动态计算，改变分辨率重启截图实例
4. 多个实例
5. win32 api

截图原理：

1. 利用electron 接口，获取左面的图片
2. 然后创建窗口，覆盖当前所有屏幕
3. 把图片展示出来
4. 使用win32接口，根据窗口句柄获取位置，根据鼠标所在的位置，高亮展示当前展示的区域（electron官方接口只能晓得有那些窗口，但是无法知道窗口的坐标）
5. 使用canvas对图片进行涂鸦操作
6. 保存图片，把canvas导出为图片
7. 完成截图

比钉钉微信做的好的地方，多屏截图改变分辨率不会导致截图不可用（他们两个都有bug） 不足的地方，目前没有跨屏截图的方案，就是鼠标截图允许拖拽到第二块屏幕一起截图

3. 日历月视图/周视图/日视图

月视图，直接使用element-ui Calendar组件。然后上面进行二次开发。

难点：如何动态的计算单元格的大小，然后动态展示事件的个数

月视图：

（月视图完成几个月之后才开始的） 周视图和日视图 其实周视图和日视图只用一个组件，日视图展示多天就是周视图了。

难点：如何展示时间冲突的事件，时间线的展示。

1. 该事件第一次放置的时候，根据时间，算出当前事件所占高度。
2. 因为每个一单元格的高度对应的时30分钟。
3. 获取到单元格的高度 h，当前事件的时长时60分钟，那么高度就是2h。以此类推。
4. 每一个单元格都会判断当前是否有事件，如果有事件，那么需要添加占位符，占位符不需要算高度。
5. 占位元素用于排序，均分展示

原理图如下：

周视图：

日视图：

4. 图片查看器

比如微信、钉钉，点击图片打开窗口，查看图片。我们的IM也需要类似功能。

功能：下一个，上一个，图片放大，缩小，旋转，导出功能。

难点，重点：

1. 窗口放大、缩小，还原，完全自定义窗口。
2. 多进程通信，主窗口渲染进程和当前进行通信。
3. 从SQLite数据库获取当前的对话（1v1,群）聊天中所有的图片。
4. loading、加载失败二次加载（本地没有图片）等
5. 主进程记录当前打开的状态图片的状态，记录图片的会话id所属对话等，主进程操作渲染进程的localStorage等。

5. 通话质量反馈

1v1，视频语音通话结束增加一个弹窗，用于给用于用户反馈。

当用于点击反馈good/bad的时候，把当前用户填写的表单，以及用户的电脑基本信息通过接口反馈到Server端。

难点：1. 通过nodejs获取本机电脑系统的信息。

6. 改UI，二次开发elementui组件

最坑的需求了，连续改了四五个月的UI，ui把以前的推翻，重新改了很多，样式，颜色，页面等等。很多都重新写了一遍。来了一个规范。

难点：对element-ui进行二次开发，修改源码，覆盖默认样式。