当前位置： 首页 > news >正文

Electron 主进程与渲染进程、预加载preload.js

news 文章来源：https://blog.csdn.net/fishmemory7sec/article/details/142620862 2025/5/10 18:18:55

在 Electron 中，主要控制两类进程： 主进程 、 渲染进程 。

Electron 应⽤的结构如下图：
在这里插入图片描述
如果需要更深入的了解electron进程，可以访问官网 流程模型 文档。

主进程

  • 每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点（主进程具有唯一性）。任何 Electron 应用程序的入口都是 main 文件，负责控制应用的生命周期、创建和管理窗口、与操作系统进行交互等。
  • 主进程在 Node.js 环境中运行，它具有 require 模块和使⽤所有 Node.js API 的能力。
  • 主进程的核心：使用 BrowserWindow 来创建和管理应用程序窗口。

在 main.js 中，打印:

console.log(__dirname)
console.log('node版本：', process.versions.node)
console.log('chrome版本：', process.versions.chrome)
console.log('electron版本：', process.versions.electron)

在终端中输入结果如下：
在这里插入图片描述

注意：在主进程中执行的console.log()语句，都在vs code 的终端中输出，不会在electron 应用中打印。

在 main.js 中，打印 window：

console.log(window)

报错：window is not defined…
在这里插入图片描述

渲染进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名，渲染器负责 渲染 网页内容。

  • 每个 BrowserWindow 实例都对应⼀个单独的渲染进程。
  • 一个 Electron 窗口可以包含一个或多个渲染进程，每个渲染进程负责渲染网页内容并执行网页中的 JavaScript 代码。（关系类似于 浏览器、浏览器中的标签页）
  • 运行在渲染器进程中的代码，必须遵守网页标准。这意味着 渲染进程无权直接访问 require 或 使用 任何 Node.js API。
  • 渲染进程主要负责呈现用户界面、响应用户交互、执行网页中的业务逻辑等。

在 pages/index.html 中：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/><title>Hello Electron!</title></head><body><h1>Hello Electron!</h1>We are using Node.js <span id="node-version"></span>, Chromium<span id="chrome-version"></span>, and Electron<span id="electron-version"></span>.</body><script src="./render.js"></script>
</html>

在 pages/render.js 中：

console.log(window)
console.log(process)

在应用窗口中查看打印结果：
在这里插入图片描述

window能成功打印，console.log(process)报错：process is not defined…

在 pages/render.js 中，不能访问 Node.js API。那么，该如何实现在index.html中展示chrome、node、electron的版本呢？

处于渲染器进程的用户界面，该怎样才与 Node.js 和 Electron 的原生桌面功能进行交互？


通过预加载脚本从渲染器访问Node.js


预加载（preload）脚本在 Electron 应用中起着重要的桥梁作用，它允许渲染进程安全地与主进程进行交互，同时增强了应用的安全性和性能。

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

预加载（preload）脚本是运行在渲染器进程中的，但它是在网页内容加载之前执行的。 这意味着它具有比普通渲染器更高的权限，可以访问 Node.js API ，同时也可以与网页内容进行更安全的交互。

创建一个名为 preload.js 的新脚本如下：

// contextBridge：在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
const {contextBridge} = require('electron')// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('aaaAPI', {version: process.version,versions: process.versions,num: 666
})

在主线程中引⼊ preload.js：

const { app, BrowserWindow } = require('electron')
// 导入 Node.js 的 path 模块
const path = require('node:path')// 修改已有的 createWindow() 方法
function createWindow() {const win = new BrowserWindow({width: 500, // 窗口宽度height: 300, // 窗口高度autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {// 此处只能使用绝对路径preload: path.join(__dirname, 'preload.js')}});// 在窗口中加载一个远程页面win.loadFile('./pages/index.html');
}

执行npm start，启动应用，打开应用的控制台。
可以看到pages/render.js打印的window：
在这里插入图片描述

完善pages/render.js，在渲染进程中使用versions，实现在 pages/index.html 页面展示版本信息：

let nodeDom = document.getElementById('node-version')
let chromeDom = document.getElementById('chrome-version')
let electronDom = document.getElementById('electron-version')const { node, chrome, electron } = aaaAPI.versionsnodeDom.innerHTML = node
chromeDom.innerHTML = chrome
electronDom.innerHTML = electron

查看应用窗口渲染结果：
在这里插入图片描述


现在，项目的目录结构如下图所示：
在这里插入图片描述
注意： 预加载（preload）脚本只能访问部分 Node.js API，但是主进程可以访问全部API。此时，需要使用进程通信。

相关文章：

Electron 主进程与渲染进程、预加载preload.js

在 Electron 中&#xff0c;主要控制两类进程&#xff1a; 主进程 、 渲染进程 。 Electron 应⽤的结构如下图&#xff1a; 如果需要更深入的了解electron进程&#xff0c;可以访问官网 流程模型 文档。 主进程 每个 Electron 应用都有一个单一的主进程&#xff0c;作为应用…...

编程日记 2024/10/4 19:41:04

鸿蒙harmonyos next纯flutter开发环境搭建

公司app是用纯flutter开发的&#xff0c;目前支持android和iOS&#xff0c;后续估计也会支持鸿蒙harmonyos。目前谷歌flutter并没有支持咱们国产手机操作系统鸿蒙harmonyos&#xff0c;于是乎国内有个叫OpenHarmony-SIG的组织&#xff0c;去做了鸿蒙harmonyos适配flutter开发的…...

编程日记 2024/10/4 19:39:02

【学习资源】人在环路的机器学习

说明&#xff1a;本文图片和内容来源 Human-in-the-Loop Machine Learning Human-in-the-Loop Machine Learning Active learning and annotation for human-centered AI by Robert (Munro) Monarch, June 2021 介绍Human-in-the-Loop的目标&#xff0c;学习过程&#xff0c…...

编程日记 2024/10/4 19:37:00

计算机毕业设计 基于Python的热门微博数据可视化分析系统的设计与实现 Python+Django+Vue 可视化大屏 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

编程日记 2024/10/4 19:29:45

031集——文本文件按空格分行——C#学习笔记

如下图&#xff0c;读取每行文本&#xff0c;每行文本再按空格分开读取一个字符串&#xff0c;输出到另一个文本&#xff1a; CAD环境下&#xff0c;代码如下&#xff1a; using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD.Runtime; using System; using Sys…...

编程日记 2024/10/4 19:28:44

LabVIEW 成绩统计系统

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/10/4 19:24:40

SpringBoot技术栈：构建高效古典舞交流平台

第二章 相关技术介绍 2.1Java技术 Java是一种非常常用的编程语言&#xff0c;在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中&#xff0c;Java的身影无处不在&#xff0c;并且拥有旺盛的生命力。Java的跨平台能力十分强大&#xff0c;只需一次编译&#xf…...

编程日记 2024/10/4 19:23:38

Docker 容器日志记录与管理：日志输出、轮转与配置实践

Docker 容器化应用的日志管理是运维中的重要环节。容器默认会将标准输出（stdout）和标准错误（stderr）记录到日志文件中，但这些日志文件如果不加管理，可能会无限制地增长，最终导致磁盘空间耗尽。因此，了解如何规范化容器日志管理、配置日志轮转策略以及合理存储位置至关重…...

编程日记 2024/10/4 19:22:37

Django学习笔记一：MVT的示例

Django的MVT&#xff08;Model-View-Template&#xff09;架构是一种将应用程序的不同部分分离的方法&#xff0c;旨在提高代码的可维护性和可扩展性。MVT将应用分解为三个主要部分&#xff1a;Model&#xff08;模型&#xff09;、View&#xff08;视图&#xff09;和Template…...

编程日记 2024/10/4 19:21:36

集合框架01：集合的概念、Collection体系、Collection接口

1.集合的概念 集合是对象的容器&#xff0c;定义了多个对象进行操作的常用方法。可实现数组的功能。 集合和数组的区别&#xff1a; 1.数组长度固定&#xff0c;集合长度不固定&#xff1b; 2.数组可以存储基本类型和引用类型&#xff0c;集合只能存储引用类型&#xff1b; …...

编程日记 2024/10/4 19:20:35

shadcn-vue 快速开始

介绍 基于 Radix Vue 和 Tailwind CSS 构建的可重复使用的组件 一个由社区主导的非官方 Vue 版本的 shadcn/ui。虽然我们与 shadcn 没有正式的合作或联系&#xff0c;但在开始这个项目之前得到了作者本人的同意。创建这个项目的原因是 Vue 生态系统中缺乏类似的项目&#xff…...

编程日记 2024/10/4 19:19:34

智慧管控平台技术解决方案

1. 智慧管控平台概述 智慧管控平台采用先进的AI技术&#xff0c;围绕一个中心和四大应用构建&#xff0c;旨在打造一个智能、共享、高效的智慧运营管理环境&#xff0c;实现绿色节能和业务创新。 2. 平台架构设计 系统整体架构设计包括统一门户管理、IOT平台、大数据、视频云…...

编程日记 2024/10/4 19:18:33

酒店业CRM和酒店数据管理大数据—未来之窗行业应用跨平台架构

一酒店架构图 二、客户数据 三、客户数据源...

编程日记 2024/10/4 19:16:31

滚雪球学Oracle[8.1讲]：高级主题与未来趋势

全文目录&#xff1a; 前言0. 上期回顾1. Oracle数据库中的大数据与分析1.1 Oracle与大数据平台的集成1.2 Oracle Advanced Analytics的使用1.3 Hadoop与Oracle的混合架构设计 2. 机器学习与Oracle数据库2.1 使用Oracle Machine Learning进行预测分析2.2 数据库内置机器学习模型…...

编程日记 2024/10/4 19:14:30

【Matlab绘图】从Excel导入表格并进行三维绘图

前言 今天手头上拿到一份论文的xlsx数据&#xff0c;要求使用MATLAB绘制进行三维图标坐标绘制。那么我们来看看如何使用如下数据进行绘图。 如上数据所示&#xff0c;数据是一个30行25列的数据&#xff0c;数据的内容是论文某项模型模拟的结果&#xff0c;我们希望把横坐标x取…...

编程日记 2024/10/4 19:12:28

IDEA里面的长截图插件

1.我的悲惨经历 兄弟们啊&#xff0c;我太惨了&#xff0c;我刚刚在准备这个继承和多态的学习&#xff0c;写博客的时候想要截图代码&#xff0c;因为这个代码比较大&#xff0c;一张图截取不下来&#xff0c;所以需要长截图&#xff0c;之前使用的qq截图突然间拉胯&#xff0…...

编程日记 2024/10/4 19:11:28

（15）衰落信道模型作用于信号是相乘还是卷积

文章目录 在使用衰落信道进行通信系统仿真时&#xff0c;有的资料中是用相乘的方法&#xff0c;有的资料中用的是卷积的方法。那么&#xff0c;衰落信道模型作用于传输信号时&#xff0c;是该用相乘还是卷积呢&#xff1f;下面针对该问题给出回答。 在仿真瑞利衰落信道对传输信…...

编程日记 2024/10/4 19:08:24

(C语言贪吃蛇)14.用绝对值方式解决不合理的走位

目录 前言 解决方式 运行效果 总结 前言 我们上节实现了贪吃蛇四方向走位&#xff0c;但是出现了一些不合理的走位&#xff0c;比如说身体节点和头节点重合等等&#xff0c;本节我们便来解决这个问题。 我们希望贪吃蛇撞到自身时游戏会重新开始&#xff0c;并且贪吃蛇的运动方…...

编程日记 2024/10/4 19:07:23

[深度学习]基于YOLO高质量项目源码+模型+GUI界面汇总

以下项目全部是本人亲自编写代码&#xff0c;项目汇总如下&#xff1a; 序号项目名称下载地址1基于yolov8的辣椒缺陷检测系统python源码onnx模型评估指标曲线精美GUI界面.zip点我下载2基于yolov8的海上红外目标系统python源码onnx模型评估指标曲线精美GUI界面.zip点我下载3基于…...

编程日记 2024/10/4 19:06:22

仕考网：公务员国考有三不限岗位吗?

国家公务员考试中的“三不限”岗位&#xff0c;即不限制专业背景、政治面貌、基层工作经验的职位。在国考中&#xff0c;是有的但是数量比较少。 这些岗位主要集中在省级及以下单位&#xff0c;以民航空警和铁路公安为主。其中&#xff0c;有一半的职位是面向四项目人员&#…...

编程日记 2024/10/4 19:05:21

RabbitMq生产者可靠性

基本概念&#xff1a; RabbitMQ生产者可靠性主要涉及确保消息能够可靠地发送到RabbitMQ服务器&#xff0c;并且在出现故障时能够进行适当的处理。 消息确认机制&#xff08;Publisher Confirms&#xff09;&#xff1a; 启用 Publisher Confirms&#xff1a;生产者在发送消息之…...

编程日记 2024/10/4 19:03:19

Linux Debian12使用Podman安装bwapp靶场环境

一、bwapp简介 bWAPP&#xff08;buggy Web Application&#xff09;是一个开源的、故意设计有漏洞的Web应用程序&#xff0c;旨在帮助安全爱好者、开发人员和学生发现和防止Web漏洞。它包含了超过100种不同的漏洞&#xff0c;涵盖了所有主要的已知Web漏洞。 二、bwapp下载 …...

编程日记 2024/10/4 19:02:17

小白快速上手 Docker 02 | Docker 容器生命周期

容器生命周期 下图显示了容器生命周期的简化状态。 CreatedRunningPausedStoppedDeleted 现在让我们逐一讨论容器生命周期的每个状态&#xff1a; 创建状态&#xff08;Created&#xff09; 这是容器生命周期的第一个状态&#xff0c;在这个阶段&#xff0c;容器被创建但…...

编程日记 2024/10/4 19:01:13

深刻理解Redis集群（下）：Redis 哨兵（Sentinel）模式

背景 现在对3个节点的sentinel进行配置。sentinel的配置文件在redis的安装目录中已经存在&#xff0c;只需要复制到指定的位置即可。 sentinel是独立进程&#xff0c;有对应的脚本来执行。 基于之前的redis 一主二从的架构&#xff0c;我们继续启动3个sentinel进程。 哨兵模式的…...

编程日记 2024/10/4 18:59:11

STM32重启源深度解析

文章目录 STM32重启源深度解析一、STM32重启概述二、硬件层面的重启源1、电源异常电压不稳定&#xff1a;电源供电不足&#xff1a; 2、复位电路故障复位引脚异常&#xff1a;复位电路设计不合理&#xff1a; 3、外部干扰电磁干扰&#xff1a;静电干扰&#xff1a; 三、软件层面…...

编程日记 2024/10/4 18:57:07

windows配置C++编译环境和VScode C++配置（保姆级教程）

1.安装MinGW-w64 MinGW-w64是一个开源的编译器套件&#xff0c;适用于Windows平台&#xff0c;支持32位和64位应用程序的开发。它包含了GCC编译器、GDB调试器以及其他必要的工具&#xff0c;是C开发者在Windows环境下进行开发的重要工具。 我找到了一个下载比较快的链接&#…...

编程日记 2024/10/4 18:56:04

【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件

1. 页面导航 导航方式 声明式导航&#xff1a;使用<navigator>组件实现页面跳转。 <!-- 导航到tabBar页面 --> <navigator url"/pages/message/message" open-type"switchTab">导航到消息页面</navigator><!-- 导航到非tabBar页…...

编程日记 2024/10/4 18:51:59

【51单片机】点亮LED之经典流水灯

开发环境 开发板&#xff1a;普中51-单核-A2单片机&#xff1a;STC89C52RC&#xff08;双列直插40引脚 DIP40&#xff09;Keil uVision5 v9.61 最新版破解方法自行百度&#xff0c;相关文档和视频资料很多&#xff0c;我自己将这一操作记录下来当做博客发布&#xff0c;CSDN以…...

编程日记 2024/10/4 18:45:54

深度学习数据增强的常用方法

以下是在深度学习中经常使用的图像增强的方法 目录 前言 1、加噪声 2、调整亮度 3、cutout 4、旋转 5、对比度增强 6、仿射变化扩充图像 7、HSV数据增强 8、错切变化扩充图像 9、平移扩充图像&#xff0c;根图像移动的像素距离可自行调整&#xff0c;具体方法如下注释所示 10、…...

编程日记 2024/10/4 18:44:53

影院管理新篇章：小徐的Spring Boot应用

第三章 系统分析 整个系统的功能模块主要是对各个项目元素组合、分解和更换做出对应的单元&#xff0c;最后在根据各个系统模块来做出一个简单的原则&#xff0c;系统的整体设计是根据用户的需求来进行设计的。为了更好的服务于用户要从小徐影城管理系统的设计与实现方面上做出…...

编程日记 2024/10/4 18:42:50