Electron 快速入门教程

黑客杰克 1
Viewed 0

快速入门

本指南将引导您使用 Electron 创建一个极简的 Hello World 应用，类似于 electron/electron-quick-start 项目。通过本教程，您的应用将打开一个浏览器窗口，展示当前运行的 Chromium、Node.js 和 Electron 版本信息。

基本要求

在开始开发之前，您需要安装 Node.js。建议使用最新的长期支持（LTS）版本。请使用为您的平台预构建的 Node.js 安装器，以避免与开发工具的不兼容问题。

要验证 Node.js 是否正确安装，在终端中输入以下命令：

node -v
npm -v

这两个命令应输出 Node.js 和 npm 的版本信息。请注意，Electron 将 Node.js 嵌入其二进制文件中，因此应用运行时使用的 Node.js 版本与系统中安装的版本无关。

创建你的应用程序

使用脚手架创建

Electron 应用程序的结构与典型的 Node.js 项目相同。首先，创建一个文件夹并初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init

在初始化过程中，设置以下值：

  • entry point 应为 main.js。
  • author 和 description 可任意填写，但对于后续应用打包是必填项。

初始化后，package.json 文件应类似如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

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

npm install --save-dev electron

如果安装过程中遇到问题，请参考 Electron 的高级安装指南。

然后，在 package.json 的 scripts 字段中添加 start 命令：

{
  "scripts": {
    "start": "electron ."
  }
}

此命令允许您在开发模式下启动应用。

运行主进程

Electron 应用的入口是 main 文件，它控制主进程。主进程在完整的 Node.js 环境中运行，负责管理应用生命周期、显示原生界面和处理渲染器进程。

首先，在项目根目录下创建 main.js 文件。此时运行 npm start，应用不会抛出错误，但尚未添加任何功能。

创建页面

应用窗口可以加载本地 HTML 文件或远程 URL。本教程使用本地 HTML 文件。在项目根目录创建 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

注意，版本号将稍后通过 JavaScript 动态插入。

在窗口中打开页面

要加载页面，需使用 Electron 的 app 和 BrowserWindow 模块。在 main.js 中导入它们：

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

然后，定义 createWindow 函数来创建窗口并加载 index.html：

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
  win.loadFile('index.html')
}

接着，在 app 模块的 ready 事件后调用 createWindow：

app.whenReady().then(() => {
  createWindow()
})

现在，应用应成功打开窗口显示页面。

管理窗口的生命周期

为了提供更原生的体验，需要根据操作系统管理窗口行为。

  • 关闭所有窗口时退出应用（Windows & Linux）：监听 app 的 window-all-closed 事件，在非 macOS 系统上调用 app.quit()。 
    app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
  • 如果没有窗口打开则打开一个窗口（macOS）：监听 app 的 activate 事件，在无窗口时创建新窗口。 
    app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

通过预加载脚本从渲染器访问 Node.js

主进程无法直接访问渲染器的 DOM，因此使用预加载脚本在两者之间通信。

创建 preload.js 文件：

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

然后，在 BrowserWindow 构造器中附加预加载脚本：

const path = require('path')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}

这里使用 path.join 和 __dirname 确保路径正确。

额外：将功能添加到网页内容

要在渲染器中添加更多功能，可以在 index.html 中引入脚本，例如：

<script src="./renderer.js"></script>

然后，在 renderer.js 中使用标准 Web API 开发前端功能。

回顾

完成上述步骤后，您将拥有一个功能齐全的 Electron 应用。完整代码示例：

  • main.js：
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
  • preload.js：
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
  • index.html：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
    <script src="./renderer.js"></script>
  </body>
</html>

总结步骤：

  1. 初始化 Node.js 项目并添加 Electron 依赖。
  2. 创建 main.js 作为主进程入口，使用 app 和 BrowserWindow 模块创建窗口。
  3. 创建 index.html 作为页面内容。
  4. 通过预加载脚本 preload.js 在渲染器中访问 Node.js 功能。

打包并分发您的应用程序

推荐使用 Electron Forge 进行打包。

  1. 安装 Electron Forge 并初始化项目：
npm install --save-dev @electron-forge/cli
npx electron-forge import
  1. 创建可分发的应用：
npm run make

Electron Forge 将在 out 文件夹中生成打包文件，例如 macOS 上的 .zip 文件和应用程序包。

这样，您就完成了 Electron 应用的快速入门。

electron
0 Answers
Related
Electron 新网站上线：国际化、应用页面与Node.js迁移
Electron JS跨平台桌面开发优势与性能挑战解析
Electron JS桌面应用开发技巧与避坑指南
Electron桌面应用开发全面指南
Electron跨平台桌面开发的优势与挑战分析
Electron 与 Vue3 桌面应用开发指南