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

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

news 文章来源：https://blog.csdn.net/wltsysterm/article/details/134910818 2025/4/20 4:02:44

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

SQL语言重温

数据库语言重温 笔记背景SQL教程一些最重要的 SQL 命令SQL WHERE 子句SQL AND & OR 运算符SQL ORDER BY 关键字 笔记背景 由于工作需要&#xff0c;现重温简单SQL语言&#xff0c;笔记记录如下。 SQL教程 SQL&#xff08;Structured Query Language:结构化查询语言&…...

编程日记 2023/12/11 4:17:30

Java学习手册——第五篇数据类型

数据类型&#xff1a;是数据化的基石&#xff0c;如果没有数据类型怎么表示呢&#xff1f;比如年龄可以用整数&#xff1a;18岁。如果有更好的表示方式大家可以留言哟~ 在举个例子就是姓名&#xff0c;我们需要用字符串的形式来表示。这就是数据类型的魅力&#xff0c;而又有同…...

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

机器学习算法性能评估常用指标总结

考虑一个二分问题&#xff0c;即将实例分成正类&#xff08;positive&#xff09;或负类&#xff08;negative&#xff09;。对一个二分问题来说&#xff0c;会出现四种情况。如果一个实例是正类并且也被 预测成正类&#xff0c;即为真正类&#xff08;True positive&#xff0…...

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

java面试题-ArrayList 和 LinkedList 的区别是什么

远离八股文&#xff0c;面试大白话&#xff0c;通俗且易懂 看完后试着用自己的话复述出来。有问题请指出&#xff0c;有需要帮助理解的或者遇到的真实面试题不知道怎么总结的也请评论中写出来&#xff0c;大家一起解决。 java面试题汇总-目录-持续更新中​​​​​​​ ArrayLi…...

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

k8s中部署基于nfs的StorageClass

部署nfs服务 1.1 创建基础镜像(选做) 如果以docker的形式部署nfs server, 参考此步骤, 若否, 该步骤可忽略。 mkdir /data/nfs -p chmod 755 /data/nfs# NFS默认端口: 111、2049、20048 docker run -d \ --privileged \ --name nfs_server \ -p 111:111/tcp \ -p 111:111/ud…...

编程日记 2023/12/11 4:09:22

c语言一维数组总结详解

目录 介绍&#xff1a; 一维整型数组&#xff1a; 声明&#xff1a; 初始化&#xff1a; 打印输出&#xff1a; 输出结果&#xff1a; 浮点型数组&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 补充&#xff1a; 一维字符数组&#xff1a; 字符数组声明及初始…...

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

Redis 持久化 —— 超详细操作演示！

四、Redis 持久化 四、Redis 持久化4.1 持久化基本原理4.2 RDB持久化4.3 AOF持久化4.4 RDB与AOF对比4.5 持久化技术转型 五、Redis 主从集群六、Redis 分布式系统七、Redis 缓存八、Lua脚本详解九、分布式锁 数据库系列文章&#xff1a; 关系型数据库: MySQL —— 基础语法大全…...

编程日记 2023/12/11 3:50:05

使用Java实现桶排序算法

文章目录 桶排序算法 今天来看看桶排序算法&#xff1a; 桶排序算法 &#xff08;1&#xff09;基本思想&#xff1a;把数组 arr 划分为 n 个大小相同子区间&#xff08;桶&#xff09;&#xff0c;每个子区间各自排序&#xff0c;最后合并 。计数排序是桶排序的一种特殊情况…...

编程日记 2023/12/11 3:49:04

5.题目:编号1624 小蓝吃糖果

题目: ### 这道题主要考察poriority_queue优先队列 #include<bits/stdc.h> using lllong long; using namespace std; int main(){ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int n;cin>>n;priority_queue<int> pq;ll sum0,x;for(int i1;i<n;i){c…...

编程日记 2023/12/11 3:40:55

基于SpringBoot+thymeleaf协同过滤算法山河旅游推荐系统（Java毕业设计）

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…...

编程日记 2023/12/11 3:39:54