Electron 中如何创建一个 BrowserWindow？

推荐答案

在 Electron 中创建一个 BrowserWindow 的步骤如下：

// www.javascriptcn.com code example
const { app, BrowserWindow } = require('electron');

function createWindow() {
  // 创建一个新的浏览器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 启用 Node.js API
      contextIsolation: false // 禁用上下文隔离
    }
  });

  // 加载应用的 index.html 文件
  mainWindow.loadFile('index.html');

  // 打开开发者工具
  mainWindow.webContents.openDevTools();
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用
app.whenReady().then(createWindow);

// 当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// 在 macOS 上，当应用被激活且没有窗口时，创建一个新窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

本题详细解读

1. 引入 Electron 模块

首先，我们需要从 electron 模块中引入 app 和 BrowserWindow。app 是 Electron 应用的主进程模块，而 BrowserWindow 用于创建和控制浏览器窗口。

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

2. 创建 BrowserWindow 实例

在 createWindow 函数中，我们通过 new BrowserWindow(options) 创建一个新的浏览器窗口。options 是一个对象，用于配置窗口的属性，如宽度、高度、是否启用 Node.js API 等。

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true, // 启用 Node.js API
    contextIsolation: false // 禁用上下文隔离
  }
});

3. 加载 HTML 文件

创建窗口后，我们使用 loadFile 方法加载应用的 HTML 文件。这里假设我们有一个 index.html 文件作为应用的入口。

mainWindow.loadFile('index.html');

4. 打开开发者工具

为了方便调试，我们可以通过 webContents.openDevTools() 方法打开开发者工具。

mainWindow.webContents.openDevTools();

5. 应用生命周期管理

• app.whenReady().then(createWindow);：当 Electron 完成初始化并准备创建浏览器窗口时，调用 createWindow 函数。
• app.on('window-all-closed', () => {...});：当所有窗口关闭时，退出应用。在 macOS 上，通常应用不会退出，除非用户显式地退出。
• app.on('activate', () => {...});：在 macOS 上，当应用被激活且没有窗口时，创建一个新窗口。

通过这些步骤，我们可以在 Electron 中成功创建一个 BrowserWindow 并管理应用的生命周期。