Electron 入门：构建桌面应用 – wiki词典

作者： /

Electron 入门：构建桌面应用

在当今数字化的世界中，桌面应用程序依然占据着重要地位。无论是复杂的生产力工具还是简单的实用程序，它们都为用户提供了原生的体验和强大的功能。然而，传统的桌面应用开发往往意味着需要学习特定于平台的语言和框架（如 C++、C#、Java、Objective-C/Swift），这对于熟悉 Web 技术栈的开发者来说是一个不小的挑战。

这就是 Electron 闪亮登场的地方。

什么是 Electron？

Electron 是一个由 GitHub 开发的开源框架，它允许你使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它通过将 Chromium 渲染引擎和 Node.js 运行时集成到一个单一的运行时环境中来实现这一点。这意味着你的应用程序的用户界面由 Chromium 渲染，而后台逻辑则由 Node.js 处理，让你能够访问操作系统级别的 API。

知名 Electron 应用示例：

  • Visual Studio Code
  • Slack
  • Discord
  • Figma 桌面版

为什么选择 Electron？

优点：

  1. Web 技术栈： 如果你熟悉 HTML、CSS 和 JavaScript，那么你已经掌握了 Electron 开发所需的大部分技能。这大大降低了学习曲线，并允许 Web 开发者轻松进入桌面应用领域。
  2. 跨平台： 使用 Electron 构建的应用可以在 Windows、macOS 和 Linux 上运行，而无需为每个平台编写不同的代码。一次编写，到处运行。
  3. 访问原生功能： Node.js 提供了对文件系统、进程管理、网络等底层系统 API 的访问能力，让你能够构建功能丰富的桌面应用。
  4. 丰富的生态系统： 借助于 npm 生态系统，你可以利用数百万个现有模块来加速开发。
  5. 活跃的社区： Electron 拥有一个庞大而活跃的社区，提供丰富的文档、教程和支持。

缺点：

  1. 性能和资源占用： 由于内置了完整的 Chromium 浏览器和 Node.js 运行时，Electron 应用通常比原生的桌面应用占用更多的内存和 CPU 资源。
  2. 打包体积大： 最终的应用程序包会相对较大，因为它们包含了整个 Chromium 和 Node.js 运行时。

环境准备

在开始之前，请确保你的开发环境中安装了以下软件：

  • Node.js 和 npm (或 yarn)： Electron 应用程序是 Node.js 项目。你可以从 Node.js 官方网站 下载并安装。

搭建你的第一个 Electron 应用

我们将构建一个简单的 “Hello Electron” 应用，它会在窗口中显示一条消息。

1. 初始化项目

首先，创建一个新的项目文件夹，并在其中初始化一个 Node.js 项目：

bash
mkdir hello-electron
cd hello-electron
npm init -y

-y 标志会自动填充 package.json 中的所有默认值。

2. 安装 Electron

接下来，将 Electron 安装为开发依赖：

bash
npm install electron --save-dev

3. 创建主进程文件 (main.js)

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

  • 主进程 (Main Process): 负责管理应用程序的生命周期、创建和管理应用程序窗口、处理系统事件、与操作系统进行交互等。它运行在一个 Node.js 环境中。
  • 渲染进程 (Renderer Process): 负责渲染应用程序的用户界面。每个 Electron 窗口都有一个独立的渲染进程，它运行在 Chromium 浏览器环境中，与 Web 页面中的 JavaScript 运行方式类似。

在项目根目录创建 main.js 文件，这是你的应用程序的主入口点：

“`javascript
// main.js

const { app, BrowserWindow } = require(‘electron’)
const path = require(‘path’)

function createWindow () {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 允许在渲染进程中使用 Node.js API
nodeIntegration: true,
contextIsolation: false, // 通常为了安全起见设置为 true，这里为了简化入门
preload: path.join(__dirname, ‘preload.js’) // 预加载脚本，在渲染进程加载前运行
}
})

// 加载 index.html 文件
mainWindow.loadFile(‘index.html’)

// 打开开发者工具 (可选)
mainWindow.webContents.openDevTools()
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
createWindow()

// 在 macOS 上，当所有窗口都关闭时，通常应用程序和它们的菜单栏仍保持活动状态，
// 除非用户使用 Cmd + Q 显式退出。
app.on(‘activate’, function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})

// 当所有窗口都关闭时退出应用。
app.on(‘window-all-closed’, function () {
// 在 macOS 上，只有当用户按下 Cmd + Q 并没有其他打开的窗口时，才真正退出。
if (process.platform !== ‘darwin’) app.quit()
})
“`

webPreferences 解释：

  • nodeIntegration: true: 允许在渲染进程（即你的 index.html 中运行的 JavaScript）中使用 require 和其他 Node.js API。在生产环境中通常建议禁用此选项并使用 contextIsolation 和 preload 脚本来安全地桥接主进程功能。
  • contextIsolation: false: 禁用上下文隔离。出于安全考虑，推荐设置为 true，并通过 preload 脚本安全地暴露 API。但在入门阶段，设置为 false 可以简化一些概念。
  • preload: 指定一个脚本，该脚本将在渲染进程中的其他脚本运行之前加载。这是一个向渲染进程安全地暴露主进程 API 的好方法。

4. 创建预加载脚本 (preload.js)

preload.js 脚本在渲染进程加载任何内容之前运行，并且可以访问 Node.js 和 Electron API。这是一个安全的桥梁，用于在不暴露整个 Node.js 环境给渲染进程的情况下，将主进程功能暴露给渲染器。

在项目根目录创建 preload.js 文件：

“`javascript
// preload.js

const { contextBridge, ipcRenderer } = require(‘electron’)

// 通过 contextBridge 将功能暴露给渲染器
contextBridge.exposeInMainWorld(‘electronAPI’, {
// 暴露一个函数，渲染器可以调用它来向主进程发送消息
sendMessage: (message) => ipcRenderer.send(‘to-main’, message),
// 暴露一个函数，渲染器可以监听主进程发送的消息
onReply: (callback) => ipcRenderer.on(‘from-main’, (event, message) => callback(message))
})

// 也可以直接在渲染器中访问一些全局变量，但更推荐使用 contextBridge
// window.myGlobal = “Hello from preload!”;
“`

5. 创建渲染进程文件 (index.html)

这是你的应用程序的用户界面。在项目根目录创建 index.html 文件：

“`html





Hello Electron!


Hello Electron!

这是一个使用 Electron 构建的桌面应用。



“`

6. 配置 package.json

修改 package.json 文件，添加一个 start 脚本，用于运行你的 Electron 应用程序：

json
{
"name": "hello-electron",
"version": "1.0.0",
"description": "My first Electron application",
"main": "main.js", // <-- 确保这里指向你的主进程文件
"scripts": {
"start": "electron .", // <-- 添加这一行
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^29.1.0" // 或者你安装的 Electron 版本
}
}

7. 运行你的应用

现在，你可以在终端中运行你的 Electron 应用程序了：

bash
npm start

一个 Electron 窗口应该会弹出，显示 “Hello Electron!”。点击按钮，你会看到主进程和渲染进程之间的通信效果。

核心概念深入

主进程与渲染进程的通信 (IPC)

由于主进程和渲染进程运行在不同的环境中，它们不能直接访问彼此的变量或函数。Electron 提供了进程间通信 (IPC) 模块来实现两者之间的通信：

  • ipcMain (主进程): 监听来自渲染进程的消息，并向渲染进程发送消息。
  • ipcRenderer (渲染进程): 向主进程发送消息，并监听来自主进程的消息。

示例 (在 main.js 中添加处理渲染器消息的逻辑):

“`javascript
// main.js
const { app, BrowserWindow, ipcMain } = require(‘electron’) // <– 添加 ipcMain

// … (createWindow 函数和 app.whenReady() 等保持不变)

// 监听来自渲染进程的 ‘to-main’ 消息
ipcMain.on(‘to-main’, (event, message) => {
console.log(‘收到渲染进程的消息:’, message)
// 回复渲染进程
event.sender.send(‘from-main’, ‘主进程已收到并回复!’)
})
“`

现在，当你在渲染器中点击按钮时，消息会发送到主进程，主进程会在控制台打印消息，并回复渲染进程，最终在页面上显示回复。

打包与分发你的应用

一旦你的应用开发完成，你需要将其打包成可执行文件，以便分发给用户。通常，这会用到 electron-builder 或 electron-packager 等工具。

以 electron-builder 为例：

  1. 安装 electron-builder：
    bash
    npm install electron-builder --save-dev

  2. 配置 package.json：
    在 package.json 中添加 build 配置和 pack 或 dist 脚本：

    json
    {
    "name": "hello-electron",
    "version": "1.0.0",
    "description": "My first Electron application",
    "main": "main.js",
    "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir", // 不打包安装程序，只生成可执行目录
    "dist": "electron-builder", // 打包生成安装程序 (exe, dmg, AppImage 等)
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
    "electron": "^29.1.0",
    "electron-builder": "^24.9.1" // 或者你安装的 electron-builder 版本
    },
    "build": {
    "appId": "com.yourcompany.helloelectron",
    "productName": "HelloElectron",
    "directories": {
    "output": "build" // 输出目录
    },
    "win": {
    "target": "nsis" // Windows 目标，例如 nsis 或 portable
    },
    "mac": {
    "target": "dmg" // macOS 目标
    },
    "linux": {
    "target": "AppImage" // Linux 目标
    }
    }
    }
    3. 运行打包命令：
    bash
    npm run dist
    这会在 build 目录下生成特定于平台的可执行文件或安装程序。

总结与展望

通过本入门指南，你已经了解了 Electron 的基本概念、如何搭建一个简单的应用程序以及主进程和渲染进程之间的通信机制。Electron 为 Web 开发者打开了桌面应用开发的大门，让你能够利用熟悉的技能栈构建功能强大、用户体验丰富的应用程序。

下一步学习方向：

  • Electron 官方文档： 最权威的学习资源，包含详细的 API 参考和教程。
  • 安全最佳实践： 了解如何安全地处理 nodeIntegration、contextIsolation 和 preload 脚本。
  • Electron API： 探索更多 Electron 提供的原生 API，如菜单、对话框、通知、托盘图标等。
  • 状态管理： 对于更复杂的应用，考虑集成 Redux、Vuex 或 Context API 等状态管理库。
  • UI 框架： 结合 React、Vue 或 Angular 等前端框架来构建更复杂的界面。

祝你在 Electron 的世界中开发愉快！

滚动至顶部