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

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

news 2026/2/7 11:14:34

在 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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/31 6:18:08

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2026/1/29 17:54:05

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/6 17:58:07