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

Electron[5] 渲染进程和主进程

news 2025/7/8 3:46:56

1 进程

Electron里头的进程分为渲染进程和主进程。简单理解：

  1. main.js就是主进程
  2. 每个页面就是渲染进程
  3. 一个Electron应用仅有一个主进程，可以有多个渲染进程
    上面的这些概念很重要，不展开细讲。

2 进程职责

主进程是用来实现应用的基础功能，包括跟底层的系统交互等。渲染进程是用来实现具体每个页面的功能。
那么当渲染进程需要跟系统底层进行交互的时候，怎么处理呢？目前有两种方式：

  1. 在渲染进程里头直接引用支持跟底层进行交互的包，然后直接实现跟底层的交互（十分不推荐）
  2. 渲染进程将事件委托给主进程，让主进程来完成。（推荐）
  3. 事件委托是通过事件监听和触发来实现的。

3 渲染进程与Native API

虽然上面说了，不建议渲染进程直接调用Native API，但是还是要说下，渲染进程如何实现直接调用底层API。

之所以不建议渲染进程直接调用Native API是因为，渲染进程调用原生能力，其实是从主进程同步过来的，那么在应用的使用过程，就要不断的实现主进程和渲染进程之间的原生能力载体的状态同步，这个同步是十分耗费宿主机资源的。

3.1保存文件

下面的案例是讲解下如何通过渲染进程直接调用原生API。

3.1.1 渲染进程页面

先用h5画出包含有一个文本框和用来保存的按钮。
源码如下：

<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>electron从入门到精通</title>
</head>
<body> <button type="button" id="saveBtn">保存文件</button><textarea id="textArea" style="position:absolute;top:60px;bottom:0;left:0;right:0;"></textarea>
<script src="./test.js"></script>
</body>
</html>

然后test.js的源码如下：

const { dialog } = require('@electron/remote')
//引入fs模块
var fs = require('fs')
//获取文本框的dom 
var textAreaDom = document.querySelector('#textArea')
var saveBtn = document.getElementById('saveBtn')// 文件保存路径，第一保存后，就缓存起来
var currentPath = null
saveBtn.addEventListener('click',function(){if (currentPath) {writeFile(currentPath)} else {// 调用native api实现文件保存dialog.showSaveDialog({properties:['showOverwriteConfirmation']}).then(({canceled,filePath})=>{if (!canceled) {writeFile(filePath)currentPath = filePath}})}})
function writeFile(path,){fs.writeFileSync(path, textAreaDom.value)}

到这边要停下来下，缓一缓捋一捋。
首先，我们需要在渲染进程里头引用node的包，fs包，其次，还用到了remote的依赖包。因此还需要做如下操作：

  • 安装@electron/remote，版本：2.0.12
npm install @electron/remote@2.0.12
  • 调整渲染进程窗口的创建配置。创建窗口是在main.js里实现的，下面直接附上整个main.js的文件：
		// main.jsconst { app, BrowserWindow} = require('electron')const path = require('path')// *************************1.引入remote模块******************************const remote = require("@electron/remote/main");remote.initialize();function createWindow () {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences:{//  渲染进程 开启node模块，使得JS中可以使用node的modelnodeIntegration:true,// 开启 remote 模块enableBlinkFeatures:true,// 控制上下文隔离contextIsolation:false,//由于安全问题，remote模块默认关闭enableRemoteModule: true,//开启remote模块//关闭web权限检查，允许跨域webSecurity: false,}})mainWindow.loadFile('./src/index.html')// 默认打开调试工具mainWindow.webContents.openDevTools()// ********2.启用remote模块，渲染进程就可以使用主程序模块********************remote.enable(mainWindow.webContents);  }app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}})

至此，源码分享就结束了。

4 源码解释

4.1 test.js和Electron的原生能力

上面主要麻烦的就是test.js里头的dialog的使用。这个调用的是原生能力的弹窗，其实像原生能力的使用，不知道都觉得很麻烦，但是，如果知道了，就不难，下面附上原生能力的工具字典：
app | Electron

4.2 remote模块

不同版本的Electron使用的remote是不一样的，main.js里头关于remote的配置，以及渲染进程里头的remote的引用都是跟版本挂钩了，大家如果一意孤行还要用使用不推荐的方式来使用原生能力的话，那么配置就按照上面的来做即可了。

相关文章：

Electron[5] 渲染进程和主进程

1 进程 Electron里头的进程分为渲染进程和主进程。简单理解&#xff1a; main.js就是主进程每个页面就是渲染进程一个Electron应用仅有一个主进程&#xff0c;可以有多个渲染进程 上面的这些概念很重要&#xff0c;不展开细讲。 2 进程职责 主进程是用来实现应用的基础功能…...

编程日记 2023/12/11 4:56:04

基于Java SSM框架实现大学生校园兼职系统项目【项目源码+论文说明】

基于java的SSM框架实现大学生兼职系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;大学生校园兼职系统当然也不能排除在外。大学生校园兼职系统是以实际运用为开…...

编程日记 2023/12/11 4:55:03

Codeforces Round 913 (Div. 3) A~E

目录 A. Rook 问题分析: B. YetnotherrokenKeoard 问题分析: C. Removal of Unattractive Pairs 问题分析: D. Jumping Through Segments 问题分析: E. Good Triples 问题分析: A. Rook 问题分析: 给一个棋子将其同行同列的位置输出 #include<bits/s…...

编程日记 2023/12/11 4:50:59

反序列化 [网鼎杯 2020 朱雀组]phpweb 1

打开题目 我们发现这个页面一直在不断的刷新 我们bp抓包一下看看 我们发现index.php用post方式传了两个参数上去&#xff0c;func和p 我们需要猜测func和p两个参数之间的关系&#xff0c;可以用php函数MD5测一下看看 我们在响应处得到了一串密文&#xff0c;md5解密一下看看 发…...

编程日记 2023/12/11 4:47:57

Java 何时会触发一个类的初始化

Java 何时会触发一个类的初始化&#xff1f; 使用new关键字创建对象访问类的静态成员变量 或 对类的静态成员变量进行赋值调用类的静态方法反射调用类时&#xff0c;如 Class.forName()初始化子类时&#xff0c;会先初始化其父类&#xff08;如果父类还没有进行过初始化的话&a…...

编程日记 2023/12/11 4:46:56

我的记事本

url uniform resource locator. 统一资源定位符 请求状态码 1XX:信息响应 2XX:成功响应 3XX:重定向消息 4XX:客户端错误响应 5XX:服务器端错误响应 IP地址分类 本机回环IP地址&#xff1a;127.0.0.1 &#xff5e; 127.255.255.254 局域网IP(私网IP) 192.168.0.0 &am…...

编程日记 2023/12/11 4:45:55

GO设计模式——4、单例模式（创建型）

目录 单例模式&#xff08;Singleton Pattern&#xff09; 优缺点 使用场景 饿汉式和懒汉式单例模式 单例模式&#xff08;Singleton Pattern&#xff09; 单例模式&#xff08;Singleton Pattern&#xff09;是一个类只允许创建一个对象&#xff08;或者实例&#xff…...

编程日记 2023/12/11 4:44:54

我对迁移学习的一点理解——领域适应（系列3）

文章目录 1. 领域适应&#xff08;Domain Adaptation&#xff09;的基本概念2.领域适应&#xff08;Domain Adaptation&#xff09;的目标3.领域适应&#xff08;Domain Adaptation&#xff09;的实现方法4.领域适应&#xff08;Domain Adaptation&#xff09;的可以解决的问题…...

编程日记 2023/12/11 4:40:51

【openssl】RSA 生成公钥私钥 |通过私钥获取公钥

通过博客&#xff1a;Window系统如何编译openssl 编译出openssl.exe&#xff08;位于apps文件夹下&#xff09;。 现在需要使用它获得公钥私钥、通过私钥获取公钥 目录 说明&#xff01;&#xff01;&#xff01; 一.定位openssl.exe目录 二、进入命令cmd 三、生成私钥 …...

编程日记 2023/12/11 4:37:48

MongoDB的删除文档、查询文档语句

本文主要介绍MongoDB的删除文档、查询文档命令语句。 目录 MongoDB删除文档MongoDB查询文档 MongoDB删除文档 MongoDB是一种基于文档的NoSQL数据库&#xff0c;它使用BSON格式存储文档。删除文档是MongoDB数据库中的常见操作之一。 下面是MongoDB删除文档的详细介绍和示例&am…...

编程日记 2023/12/11 4:35:46

Rust编程语言入门教程（三）-trait

文章目录 Rust编程语言入门教程&#xff08;三&#xff09;-trait什么是 trait&#xff1f;trait使用举例 Rust编程语言入门教程&#xff08;三&#xff09;-trait 什么是 trait&#xff1f; trait 是 Rust 中的接口&#xff0c;它定义了类型使用这个接口的行为。你可以类比到…...

编程日记 2023/12/11 4:34:45

LeetCode-1566. 重复至少 K 次且长度为 M 的模式【数组 枚举】

LeetCode-1566. 重复至少 K 次且长度为 M 的模式【数组 枚举】 题目描述&#xff1a;解题思路一&#xff1a;题意就是找出长度为m且连续重复k次的子数组。解题思路就是暴力枚举加剪枝。解题思路二&#xff1a;思路差不多解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个…...

编程日记 2023/12/11 4:32:43

QT5.4.1无法打开文件

问题描述&#xff1a;起初是在QT代码中运行打开文件代码&#xff1a; QString gFilename QFileDialog::getOpenFileName(this,"open File",path,"*", nullptr,QFileDialog::DontUseNativeDialog);时&#xff0c;出现了堵塞情况&#xff0c;经过多次实验一…...

编程日记 2023/12/11 4:31:42

【1day】金和OA某接口存在未授权访问漏洞

注：该文章来自作者日常学习笔记，请勿利用文章内的相关技术从事非法测试，如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现...

编程日记 2023/12/11 4:28:40

使用Rust 构建C 组件

协议解析&#xff0c;这不就很快了&#xff0c;而且原生的标准库红黑树和avl 树支持&#xff0c;异步tokio 这些库&#xff0c;编写应用组件就很快了 rust 标准库不支持 unix 的消息队列&#xff0c;但是支持 shm 和 uds&#xff0c;后者从多方面考虑都比&#xff0c;消息队列更…...

编程日记 2023/12/11 4:27:39

AI：大模型技术

Prompt Prompt&#xff08;提示&#xff09;是一种在人工智能领域&#xff0c;特别是在自然语言处理和聊天机器人中常用的技术。它是一种输入&#xff0c;用于激发人工智能模型生成相应的输出。在聊天机器人中&#xff0c;用户输入的问题或请求就是提示&#xff0c;而聊天机器…...

编程日记 2023/12/11 4:25:37

揭开WPF里面XAML可以通过http引入命名空间的神秘面纱

前言 做WPF开发这么久，其实一直对头部引入命名空间有些疑问，为啥官方提供的库通过xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"引入，而我自己开发的就只能通过 xmlns:local="clr-namespace:Darren.Wpf.MainModule.Views"来引入…...

编程日记 2023/12/11 4:23:36

什么是高防IP，高防IP该如何选择。

高防IP&#xff0c;指的是高防御能力的IP地址。在互联网的世界里&#xff0c;网络安全问题成为一个重要的话题。作为一个用户&#xff0c;你是否曾遇到过被黑客攻击造成的网站瘫痪、信息泄露等问题&#xff1f;如果你是一个企业&#xff0c;你是否考虑过自己公司的网站和业务的…...

编程日记 2023/12/11 4:21:34

Linux 进程

文章目录 进程定义进程的描述查看进程方法进程状态进程优先级进程相关概念补充 进程定义 大多数的说法&#xff1a;进程是计算机中正在运行的程序的实例。它是操作系统对程序的一种抽象&#xff0c;用于管理和调度程序的执行。 个人理解: 从OS(操作系统)开始说起&#xff0c;…...

编程日记 2023/12/11 4:20:33

Docker部署开源分布式任务调度平台DolphinScheduler并实现远程访问办公

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…...

编程日记 2023/12/11 4:19:32

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/7/7 4:15:57

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/7/4 13:30:54

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/6/21 2:09:08

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/7/6 23:16:19

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/7/7 16:05:18

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/7/6 3:52:07

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/6/15 10:38:44

破解路内监管盲区：免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

编程新知 2025/7/6 22:50:56

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/7/6 21:51:19