主进程与渲染进程

每个 Electron 窗口都有一个主进程和一个或多个渲染进程。

主进程：任何 Electron 应用程序的入口都是 main 文件，就是这个文件控制了主进程。在主进程运行的脚本可以以创建 Web 页面的形式展示 GUI，负责创建浏览器窗口、处理系统托盘、菜单栏等操作。主进程只有一个。

渲染进程：每个 Electron 的页面都在运行自己的进程，这样的进程称为渲染进程。渲染进程是一个 Chromium 进程，责渲染和显示窗口中的网页内容。

electron-process

主进程事件生命周期

关闭所有窗口

在 Windows 和 Linux 上，关闭所有窗口通常会完全退出一个应用程序，而 MacOS ，它只会挂载到 Dock 上，不会退出，所以 MacOS 上需要特殊处理。

下面是在 Winodws 和 Linux 上关闭所有窗口时退出应用的代码：

// 应用全部页面关闭时，触发 window-all-closed 事件
app.on("window-all-closed", () => {
  // 如果系统不是 MacOS
  if (process.platform !== "darwin") {
    // 应用退出
    app.quit();
  }
});

在 MacOS 上，如果没有窗口打开则打开一个窗口:

app.whenReady().then(() => {
  createWindow();

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

提示

因为窗口无法在 ready 事件前创建，所以应当在应用初始化后监听 activate 事件。

渲染进程中使用 Node.js API

为了安全，Electron 默认禁用了渲染进程使用 Node.js 的能力，当页面加载时，又需要使用 Node.js 的能力时,预加载脚本就可以派上用场了。

预加载脚本在渲染器进程加载之前加载，并有权访问两个渲染器全局 (例如 window 和 document) 和 Node.js环境。

preload.js

// 当 DOM 加载完成后执行
window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const dependency of ["chrome", "node", "electron"]) {
    replaceText(`${dependency}-version`, process.versions[dependency]);
  }
});

const { app, BrowserWindow } = require("electron");
// 导入 Node.js 的 path 模块
const path = require("path");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 预加载
      preload: path.join(__dirname, "preload.js"),
    },
  });

  win.loadFile("index.html");
};