《10 分钟了解 electron 整体架构》

2025-04-27 23:11:18   0  举报





AI智能生成

这篇文章用简洁明了的方式介绍Electron框架的核心原理，适合初学者快速把握这一技术的应用。通过细致的解析，读者能够在短时间内掌握Electron的三大部分：主进程（Main Process）、渲染进程（Render Process）和进程间通信（IPC）。文章强调了主进程负责窗口管理及与操作系统的交互，而渲染进程则负责网页内容的呈现。此外，还深入探讨了IPC用于进程间的数据传递。整体来看，这是一篇高质量的入门指南，充满了详尽的解释和实际操作中的关键点。文件以教程格式编写，非常适合在技术更新迅速的环境中快速学习和应用最新的开发工具。

桌面应用

嵌入式

跨端开发

前端开发

多端开发

作者其他创作

大纲/内容

架构

进程

main process
主进程

electron

创建菜单

上传文件

...

渲染进程

tabs

Renderer process

helper

nodejs

Dom api

部分 electron api

GPU

api

Main Process
在 main.js 里使用

浏览器

app

控制应用程序的事件生命周期

const { app } = require('electron')
app.on('window-all-closed', () => {
app.quit()
})

Browser

BrowserWindow

创建并控制浏览器窗口

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadFile('index.html')

BrowserView

让 BrowserWindow 嵌入更多的 web 内容。
它就像一个子窗口，除了它的位置是相对于父窗口。
这意味着可以替代webview标签.

const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600 })

  const view = new BrowserView()
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
  view.webContents.loadURL('https://electronjs.org')
})

session

管理浏览器会话、cookie、缓存、代理设置等

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('http://github.com')

const ses = win.webContents.session
console.log(ses.getUserAgent())

webFrameMain

控制页面和内联框架(iframes)
webFramework 模块可以用来查找现有的 WebContents 实例。
通常在导航事件中使用

可以通过使用 WebContents的 mainFrame 属性访问现有页面的框架

通信

Node.js EventEmitter

MessageChannelMain

主进程中用于通道消息传递的通道接口
它的特有功能是创建一对已连接的
MessagePortMain 对象

const { port1, port2 } = new MessageChannelMain()
w.webContents.postMessage('port', null, [port2])
port1.postMessage({ some: 'message' })

MessagePortMain

主进程中用于通道消息传递的端口接口
发送宿主

ipcMain

从主进程到渲染进程的异步通信
是一个 EventEmitter 的实例。当在主进程中使用时，
它处理从渲染器进程（网页）发送出来的异步和同步信息。
从渲染器进程发送的消息将被发送到该模块。

parentPort

与父进程通信接口

webContents

渲染以及控制 web 页面
webContents是一个EventEmitter.
负责渲染和控制网页,
是 BrowserWindow 对象的一个属性

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('http://github.com')

const contents = win.webContents
console.log(contents)

网络

net

使用Chromium的原生网络库发出HTTP / HTTPS请求
Chromium原生网络库来替代Node.js的实现

const { app } = require('electron')
app.whenReady().then(() => {
  const { net } = require('electron')
  const request = net.request('https://github.com')
  request.on('response', (response) => {
    console.log(`STATUS: ${response.statusCode}`)
    console.log(`HEADERS: ${JSON.stringify(response.headers)}`)
    response.on('data', (chunk) => {
      console.log(`BODY: ${chunk}`)
    })
    response.on('end', () => {
      console.log('No more data in response.')
    })
  })
  request.end()
})

netLog

记录会话的网络事件

const { netLog } = require('electron')

app.whenReady().then(async () => {
  await netLog.startLogging('/path/to/net-log')
  // After some network events
  const path = await netLog.stopLogging()
  console.log('Net-logs written to', path)
})

分发

autoUpdater

自动更新您的 Electron 应用程序
autoUpdater是一个EventEmitter.

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOpts = {
    type: 'info',
    buttons: ['Restart', 'Later'],
    title: 'Application Update',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail:
      'A new version has been downloaded. Restart the application to apply the updates.',
  }

  dialog.showMessageBox(dialogOpts).then((returnValue) => {
    if (returnValue.response === 0) autoUpdater.quitAndInstall()
  })
})

inAppPurchase

Mac App Store中的应用内购买

调试与分析

contentTracing

从Chromium收集追踪数据以找到性能瓶颈和慢操作

调用操作系统

desktopCapturer

可以用来从桌面捕获音频和视频的媒体源的信息

dialog

显示用于打开和保存文件、警报等的本机系统对话框

const { dialog } = require('electron')
console.log(dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] }))

globalShortcut

在应用程序没有键盘焦点时，监听键盘事件
模块可以在操作系统中注册/注销全局快捷键,
以便可以为操作定制各种快捷键。

const ret = globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
})

创建原生应用菜单和上下文菜单
系统级菜单

电池

powerMonitor

监视电源状态的改变

powerSaveBlocker

阻止系统进入低功耗 (休眠) 模式。

ShareMenu

ShareMenu 类用于创建macOS的Share Menu专用菜单，这可以将当前消息分享给其他应用、社交媒体账号等

容器

nativeTheme

读取并响应Chromium本地色彩主题中的变化

protocol

注册自定义协议并拦截基于现有协议的请求。

pushNotifications

注册并接收远程推送通知服务的通知

screen

检索有关屏幕大小、显示器、光标位置等的信息

systemPreferences

获取system preferences.

safeStorage

此模块保护磁盘上存储的数据不被其他应用程序或拥有完全磁盘访问权的用户访问

TouchBar

触控板

Tray

添加图标和上下文菜单到系统通知区

const { app, Menu, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/my/icon')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
})

utilityProcess

代表 Chromium 派生子进程与 Node.js 的结合

Renderer Process

contextBridge

在隔离的上下文中创建一个安全的、双向的、同步的桥梁

ipcRenderer

从渲染器进程到主进程的异步通信

ipcRenderer 是一个 EventEmitter 的实例。
你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。
也可以接收主进程回复的消息

webFrame

自定义渲染当前网页

webFrame 导出的 Electron module是表示当前frame WebFrame 类的实例。
Sub-frames可以通过特定属性和方法

Main & Renderer 共有能力

clipboard

在系统剪贴板上执行复制和粘贴操作

const { clipboard } = require('electron')

clipboard.writeText('Example string', 'selection')
console.log(clipboard.readText('selection'))

crashReporter

将崩溃日志提交给远程服务器

const { crashReporter } = require('electron')

crashReporter.start({ submitURL: 'https://your-domain.com/url-to-submit' })

nativeImage

使用 PNG 或 JPG 文件创建托盘、
dock和应用程序图标

const { BrowserWindow, Tray } = require('electron')

const appIcon = new Tray('/Users/somebody/images/icon.png')
const win = new BrowserWindow({ icon: '/Users/somebody/images/window.png' })
console.log(appIcon, win)

const { clipboard, Tray } = require('electron')
const image = clipboard.readImage()
const appIcon = new Tray(image)
console.log(appIcon)

process

处理对象的扩展

shell

使用默认应用程序管理文件和 url

流程

browserWindow

通信

进程通信

IPC
inter process communitcation

工程化

npm 命令行多任务