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

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

news 2025/9/10 5:44:35

在 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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/9/9 2:26:38

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/9/7 22:44:01

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/9 14:48:35

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/8/15 19:10:13

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/8/25 23:31:15

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/9/3 19:32:54

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/8/27 18:01:27

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/9/2 17:47:40