第一天
第一天领到电脑但是还不能入域,同事借了我一个电脑,给拷贝了一份离线项目,项目是基于windows的智能会议办公软件,技术栈是electron+vite+vue,pnpm做包管理,结构还挺清晰的:main, preload, renderer分别有自己的文件夹,没什么阻力就跑起来了,只遇到一个报错:node c++ addon failed to load dll, 一开始以为是我nodejs安装的版本不对,毕竟编译electron的时候nodejs版本敏感,后来确认安装了对应了版本还是一样的报错,原来是同事给我拷贝的时候放在了中文目录下面导致的。
第二天
刚好接到一个小问题,是深色/浅色主题下 ,托盘菜单项的图标应该根据当前主题,动态显示反向的颜色,深色主题显示浅色图标,浅色主题显示深色图标,之前的解决方案是找了一个中间色,但是由于对比度不高所以视觉效果不是很好,我主要做了几个修改:
- 判断当前用户设置的主题是深色还是浅色,其中还要包含用户设置了跟随系统主题且系统主题为深色的情况
const contextMenu = Menu.buildFromTemplate()将electron的菜单内容从单次创建改为函数,因为直接修改菜单项的icon属性,electron提示不支持修改只读属性,所以只能每次打开托盘的时候,重新调用函数创建菜单模板。- 指定图标时候,用主题变量对应图片文件名后缀,nativeImage.createFromPath(path.join(basePath,
assets/tray/apps-${iconColor}.png)) 最后同事建议主题和上次没有变化时,就不要重建菜单模板,也算是一点点的性能优化了。
第三天
今天同事大哥让我尝试做个demo, 是关于floatbar的技术实现问题,当鼠标悬浮floatbar的时候,会出来一个对话框,对话框显示时有一个逐渐展开和收起的闪烁动画,现有的是通过css实现的,希望尝试使用electron window的位移和定位去实现,我猜是想和css方式对比效果和性能有什么不同。 后来我通过线性函数 easeInOut 去设置的窗口的目标大小,实现了闪烁动画,但平滑效果并不如css,最终放弃了这个方案。