前端技术文档

Appearance

Electron ​

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的开源框架。它通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并为操作系统本地功能提供丰富的 API 来实现这一目标。

核心概念 ​

  • 主进程 (Main Process): 主进程负责创建和管理应用的生命周期、显示原生界面、执行后台任务等。每个 Electron 应用有且只有一个主进程。
  • 渲染进程 (Renderer Process): 渲染进程负责显示网页内容。每个浏览器窗口（BrowserWindow 实例）都有自己的渲染进程。
  • 进程间通信 (IPC): 主进程和渲染进程之间通过 IPC 模块（ipcMain 和 ipcRenderer）进行通信。

快速入门 ​

安装 Electron：

bash
npm install --save-dev electron

创建一个简单的 Electron 应用：

main.js (主进程)

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html (渲染进程)

html
<!DOCTYPE html>
<html>
<head>
    <title>Hello Electron</title>
</head>
<body>
    <h1>Hello from Electron!</h1>
</body>
</html>