Electron主进程和渲染进程

最新推荐文章于 2025-06-28 16:10:14 发布
原创 最新推荐文章于 2025-06-28 16:10:14 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #javascript

本文详细介绍了Electron应用中的主进程和渲染进程，包括它们的定义，主进程日志在执行npm run electron的控制台查看，渲染进程日志通过Chrome开发者工具查看。此外，还讲解了如何在Electron中自定义原生菜单的步骤。

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

一、主进程和渲染进程

1、定义

Electron运行package.json的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且仅有一个主进程。

由于Electron也使用了Chromium来展示web页面，所以Chromium的多进程架构也被使用到。每个Electron的web页面运行在它的叫渲染进程的进程中。

在普通的浏览器中，web页面无法访问操作系统的原生资源。然而Electron的用户在Node.js的API支持下，可以在页面中和操作系统进行一些底层交互。

2、主进程和渲染进程的日志的打印位置

（1）主进程的日志在执行npm run electron的控制台查看日志。

（2）渲染进程的日志使用chcontrol+shift+i查看日志。

         或者在main.js中加一行，在electron运行时自动打开调试工具可以查看日志。

  // 默认打开调试工具
  mainWindow.webContents.openDevTools()

二、自定义原生菜单 

步骤：1、自定义菜单模板，2、编译模版 3、设置菜单

// BrowserWindow是用来新建窗口的, Menu操作自定义菜单
const { app, BrowserWindow, Menu } = require('electron')
// 步骤：1、自定义菜单模板，2、编译模版 3、设置菜单
// 自定义菜单模版
const template = [
  {
    label: '自定义菜单',
    // 子菜单
    submenu: [
      { 
        label: '新建窗口',
        //  给菜单定义点击事件,是一个函数 
        click() {
          new BrowserWindow({
            width: 200,
            height: 200
          })
        }
      }
    ]
  },
  {
    label: '自定义菜单帮助',
    submenu: [
      {
        label: 'reload'
      }
    ]
  }
]

// 由于mac第一个菜单会被遮挡，所以用这种方式
template.unshift({
  label: app.getName()
});

// 编译模版，得到menu对象
const menu = Menu.buildFromTemplate(template)
// 设置菜单
Menu.setApplicationMenu(menu)

  

electron 主进程和渲染进程通信
读心悦
07-21 1030
在Electron中，主进程（main process）和渲染进程（renderer process）之间的通信是非常重要的，因为Electron应用通常会将用户界面（由Web技术如HTML, CSS, 和JavaScript构建）和原生功能（如系统对话框、文件I/O等）分开处理。主进程管理应用的生命周期和创建渲染进程，而渲染进程则负责展示应用的界面。
【Electron学习笔记（三）】Electron的主进程和渲染进程
禾戊之昂的博客
11-29 1399
在 Electron 应用程序的开发中，理解并有效利用主进程（Main Process）和渲染进程（Renderer Process）是至关重要的。Electron 框架基于 Chromium 和 Node.js，它允许开发者使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用程序。为了充分发挥这一优势，Electron 设计了主进程和渲染进程的分离架构，以确保应用程序的安全性和性能。
electron主进程和渲染进程通信
01-24
介绍：https://blog.csdn.net/applek_Case/article/details/86622059
深入理解Electron应用结构：主进程与渲染进程详解
与墨的编程成长历程
03-20 2314
综上所述，深入理解并熟练运用 Electron 框架下的主进程与渲染进程模型，是构建高性能、高安全性和良好用户体验桌面应用的关键所在。随着技术的发展和实践经验的积累，相信开发者们能更好地驾驭 Electron 这一强大的工具，持续推动跨平台桌面应用开发的进步。
Electron的主进程和渲染进程以及进程通信
最新发布
weixin_45946310的博客
06-28 1128
本文主要介绍Electron的主进程、渲染进程以及进程通信IPC
Electron的运行流程、主进程与渲染流程
分享前端工程化、动效魔法与性能之舞！
04-14 2555
Electron应用开发流程解析：分为主进程和渲染进程，主进程通过BrowserWindow创建渲染进程窗口。新版Electron默认禁用渲染进程的Node支持，需在webPreferences中配置nodeIntegration参数。示例展示了主进程main.js和渲染进程index.html的配合使用，包括Node模块调用、文件读取等功能实现，同时演示了开发者工具开启和跨平台兼容处理。开发中需注意主进程负责管理窗口生命周期，而每个渲染进程独立运行页面内容。
03_Electron 主进程和渲染进程、点击（拖放）打开文件功能
所学所思
08-08 1641
在页面运行其他脚本之前预先加载指定的脚本， 无论页面是否集成 Node，此脚本都可以访问 所有 Node API 脚本路径为文件的绝对路径。： 进程（process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配的调度的基本单位，是操作系统结构的基础。2、如果不使用 preload 加载的 js ，Electron5.x 之后没法在渲染进程中直接使用 nodejs，在主进程 中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程，一个 Electron 应用。
electron之主进程、渲染进程
lss0555的博客
09-20 4978
一、electron启动后的进程 主进程 GUP渲染进程 界面渲染进程 各个进程相互独立，彼此进程是不会共享内存和状态的。 1、主进程 electron项目启动的时候运行background.js的进程就是主进程，一个项目有且只有一个主进程 创建窗口等有关系统事件写在主进程中进行。 它主要通过Node.js、Electron提供的API与系统底层打交道 相关api app：控制应用的事件生命周期 autoUpdater：自动更新 BrowserView：创建和控制视图 BrowserWindow：创建和
Electron 主进程和渲染进程通信方法总结
guoqkmiss的博客
02-12 1463
Electron 进行间通信总结：单向通知：使用 ipcRenderer.send（主进程通过 ipcMain.on 监听）；适合简单指令，不需要立即反馈。同步调用：使用 sendSync（阻塞渲染进程，不推荐用于耗时任务）。RPC 请求：使用 invoke（返回 Promise），由主进程 handle 或 handleOnce 处理，适合需要异步返回结果的场景。特殊场景：postMessage 和 sendToHost 针对嵌入式内容与宿主的跨上下文通信设计。
Electron 主进程和渲染进程互相通信
王俊的博客
02-25 1万+
对于 渲染进程 之间的通信，可见另一篇总结：https://blog.csdn.net/weixin_42762089/article/details/88532572 下面总结一下主进程和渲染进程之间的通信。 说明： 自主到从：从Main到Renderer的消息传递，借助BrowerWindow.webContents.send()发送消息。 自从到主：从Renderer到Main的消息传......
Electron 主进程与渲染进程、预加载preload.js
咸鱼滚滚
09-29 2393
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点（主进程具有唯一性）。任何 Electron 应用程序的入口都是 main 文件，负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。 主进程在 Node.js 环境中运行，它具有 require 模块和使⽤所有 Node.js API 的能力。 主进程的核心：使用 BrowserWindow 来创建和管理应用程序窗口。
Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信
04-10
此Demo 名字写错了，应该是 electronDemo ，呵呵。Electron 这个小Demo 实现了 Electron 程序 从0 开始搭建，没有用脚手架，实现了 Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信，几种实现方式都这个 Demo中。以及 桌面 自定义菜单， 界面右键菜单 等等 解决 Electron 5之后 默认没法在渲染进程引入模块报错 提示 require is not defined 这样的问题。 以及一些 常用 Electron API 绑定事件的 Demo
Electron 项目实战 01：主进程与渲染进程通信
Potter：I am not for learning and learning, but for study and work
08-30 1632
整体来说参看官方文档和网上的文章就可以轻松实现。
electron:主进程与渲染进程
gdutRex的博客
09-11 1310
主进程与渲染进程 Electron 运行 package.json 的 main 脚本的进程被称为主进程。 每个 Electron 中的 web 页面运行在它的叫渲染进程的进程中。 区别 主进程会通过BrowserWindow创建页面，每个BrowserWindow都有自己的渲染进程运行页面。 主进程管理所有web页面和他们对应的渲染进程，每一个渲染进程都是独立。 不允许操作GUI的原生API，如果需要的话，必须通过主进程来进行通讯。 使用 electron 的 API 无论时主进程还是渲染进程，都
Electron学习--主进程和渲染进程
Calla_Lj的博客
02-12 1098
主进程和渲染进程 1. 主进程： 在Electron中运行package.json和main脚本的进程称为主进程。例如，main.js文件属于主进程，同时在main.js文件中直接引入的js文件也属于主进程(如：require(’./mainProcess/menu.js’)) 2. 渲染进程： electron使用Chromium的多进程机制来渲染页面，每个页面拥有一个自己的进程，该进程称为渲...
electron 3.主进程与渲染进程
空
11-02 749
render.js console.log("render.js"); //渲染进程不能直接引入BrowserWindow模块 借助remote模块，从remote中拿到主进程允许使用的模块 const { BrowserWindow } = require('electron').remote; let btn = document.querySelector("#btn"); btn....
4 / 14 electron 的主进程与渲染进程之间的区别
小柒的前端之旅
04-14 1324
electron 简介 electron是由GitHub开发，是一个用HTML、CSS、JavaScript来构建的桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。 electron是一个运行时的环境，包含Node和Chromium 可以理解为把web应用运行在Node的环境中。 结构 electron运行package.json中的main字段就标明了主进程...
Electron系列教程——第三篇：主进程和渲染进程
热门推荐
其时十七的博客
12-22 1万+
Electron系列教程——第三篇：一、楔子 理解Electron的主进程和渲染进程，以及他们之间的区别，以及协作方式，是十分有助于理解Electron的本质的。而理解了本质，对于开发者来说，是大有裨益的。 作为之前接触过NW.js的我，理解了之后，暗自称赞，然后默默地转向了Electron。 二、目录Electron系列教程第三篇 一楔子 二目录 三正文 上篇的遗留问题 关于进程的疑
electron主进程给渲染进程发消息
03-25
### Electron 主进程向渲染进程发送消息 在 Electron 中，`ipcMain` 是主进程中的模块，而 `ipcRenderer` 则是渲染进程中的模块。两者通过 IPC（Inter-Process Communication）机制实现通信。 以下是主进程向渲染进程发送消息的具体示例： #### 示例代码 ```javascript // main.js (主进程) const { app, BrowserWindow, ipcMain } = require('electron'); let mainWindow; app.whenReady().then(() => { mainWindow = new BrowserWindow({ webPreferences: { preload: __dirname + '/preload.js', // 预加载脚本路径 nodeIntegration: false, contextIsolation: true } }); mainWindow.loadFile('index.html'); }); // 使用 ipcMain 向渲染进程发送消息 ipcMain.on('request-message-from-renderer', (event) => { event.reply('response-to-renderer', '这是来自主进程的消息'); // 发送消息给渲染进程[^1] }); ``` ```javascript // preload.js (预加载脚本) const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld('api', { sendMessageToMain: () => ipcRenderer.send('request-message-from-renderer'), // 请求主进程消息[^2] receiveMessageFromMain: (callback) => ipcRenderer.on('response-to-renderer', callback) // 接收主进程消息[^3] }); ``` ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Electron Example</title> </head> <body> <script> window.api.sendMessageToMain(); // 调用预加载脚本的方法请求主进程数据 window.api.receiveMessageFromMain((event, message) => { console.log(message); // 输出接收到的主进程消息 }); </script> </body> </html> ``` #### 解析 上述代码展示了如何利用 `ipcMain` 和 `ipcRenderer` 进行主进程与渲染进程间的通信： - **主进程**监听事件并响应渲染进程发出的请求，随后调用 `event.reply()` 方法返回消息。 - **预加载脚本**作为桥梁，在安全模式下允许渲染进程访问特定 API。 - **渲染进程**通过调用预加载脚本暴露的功能发起请求，并接收主进程发回的数据。 此方法遵循现代 Electron 的最佳实践，即启用上下文隔离 (`contextIsolation`) 并禁用 Node.js 集成 (`nodeIntegration`)，从而提升安全性[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值