解决Electron应用打开后短暂出现菜单栏和白屏闪烁问题

问题背景:

最近准备使用Electron来做一个桌面读书软件,由于之前接触出类似项目,但没有人深入去做,所以这次准备自己独立完成一个。
Electron打包的应用会自带上顶部菜单栏,包括(File、Edit、View、Window、Help)等菜单,由于不需要该菜单,于是在主程序文件中将他们隐藏掉了。

// 隐藏顶部菜单
  win.setMenu(null);

解决Electron应用打开后短暂出现菜单栏和白屏闪烁问题
重新运行后发现,在应用启动时会出现0.5秒左右的闪烁,此时隐藏的菜单再次出来了,而且屏幕一片雪白,体验很不好
解决Electron应用打开后短暂出现菜单栏和白屏闪烁问题

问题排查

本以为是不是电脑性能问题,想着是不是打包后就不会出现该现象,打包后安装发现问题照旧。
经过多次搜索,最后在网上找到了相同的问题。
解决Electron启动出现短暂的白屏
也就是说,应用在打开时会加载本地资源,在没有加载完成时是没有任何内容的,所以一片空白。
如果要解决该问题,就需要在应用资源加载完成后再显示窗口,这样就可以了。

解决方案

  1. 在主程序文件中,将窗口状态设置为关闭。即添加“show:false”。
    解决Electron应用打开后短暂出现菜单栏和白屏闪烁问题
  2. 创建一个“ready-to-show”的监听,每次窗口渲染完成后会触发该事件,当该事件被触发后,就表示可以显示窗口了。
win.once('ready-to-show', () => {
    win.show();
  });

解决Electron应用打开后短暂出现菜单栏和白屏闪烁问题

总结

这样以来就可以了,再次编译时,亲测不会出现闪烁现象了。

上一篇:解决vue3 + electron 中使用ipcRenderer报错的问题


下一篇:实践项目2 图书管理系统