关于electron进程管理的一些认识

devtools/2024/11/7 2:52:56/

electron的一些认识

  • 一、electron是什么
  • 二、electron的应用进程管理
  • 三、关于electron应用进程的一些示例
    • 1、主进程(main.js)
    • 2、渲染进程(renderer.js)
    • 3、预加载脚本(preload.js)
    • 4、跨进程通信
      • 1. 主进程发送消息到渲染进程:
      • 2. 渲染进程发送消息到主进程:
      • 3. 渲染进程接收主进程的消息:

electron_2">一、electron是什么

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架,用来创建可在 Windows、mac 和 Linux 上运行的跨平台应用,说白了这个桌面应用就是包含Chromium和nodejs的浏览器套壳

市面上electron开发的软件有vs code、github desktop和markdown工具Typora等等

electron_7">二、electron的应用进程管理

在 Electron 中,应用程序通常由两个主要的进程组成:主进程(Main Process)和渲染进程(Renderer Process)。

  • 主进程是 Electron 应用的入口点,通常在 main.js 文件中定义。主进程的主要职责包括:

    1. 创建窗口:使用 BrowserWindow 模块创建和管理浏览器窗口。
    2. 管理应用生命周期:使用 app 模块处理应用的启动、关闭、打开文件等事件。
    3. 处理系统事件:监听系统级别的事件,如窗口关闭、应用激活等。
    4. 跨进程通信:使用 ipcMain 模块与渲染进程进行通信。
  • 渲染进程负责渲染用户界面,通常在 index.html 和 renderer.js 文件中定义。渲染进程的主要职责包括:

    1. 渲染用户界面:使用 HTML、CSS 和 JavaScript 构建用户界面。
    2. 处理用户交互:响应用户的点击、输入等事件。
    3. 跨进程通信:使用 ipcRenderer 模块与主进程进行通信。
    4. 使用 Node.js API:在渲染进程中直接使用 Node.js API,但需要注意安全性和性能问题。

electron_22">三、关于electron应用进程的一些示例

1、主进程(main.js)

javascript">const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,contextIsolation: false,preload: path.join(__dirname, 'preload.js') // 预加载脚本}});win.loadFile('index.html');
}app.on('ready', createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});// 处理来自渲染进程的消息
ipcMain.on('message-from-renderer', (event, arg) => {console.log('Message from renderer:', arg);event.reply('message-from-main', 'Hello from main process!');
});

2、渲染进程(renderer.js)

javascript">const { ipcRenderer } = require('electron');// 发送消息到主进程
document.getElementById('send-button').addEventListener('click', () => {ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');
});// 接收主进程的消息
ipcRenderer.on('message-from-main', (event, arg) => {console.log('Message from main:', arg);
});

3、预加载脚本(preload.js)

预加载脚本用于在渲染进程中暴露一些安全的 API,同时限制对 Node.js API 的直接访问。

javascript">const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electron', {sendMessage: (channel, data) => {ipcRenderer.send(channel, data);},receiveMessage: (channel, func) => {ipcRenderer.on(channel, (event, ...args) => func(...args));}
});

4、跨进程通信

Electron 提供了 ipcMain 和 ipcRenderer 模块来实现主进程和渲染进程之间的通信。

1. 主进程发送消息到渲染进程:

javascript">// 主进程
const { ipcMain } = require('electron');
ipcMain.on('message-from-renderer', (event, arg) => {event.reply('message-from-main', 'Hello from main process!');
});

2. 渲染进程发送消息到主进程:

javascript">// 渲染进程
const { ipcRenderer } = require('electron');
ipcRenderer.send('message-from-renderer', 'Hello from renderer process!');

3. 渲染进程接收主进程的消息:

javascript">// 渲染进程
ipcRenderer.on('message-from-main', (event, arg) => {console.log('Message from main:', arg);
});

http://www.ppmy.cn/devtools/131901.html

相关文章

微信小程序-自定义导航栏

一.自定义导航栏 1.JSON文件中配置"navigationStyle": “custom” "navigationStyle": "custom"2.给导航栏设置轮播图 <swiper class"custom-swiper" indicator-dots autoplay interval"2000"> <swiper-item>…

洗袜子洗内裤的小型洗衣机值得买吗?口碑最好的内衣洗衣机排行榜

内衣裤洗衣机风比较大现在&#xff0c;但是如果要好好按照攻略去选购&#xff0c;也不愁选不到好用的&#xff01;最近我表妹要乔迁&#xff0c;新家大部分的东西都有了&#xff0c;就是想在添置一些小家电&#xff0c;刚好其中有内衣裤洗衣机&#xff0c;问到我这里来有没有好…

DGL库之dgl.function.u_mul_e(代替dgl.function.src_mul_edge)

DGL库之dgl.function.u_mul_e 语法格式例子 语法格式 dgl.function.u_mul_e代替了dgl.function.src_mul_edge dgl.function.u_mul_e(lhs_field, rhs_field, out)一个用于计算消息传递的内置函数&#xff0c;它通过对源节点&#xff08;u&#xff09;和边&#xff08;e&#x…

软件测试学习笔记丨Flask操作数据库-对象与数据模型

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/23440 对象与数据模型 数据模型&#xff1a;是数据特征的抽象&#xff0c;抽象层次上描述了系统的静态特征、动态行为和约束条件&#xff0c;为数据库系统的信息表示与操作提供一个抽象的框架…

技术分享 —— JMeter接口与性能测试实战!

前言 在软件开发和运维过程中&#xff0c;接口性能测试是一项至关重要的工作。JMeter作为一款开源的Java应用&#xff0c;被广泛用于进行各种性能测试&#xff0c;包括接口性能测试。本文将详细介绍如何使用JMeter进行接口性能测试的过程和步骤。 JMeter是Apache组织开发的基…

WordPress伪静态设置

为什么要设置WordPress伪静态&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;中&#xff0c;静态URL通常被认为更易于搜索引擎爬虫抓取和索引&#xff0c;有助于提高网站的搜索引擎排名。 WordPress伪静态设置方法主要依赖于服务器环境&#xff0c;以下是针对不同服务器…

24年配置CUDA12.4,Pytorch2.5.1,CUDAnn9.5运行环境

没什么好介绍的&#xff0c;直接说了。 下载 首先打开命令行&#xff0c;输入代码查看显卡最高支持的cuda版本&#xff0c;下载的版本不要高于该版本 nvidia-smi PyTorch 插件这个是PyTorch下载地址&#xff0c;就按照我这么选CUDA版本就选最新的&#xff0c;看好绿框里的CU…

OpenDroneMap Webodm

OpenDroneMap & Webodm OpenDroneMap Webodm 开源无人机航拍系列图像及其它系列图像三维重建软件。很棒的开源无人机测绘软件OpenDroneMap,从航拍图像生成精确的地图、高程模型、3D 模型和点云。 应用领域 Mapping & Surveying 测绘和测量 从图像测量获得高精度的可…