WHAT - Electron 系列(一)

目录

  • [Electron 是什么?](#Electron 是什么?)
  • [Electron 的特点](#Electron 的特点)
  • [Electron 的工作原理](#Electron 的工作原理)
  • [Electron 适合哪些场景?](#Electron 适合哪些场景?)

Electron 是什么?

Electron 是一个用于构建 跨平台桌面应用 (Windows、macOS 和 Linux)的开源框架,基于 ChromiumNode.js

它允许开发者使用 HTML、CSS 和 JavaScript 来创建桌面应用,同时具备 访问本地系统资源的能力(如文件系统、操作系统 API 等)。

Electron 的特点

  1. 跨平台支持 🌍

    • Electron 应用可以在 Windows、macOS 和 Linux 上运行,且代码基本一致,无需做大量修改。
  2. Web 技术开发 🌐

    • 你可以使用 HTML、CSS 和 JavaScript ,结合 React、Vue、Svelte 等框架,开发桌面应用。
  3. Node.js 支持 🔧

    • Electron 允许你直接在前端代码中使用 Node.js API (如 fspath),实现文件读写、进程管理等功能。
  4. Chromium 内核 🔥

    • Electron 内置 Chromium 浏览器,可以渲染现代 Web 页面,确保应用运行效果一致。
  5. 丰富的原生 API 🖥

    • Electron 提供了很多 桌面应用相关的 API ,如:
      • 窗口管理(创建/关闭窗口)
      • 托盘和菜单(Tray、Menu)
      • 文件操作fs 模块)
      • 剪贴板访问(Clipboard)
      • 通知系统(Notification)

Electron 的工作原理

Electron 应用由两个主要进程组成:

  1. 主进程(Main Process)

    • 负责创建和管理应用窗口(BrowserWindow)、处理系统级事件(如文件访问、通知、托盘等)。
    • 运行在 Node.js 环境,可以访问系统 API。
  2. 渲染进程(Renderer Process)

    • 负责渲染 UI,类似于 Web 浏览器中的页面。
    • 运行在 Chromium 中,默认不能访问系统 API(但可以通过 ipcRendereripcMain 进行通信)。

进程间通信(IPC)

主进程和渲染进程可以通过 IPC(进程间通信) 进行交互,比如:

  • 渲染进程请求主进程打开文件,主进程执行后返回结果。
  • 渲染进程通知主进程创建新窗口等。
typescript 复制代码
//main.ts 主进程
//创建 Electron 窗口并监听 open-file-dialog 事件

import { app, BrowserWindow, dialog, ipcMain } from 'electron';
import path from 'path';

let mainWindow: BrowserWindow | null = null;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
    },
  });

  mainWindow.loadFile('index.html');
});

// 监听渲染进程发送的 `open-file-dialog` 请求
ipcMain.handle('open-file-dialog', async () => {
  const { filePaths } = await dialog.showOpenDialog({
    title: '选择文件',
    properties: ['openFile'], // 只允许选择单个文件
  });

  return filePaths.length > 0 ? filePaths[0] : null; // 返回文件路径
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

//preload.ts 预加载脚本
//将 ipcRenderer 暴露给渲染进程,以便安全调用 open-file-dialog。
import { contextBridge, ipcRenderer } from 'electron';
contextBridge.exposeInMainWorld('electronAPI', {
  openFileDialog: () => ipcRenderer.invoke('open-file-dialog'),
});

//renderer.ts 渲染进程
document.getElementById('openFileButton')?.addEventListener('click', async () => {
  const filePath = await (window as any).electronAPI.openFileDialog();
  document.getElementById('filePath')!.innerText = filePath || '未选择文件';
});

Electron 适合哪些场景?

✅ 适合:

  • 跨平台桌面应用(如 VS Code、Slack、Discord)
  • 带 UI 的本地工具(如 GitHub Desktop、Postman)
  • Web 转桌面应用(将 Web 应用封装成桌面端,如 Figma)

❌ 不适合:

  • 极端轻量级应用(Electron 体积较大,打包后几十 MB 起步)
  • 对性能要求极高的应用(如 3D 游戏、视频编辑)
相关推荐
安全系统学习7 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖23 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖34 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python