解决Electron窗口白屏问题的预创建方案

在使用Electron创建窗口时，有时会遇到窗口显示白屏的问题。这篇文章将介绍一种解决方案，即预创建窗口，并提供了针对窗口关闭和应用退出的管理方法，以确保 Electron 应用的顺畅运行和用户体验。

问题描述

在使用 Electron 创建窗口时，有时会发现窗口显示出一片空白，即白屏问题。这可能会给用户带来困惑和不良体验。问题的根本原因是窗口被创建后立即显示，但此时窗口内容尚未加载完成，导致白屏现象的出现。

基本设置

首先，我们可以通过在初始化创建窗口时添加show: false的配置来进行基本设置，此时窗口将不会自动显示。接着后续再通过调用win.show()和win.hide()方法，我们可以在需要的时候手动显示和隐藏窗口，避免白屏问题的出现。

1. 在初始化创建窗口时，添加show: false的配置，使窗口在创建后不会自动显示。

   const {
         BrowserWindow } = require('electron');
   
   const win = new BrowserWindow({
         show: false });
   

2. 当需要展示窗口时，调用win.show()方法显示窗口；当需要隐藏窗口时，调用win.hide()方法隐藏窗口。

   // 显示窗口
   win.show();
   
   // 隐藏窗口
   win.hide();
   

预创建窗口监听

然而，一些快捷键或系统默认快捷键可能会触发窗口的默认关闭操作，导致窗口被销毁。当需要再次展示窗口时，就会遇到白屏问题。为了解决这个问题，我们可以通过预创建窗口监听的方式，阻止触发关闭操作，并改为隐藏窗口。

在窗口的close事件处理函数中，使用e.preventDefault()方法来阻止窗口的关闭，然后通过setTimeout设置一个适当的延迟时间后将窗口隐藏起来，从而避免了白屏问题的出现。

// 预创建窗口
win.on('close', function(e) {
   
    e.preventDefault();
    setTimeout(() => {
   
        win.hide();
    }, 50);
});

应用退出管理

然而，阻止预创建窗口触发关闭操作可能会带来另一个问题，即阻止整个 Electron 应用的退出。为了解决这个问题，我们可以对应用的退出前进行监听，并增加一个全局标识来判断是否要退出应用。

在应用的before-quit事件处理函数中，我们可以设置一个全局标识global.QUIT，当该标识为true时，阻止窗口关闭操作。这样，即使预创建窗口触发了关闭操作，应用也不会退出。

const {
    app } = require('electron');

// 应用退出前监听
app.on('before-quit', function(e) {
   
    global.QUIT = true;
});

// 预创建窗口
win.on('close', function(e) {
   
    if (global.QUIT) {
   
        return false;
    }
    e.preventDefault();
    setTimeout(() => {
   
        win.hide();
    }, 50);
});

通过上述预创建窗口和应用退出管理方法，我们可以解决 Electron 窗口白屏问题，提升应用的稳定性和用户体验。