How to catch the event of clicking the app window's close button in Electron app

在Electron应用程序中，您可以通过监听窗口（BrowserWindow 实例）的 close 事件来捕捉用户点击关闭按钮的动作。这可以在应用程序的主进程中设置。下面是一个简单的实现例子：

步骤 1: 创建并设置 BrowserWindow

首先，确保您已经创建了一个 BrowserWindow 实例。这通常在应用的主进程文件中（通常是 main.js 或 index.js）完成。

javascript
const { app, BrowserWindow } = require('electron');

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');

  // 监听关闭事件
  win.on('close', (e) => {
    console.log('窗口关闭前的处理');
    // 这里可以插入你需要执行的代码，比如提示保存操作等
    // 如果需要取消关闭，可以调用 e.preventDefault();
  });

  win.on('closed', () => {
    console.log('窗口已关闭');
    // 在这里做一些清理操作，例如释放资源、保存数据等
  });

  return win;
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

步骤 2: 监听 close 事件

在上面的代码中，我们给创建的窗口添加了一个 close 事件监听器。当用户尝试关闭窗口时（例如点击窗口的关闭按钮），此事件会被触发。

javascript
win.on('close', (e) => {
  console.log('用户尝试关闭窗口');
  // 这里可以执行一些逻辑判断，比如检查用户是否保存了修改内容
  // 如果要阻止窗口关闭，可以使用 e.preventDefault();
});

示例：阻止窗口直接关闭并弹出提示

以下是一个实际的例子，当用户点击关闭按钮时，我们会弹出一个确认对话框询问用户是否真的想要关闭窗口：

javascript
const { dialog } = require('electron');

win.on('close', (e) => {
  e.preventDefault(); // 防止窗口立即关闭
  dialog.showMessageBox({
    type: 'question',
    buttons: ['Yes', 'No'],
    title: 'Confirm',
    message: '确定要关闭吗？'
  }).then(result => {
    if (result.response === 0) { // 用户点击 "Yes"
      win.destroy(); // 忽略 close 事件并强制关闭窗口
    }
  });
});

这样，我们就可以在用户尝试关闭窗口时执行一些自定义的逻辑，并根据需要阻止或允许窗口关闭。