Electron一些概念理解

前言

版本33.2.0

记录官方文档的一些初步理解

官方文档

自写demo: electron-demo 按钮点击发送http请求

主进程

一个Electron应用项目都会有一个主进程,启动入口

只有这个主进程,运行在Node.js环境中,可以require其他模块,用API

渲染器进程

每一个窗口都会有一个渲染器进程

这边我的理解是,就像一个html页面引入的一个普通js脚本

但是用上Electron的ipc通道API,就理解为是文档所说的一个渲染器进程

这里不能像主进程的js一样直接使用npm的模块

主进程的操作也不能直接渲染页面

主进程和渲染器进程交互

通信方式

通信方式 IPC通道

通过开发人员自己定义的"通道"来传递信息

在Electron框架中,涉及两个模块ipcMainipcRenderer

本身主进程和渲染器进程是相互隔离的

通过写一个preload.js (用来定义通道接口)(这个由主进程加载,因此可以调用API)

然后渲染器进程可以通过这个通道接口,与主进程交互,主进程中调用API操作

模式1: 渲染器进程到主进程(单向)

复制代码
// preload.js
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

渲染器进程调用这个接口, 会将title发给主进程

复制代码
window.electronAPI.setTitle(title)

上面用ipcRenderer.send 发送,主进程那边用ipcMain.on接收消息

文档提到了以前Electron 7的时候,ipcRenderer.send也可以用异步双向通信

模式2: 渲染器进程到主进程(双向)

复制代码
// preload.js
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

渲染器进程使用,await等待主进程的返回

复制代码
const filePath = await window.electronAPI.openFile()

通过ipcRenderer.invokeipcMain.handle 搭配使用

其他

ipcRenderer.send也支持异步双向通信,但后续可能会被丢弃,不建议这样使用

相关推荐
xjt_09012 分钟前
浅析Web存储系统
前端
foxhuli22940 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript