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

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

news 2025/11/6 17:11:20

在 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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/5 23:05:21

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/11/4 15:00:22

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/10/29 11:04:36

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/11/1 20:38:11

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/11/5 16:35:41

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/11/3 16:39:09

提升移动端网页调试效率：WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

编程新知 2025/6/10 21:08:23