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

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

news 2025/7/15 0:15:32

在 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

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/7/13 18:20:48

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/7/14 8:11:44

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/7/12 13:52:29

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

编程新知 2025/6/20 11:52:30

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/7/14 21:11:33

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/7/12 12:39:30

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/14 16:27:19

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2025/7/14 20:11:49

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/7/13 16:33:00