2 - Electron 核心概念

  Electron 核心概念

主进程

  • 通过Node.js、Electron提供的API与系统底层打交道
  • 启动项目时运行的 main.js 脚本就是我们说的主进程。
  • 在主进程运行的脚本可以以创建 Web 页面的形式展示 GUI。
  • 主进程只有一个

渲染进程

  • 每个 Electron 的页面都在运行着自己的进程,这样的进程称之为渲染进程(基于Chromium的多进程结构)。
  • 创建一个窗体都会创建一个渲染进程,每个web页面运行在它自己的渲染进程中,每个渲染进程是独立的。每个BrowserWindow实例都在自己的渲染进程中运行, 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止
运行项目找到package.json的入口文件(属性main的值)即为主进程,加载入口文件 实例化BrowserWindow,加载本地index.html即为渲染进程,可以有多个渲染进程

主进程 - 生命周期

//所有窗口都关闭
app.on("window-all-closed", () => {// 对于 MacOS 系统 -> 关闭窗口时,不会直接推出应用if (process.platform !== "darwin") {app.quit(); //让app彻底关闭}
});app.whenReady().then(() => {createWindow();app.on("activate", () => {// 在macOS上,当单击dock图标并且没有其他窗口打开时,// 通常在应用程序中重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});

主进程和渲染进程通信

主进程 接收与返回

//main.js 主进程文件、
const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 600,webPreferences: {// 设置预加载脚本路径  注意:预加载文件属于渲染进程哦preload: path.join(__dirname, "./preload.js"),},});win.loadFile("index.html");
};ipcMain.handle("send-event", (event, msg) => {console.log("msg", msg); //主进程 接收 渲染进程的信息return msg; //返回给渲染进程
});

 渲染进程 发送与打印

//preload.js 预加载文件
const { ipcRenderer, contextBridge } = require("electron");
const handleSend=async()=>{let fallback=ipcRenderer.invoke('send-msg','这是渲染进程 -> 主进程的内容') console.log(fallback);//主进程返回过来的内容
}
//通过exposeInMainWorld把方法绑在window上
contextBridge.exposeInMainWorld('myApi',{ handleSend,
})

.html调用

<button id="btn">Send</button>
<script>document.getElementById('btn').addEventListener('click', function(){window.myApi.handleSend()})
</script>

主进程 - 事件

  • before-quit 在应用程序 开始关闭 窗口之前触发。
  • browser-window-blur 在browserWindow失去焦点时发出
  • browser-window-focus 在browserWindow获得焦点时发出
//before-quit 在应用程序开始关闭窗口之前触发。
app.on("before-quit", (e) => {console.log("App is quiting");e.preventDefault();
});//browser-window-blur 在browserWindow失去焦点时发出
app.on("browser-window-blur", (e) => {console.log("App unfocused");
});//browser-window-focus 在browserWindow获得焦点时发出
app.on('browser-window-focus', (e) => {console.log('App focused')
})

主进程 - 方法

  • app.quit() 应用关闭
  •  app.getPath(name) 获取应用文件信息
app.on('browser-window-blur', (e) => {setTimeout(() => {app.quit()}, 3000)
})app.whenReady().then(() => {console.log(app.getPath('desktop'))console.log(app.getPath('music'))console.log(app.getPath('temp'))console.log(app.getPath('userData'))
})

渲染进程如何使用 Node 模块 

方法一  

20版本所有渲染进程都采用沙盒模式,不允许在preload中使用node模块了,注意查看自己的版本。

//main.js
const createWindow = () => {const win = new BrowserWindow({width: 1000,height: 600,webPreferences: {preload:path.resolve(__dirname, "./preload.js"), //配置预加载文件 },});
//preload.js
const {contextBridge}=require('electron')
//通过exposeInIsolatedWorld将process.platform注到window对象上
contextBridge.exposeInIsolatedWorld('myApi',{platform: process.platform,
})//index.html 渲染进程 就可以访问到
console.log(window.myApi.platform);

方法二

尽量不要用,不安全!!!!自己写dome可以玩玩看

当我们想在index.html(渲染进程)中想访问文件时

<script>const fs=require('fs')console.log(fs);
</script>

require是nodejs环境语法,可以在主进程中使用,但不能渲染进程中使用 

 打通隔离

const createWindow = () => {const win = new BrowserWindow({width: 1000, height: 600, webPreferences:{nodeIntegration: true, //集成nodecontextIsolation: false,//打通隔离,主进程和渲染进程都可以使用node}});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/222946.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

检查字符串是否以指定的字符串结尾str.endswith()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 检查字符串是否以指定的字符串结尾 str.endswith() [太阳]选择题 请问以下代码输出的结果是&#xff1f; s "I love China!" print("【执行】print(s.endswith(!))") p…

Redis设计与实现之双端链表

目录 一、Redis为什么选择双端链表作为底层数据结构&#xff1f; 二、双端链表 1、双端链表的应用 实现Redis的列表类型 Note: Redis列表使用两种数据结构作为底层实现&#xff1a; Redis自身功能的构建 2、双端链表的实现 ​编辑3、迭代器 三、双端链表在Redis中的应用…

22. 常用shell之 chown - 更改文件所有者 的用法和衍生用法

chown 是 Unix 和类 Unix 系统&#xff08;如 Linux 和 macOS&#xff09;中用于更改文件或目录的所有者和所属组的命令。这个命令对于系统管理和文件权限管理至关重要。下面详细介绍 chown 的基本用法和一些衍生用法。 基本用法 chown 命令的基本语法如下&#xff1a; chow…

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现(二)

5.5 防止低优先级锁饥饿 AntDB-M按照优先级将锁又分了两类&#xff0c;用于解决低优先级锁饥饿问题。 ●独占型(hog): X, SNRW, SNW; 具有较强的不兼容性&#xff0c;优先级高&#xff0c;容易霸占锁&#xff0c;造成其他低优先级锁一直处于等待状态。 ●暗弱型(piglet): SW; …

windows MinGW C语言编译器安装及环境变量配置教程

windows MinGW C语言编译器安装配置环境变量 MinGW安装 MinGW被称为Windows版的GCC&#xff0c;安装包下载地址&#xff1a; 提示&#xff1a;该安装包下载完之后&#xff0c;相当于安装好了MinGW&#xff0c;之后即可配置环境变量&#xff01;所以&#xff0c;可以先新建好…

docker-compose elk部署elk 单节点版本

elk集群 docker-compose单节点运行版 机器分配 192.168.77.136 docker-compose 192.168.77.137 log-test cron 安装docker、docker-compose centos yum -y install docker-ce docker-composedebian/ubuntu apt -y install docker-ce docker-compose编写docker-compose.yaml…

算法训练day32|贪心算法part02

122.买卖股票的最佳时机 II 局部最优&#xff1a;记录每天的利润&#xff0c;只需要累加利润为正的天数 // 贪心思路 class Solution {public int maxProfit(int[] prices) {int result 0;for (int i 1; i < prices.length; i) {result Math.max(prices[i] - prices[i …

将数组中的数逆序存放

本题要求编写程序&#xff0c;将给定的n个整数存入数组中&#xff0c;将数组中的这n个数逆序存放&#xff0c;再按顺序输出数组中的元素。 输入格式: 输入在第一行中给出一个正整数n&#xff08;1≤n≤10&#xff09;。第二行输入n个整数&#xff0c;用空格分开。 输出格式:…

[Android] Binder all-in-all

前言&#xff1a; Binder 是一种 IPC 机制&#xff0c;使用共享内存实现进程间通讯&#xff0c;既可以传递消息&#xff0c;也可以传递创建在共享内存中的对象&#xff0c;而Binder本身就是用共享内存实现的&#xff0c;因此遵循Binder写法的类是可以实例化后在进程间传递的。…

加速数据采集:用OkHttp和Kotlin构建Amazon图片爬虫

引言 曾想过轻松获取亚马逊上的商品图片用于项目或研究吗&#xff1f;是否曾面对网络速度慢或被网站反爬虫机制拦截而无法完成数据采集任务&#xff1f;如果是&#xff0c;那么本文将为您介绍如何用OkHttp和Kotlin构建一个高效的Amazon图片爬虫解决方案。 背景介绍 亚马逊&a…

C# 避免定时器重入的4种方法

System.Timers.Timer执行方法的时候&#xff0c;会开一个线程去执行&#xff0c;如果使用锁&#xff08;方法3&#xff09;避免重入&#xff0c;可能会有多个线程等在那里执行。 按照单片机的写法要推荐方法1 但是C#提供了方便的定时器Stop方法&#xff0c;所以可用方法2&…

【MySQL】MySQL库的增删查改

文章目录 1.库的操作1.1创建数据库1.2创建数据库案例 2.字符集和校验规则2.1查看系统默认字符集以及校验规则2.2查看数据库支持的字符集2.3查看数据库支持的字符集校验规则2.4校验规则对数据库的影响 3.操纵数据库3.1查看数据库3.2显示创建语句3.3修改数据库3.4数据库删除3.5备…

KUKA机器人如何在程序中编辑等待时间?

KUKA机器人如何在程序中编辑等待时间&#xff1f; 如下图所示&#xff0c;如何实现在P1点和P2点之间等待设定的时间&#xff1f; 如下图所示&#xff0c;可以直接输入wait sec 2&#xff08;等待2秒&#xff09;&#xff0c; 如下图所示&#xff0c;再次选中该程序后&#…

python学习1

大家好&#xff0c;这里是七七&#xff0c;今天开始又新开一个专栏&#xff0c;Python学习。这次思考了些许&#xff0c;准备用例子来学习&#xff0c;而不是只通过一大堆道理和书本来学习了。啊对&#xff0c;这次是从0开始学习&#xff0c;因此大佬不用看本文了&#xff0c;小…

linux sed批量修改替换文件中的内容/sed特殊字符

sed系列文章 linux常用命令(9)&#xff1a;sed命令(编辑/替换/删除文本)linux sed命令删除一行/多行_sed删除第一行/linux删除文件某一行linux sed批量修改替换文件中的内容/sed特殊字符 文章目录 sed系列文章一、sed替换文本语法1.1、基础语法1.2、高阶语法 二、实战/实例2.1…

k8s常用命令及示例(三):apply 、edit、delete

k8s常用命令及示例(三)&#xff1a;apply 、edit、delete 1. kubectl apply -f 命令&#xff1a;从yaml文件中创建资源对象。 -f 参数为强制执行。kubectl apply和kubectl create的区别如下&#xff1a;kubectl create 和 kubectl apply 是 Kubernetes 中两个常用的命令&…

Springboot管理系统数据权限过滤(二)——SQL拦截器

上一节Springboot管理系统数据权限过滤——ruoyi实现方案对数据权限实现方案有了认识&#xff0c;本文将进一步优化权限过滤方案&#xff0c;实现对业务代码零入侵。 回顾上一章中权限方案&#xff1a; 主要是通过注解拦截&#xff0c;拼接好权限脚本后&#xff0c;放到对象变…

c题目17:写一个swap函数,可以交换2个整数变量的值。(分别用普通方式和指针方式实现,对比结果)

每日小语 我坐着&#xff0c;观望世界上所有的忧患&#xff0c;所有的压迫和耻辱看着&#xff0c;听着&#xff0c;一声不响。——惠特曼 自己思考 最近这段时间新的感悟似乎也没有&#xff0c;但我发现我和别人的思想越来越不同&#xff0c;只能跟极少数人产生共鸣&#xff0…

DevOps 和人工智能 – 天作之合

如今&#xff0c;人工智能和机器学习无处不在&#xff0c;所以它们开始在 DevOps 领域崭露头角也毫不令人意外。人工智能和机器学习正在通过自动化任务改变 DevOps&#xff0c;并使各企业的软件开发生命周期更高效、更深刻和更安全。我们在 DevOps 趋势中简要讨论过这一问题&am…

使用shell脚本给日志文件瘦身

一、前言 后台系统运行久了&#xff0c;日志文件的体积日渐增多&#xff0c;除了使用常用的日志框架如logback对日志进行按天打印、按大小分割等方式外&#xff0c;还可以使用shell命令来对大日志进行瘦身。 本篇使用sed指令来对文件进行操作&#xff0c;具体操作如下&#xf…