Electron的运行流程、主进程与渲染流程

艾光远

已于 2025-08-04 14:28:47 修改

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Electron 文章标签：桌面端开发 Electron

于 2021-04-14 23:51:12 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/115711336

Electron 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了Electron应用的运行流程，包括主进程与渲染进程的交互、Node.js在渲染进程中的启用、配置和代码实例。重点展示了如何在主进程中创建渲染进程，并配置允许Node使用，以及项目中实际操作的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 运行流程

1. 确定应用程序的起点

2. 启动应用程序并创建一个渲染进程

3. 为应用程序布局和添加样式

4. 使用IPC在主进程中执行任务并从主进程中获取信息

2. 主进程与渲染流程

package.json 中定义的入口被称为主进程，在主进程中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程。

一个 Electron 应用只有一个主进程，但是可以有多个渲染进程，每个 Electron 中的 web 页面运行在它自己的渲染进程中。

主进程使用 BrowserWindow 实例创建页面，每个 BrowserWindow 实例都在自己的渲染进程里运行页面，当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

3. 项目中使用Node

新版本的 electron 在渲染进程中默认无法使用 node，要想在项目中可以使用node必须要在mian.js中进行以下配置：

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // 渲染进程中可以使用node
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

如果要开启调试模式，需要在mian.js中添加如下代码：

mainWindow.webContents.openDevTools();

4. 代码实例

主进程main.js的代码如下：


const { app, BrowserWindow } = require("electron");
const path = require("path");
// cnpm install md5 --save
const md5 = require("md5");

const createWindow = () => {
    // 主进程中使用第三方模块
    console.log(md5("123456"));

    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 渲染进程中可以使用node
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();
}

// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

渲染进程index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron开发</title>
</head>

<body>
    <button id="button">获取文件内容</button>
    <textarea id="textarea" cols="40" rows="10"></textarea>
    <script src="./renderer/index.js"></script>
</body>

</html>

渲染进程中引入的js代码如下：

const fs = require('fs');
// cnpm install md5 --save
const md5 = require("md5");

window.onload = () => {
    
    // 渲染进程中使用md5
    console.log(md5("123456"));

    var button = document.getElementById('button');
    var textarea = document.getElementById('textarea');
    // 点击按钮
    button.onclick = () => {
        fs.readFile("package.json", (err, data) => {
            if(err) {
                return;
            };
            textarea.innerHTML = data;
        })
    }
}

效果如下：