跳至主要內容

主进程与渲染进程

望间代码Electron大约 2 分钟

主进程与渲染进程

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

主进程:任何 Electron 应用程序的入口都是 main 文件,就是这个文件控制了主进程。在主进程运行的脚本可以以创建 Web 页面的形式展示 GUI。主进程只有一个。

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

electron-process
electron-process

主进程事件生命周期

关闭所有窗口

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

下面是在 WinodwsLinux 上关闭所有窗口时退出应用的代码:

// 应用全部页面关闭时,触发 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 的能力时,预加载脚本就可以派上用场了。

预加载脚本在渲染器进程加载之前加载,并有权访问两个渲染器全局 (例如 windowdocument) 和 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");
};
上次编辑于:
贡献者: ViewRoom