2、主进程与渲染进程（Electron）

原创

已于 2025-10-26 13:20:23 修改 · 619 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

于 2025-09-28 23:59:08 首次发布

1、学习内容与目标

本章节，我们需要理解 Electron 的双进程架构与职责划分。

主进程中，我们会学习到关于app的部分生命周期函数的使用，以及window相关方法的调用。

2、核心概念

主进程（Main）：控制应用生命周期，创建原生窗口，访问 Node 能力。
渲染进程（Renderer）：负责页面 UI（HTML/CSS/JS），运行在类似浏览器环境。
进程间关系：主进程可以创建多个窗口，每一个窗口可以分别加载一个渲染进程。

3、启动进程的流程

主进程启动应用与窗口
窗口载入渲染进程页面
通过预加载脚本与 IPC 进行沟通（第 03、05 章）

4、最小主进程示例（TypeScript）

以下的代码是一个最小的主进程的应用实例

app，代表应用，它有一系列关于应用的生命周期方法，供程序使用。

BrowserWidow，表示窗口，创建窗口的时候，会使用到该构造函数。

import { app, BrowserWindow } from "electron";

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      preload: __dirname + "/preload.js",
      contextIsolation: true,
      nodeIntegration: false,
    },
  });
  mainWindow.loadFile("index.html");
  mainWindow.on