Electron 中如何创建主进程？

推荐答案

在 Electron 中，主进程是通过创建一个 main.js 文件来定义的。这个文件是 Electron 应用的入口点，负责创建和管理应用程序的主窗口以及其他与操作系统交互的任务。以下是一个简单的示例代码，展示了如何创建主进程：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

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

本题详细解读

1. 引入 Electron 模块

在 main.js 文件中，首先需要引入 Electron 的核心模块 app 和 BrowserWindow。app 模块用于控制应用程序的生命周期，而 BrowserWindow 模块用于创建和管理应用程序的窗口。

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

2. 创建主窗口

通过 BrowserWindow 类可以创建一个新的浏览器窗口。在这个示例中，我们创建了一个宽度为 800 像素、高度为 600 像素的窗口，并加载了 index.html 文件作为窗口的内容。

// www.javascriptcn.com code example
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');
}

3. 监听应用程序生命周期事件

Electron 提供了多个生命周期事件，开发者可以通过监听这些事件来控制应用程序的行为。

• app.whenReady()：当 Electron 完成初始化并准备好创建浏览器窗口时，会触发这个事件。在这个事件中，我们调用 createWindow() 函数来创建主窗口。

app.whenReady().then(createWindow);

• app.on('window-all-closed', ...)：当所有窗口都被关闭时，会触发这个事件。在 macOS 上，应用程序通常不会退出，除非用户显式地退出应用程序（例如通过菜单栏）。因此，我们在这里检查当前平台是否为 macOS，如果不是，则调用 app.quit() 退出应用程序。

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

• app.on('activate', ...)：在 macOS 上，当应用程序被激活（例如点击 Dock 图标）时，会触发这个事件。如果当前没有打开的窗口，则创建一个新的窗口。

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

4. 运行应用程序

完成上述代码后，可以通过以下命令运行 Electron 应用程序：

electron .

这将启动应用程序并显示主窗口。