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也支持异步双向通信,但后续可能会被丢弃,不建议这样使用

相关推荐
好好研究3 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
伍哥的传说6 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点7 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian7 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao7 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0017 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴8 小时前
Smoothstep
前端·webgl
若梦plus8 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员8 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉8 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro