likes
comments
collection
share

Electron 桌面应用开发从基础到进阶

作者站长头像
站长
· 阅读数 38

Electron 桌面应用开发

Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，它使开发人员能够使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它已经被众多知名公司使用，例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。

安装 Electron

在开始之前，需要先安装 Electron。可以使用 npm 进行安装：

npm install electron --save-dev

安装完成后，在项目的 package.json 文件中添加以下脚本：

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

然后，在命令行中运行 npm start 命令即可启动 Electron 应用程序。

创建 Electron 应用程序

创建一个 Electron 应用程序非常简单。在项目根目录下创建一个名为 main.js 的文件，并添加以下代码：

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()   app.on('activate', () => {     if (BrowserWindow.getAllWindows().length === 0) {       createWindow()     }   }) }) app.on('window-all-closed', () => {   if (process.platform !== 'darwin') {     app.quit()   } })

这个代码创建了一个名为 createWindow 的函数，它创建了一个窗口并将一个名为 index.html 的 HTML 文件加载到窗口中。在 app.whenReady() 方法中，调用 createWindow 函数以创建窗口。当用户关闭所有窗口时，应用程序退出。

在项目根目录下创建一个名为 index.html 的文件，并添加以下代码：

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>Hello World!</title>   </head>   <body>     <h1>Hello World!</h1>   </body> </html>

这个代码创建了一个简单的 HTML 文件，它包含一个标题为“Hello World!”的页面。

打包 Electron 应用程序

在开发完成后，需要将应用程序打包成可执行文件。可以使用 electron-builder 进行打包。在命令行中运行以下命令进行安装：

css
npm install electron-builder --save-dev

安装完成后，可以在项目的 package.json 文件中添加以下脚本：

"scripts": {   "start": "electron .",   "build": "electron-builder" }

然后，在命令行中运行 npm run build 命令即可打包 Electron 应用程序。

当你完成了 Electron 的入门学习之后，你可能想要更进一步，学习如何进行 Electron 的进阶开发，调试，部署和热更新。本文将帮助你更深入地了解 Electron 的进阶知识。

开发

使用主进程和渲染进程

Electron 应用程序有两种类型的进程：主进程和渲染进程。主进程负责管理应用程序的生命周期和所有窗口，而渲染进程负责显示窗口内容。通常，主进程和渲染进程是通过 ipcMain 和 ipcRenderer 模块进行通信。

使用主进程和渲染进程，你可以更好地管理应用程序和窗口，并且可以在不同的进程中处理不同的任务。例如，你可以使用主进程来管理窗口，而使用渲染进程来处理窗口中的交互和渲染内容。

使用模块

Electron 提供了许多模块，可以帮助你更轻松地完成任务。以下是一些常用的模块：

  • app：管理应用程序的生命周期
  • BrowserWindow：创建和管理窗口
  • ipcMain 和 ipcRenderer：在主进程和渲染进程之间进行通信
  • dialog：打开对话框（如打开文件对话框、保存文件对话框等）
  • Menu 和 MenuItem：创建菜单和菜单项
  • nativeImage：处理图像
  • shell：打开文件、文件夹和网址

使用开发工具

在开发 Electron 应用程序时，使用开发工具可以帮助你更好地调试和管理应用程序。以下是一些常用的开发工具：

  • Visual Studio Code：一个流行的代码编辑器，有许多插件可以帮助你更轻松地开发 Electron 应用程序。
  • Electron DevTools：Electron 自带的开发工具，可以帮助你调试应用程序，包括网络调试、DOM 和 CSS 调试、JavaScript 调试等。

调试

使用开发工具

在开发过程中，使用开发工具可以帮助你更好地调试应用程序。可以使用 Chrome 开发者工具来调试渲染进程，使用 Electron DevTools 来调试主进程。

可以在启动应用程序时使用以下命令来打开 Electron DevTools：

electron --inspect-brk=9229 .

该命令将在 9229 端口上启动一个调试器，并在 index.html 文件中设置一个断点。

使用 VS Code

如果你使用 VS Code 编辑器，可以使用以下步骤来调试 Electron 应用程序：

  1. 打开 VS Code，并选择“Debug”视图。
  2. 点击“创建
  3. 在打开的 launch.json 文件中添加以下配置：
json
{   "name": "Electron: Main",   "type": "node",   "request": "launch",   "cwd": "${workspaceFolder}",   "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",   "windows": {     "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"   },   "args": ["."] }, {   "name": "Electron: Renderer",   "type": "chrome",   "request": "attach",   "port": 9222,   "webRoot": "${workspaceFolder}" }

以上配置将创建两个调试器配置，分别是 Electron: Main 和 Electron: Renderer。

  1. 点击“开始调试”按钮，并选择 Electron: Main 或 Electron: Renderer 进行调试。
  2. 调试渲染进程

要调试渲染进程，需要先打开应用程序的开发者工具。你可以使用快捷键 Ctrl+Shift+I（Windows 和 Linux）或 Cmd+Shift+I（macOS）打开开发者工具。然后，你可以使用开发者工具的“调试”选项卡调试渲染进程。

  1. 处理跨平台问题

跨平台问题是在开发 Electron 应用程序时需要考虑的一个重要问题。由于不同平台有不同的 UI 和 API，因此需要使用不同的代码来处理跨平台问题。以下是一些常见的跨平台问题和解决方法：

  • 文件路径：在不同的操作系统上，文件路径的格式可能不同。为了解决这个问题，可以使用 Node.js 提供的 path 模块来处理文件路径。
  • 窗口大小和位置：在不同的操作系统上，窗口的大小和位置可能有所不同。为了解决这个问题，可以使用 Electron 提供的 screen 模块来获取屏幕大小和分辨率，并使用相对位置来设置窗口的大小和位置。
  • 快捷键：在不同的操作系统上，快捷键的组合键可能不同。为了解决这个问题，可以使用 Electron 提供的 globalShortcut 模块来注册快捷键，该模块可以自动适应不同的操作系统。

部署

打包应用程序

在将应用程序部署到生产环境之前，需要将其打包为可执行文件。以下是一些常用的工具，可以帮助你将 Electron 应用程序打包为可执行文件：

  • electron-builder：一个基于 Electron 的打包器，支持将应用程序打包为各种格式，如 Windows、macOS 和 Linux。
  • electron-packager：另一个流行的打包器，也支持多种格式。

以下着重介绍 Electron Builder 的使用步骤和注意事项：

  1. 安装 Electron Builder

首先，你需要使用 npm 安装 Electron Builder：

npm install electron-builder --save-dev
  1. 配置 package.json 文件

在 package.json 文件中，你需要添加一些字段来配置应用程序的打包和发布。

  • build 字段：用于配置应用程序的构建选项。
  • directories 字段：用于配置应用程序的源代码和构建输出目录。
  • repository 字段：用于配置应用程序的源代码仓库地址。

以下是一个 package.json 文件的示例：

{   "name": "my-electron-app",   "version": "1.0.0",   "description": "My Electron App",   "main": "main.js",   "scripts": {     "start": "electron .",     "build": "electron-builder"   },   "repository": {     "type": "git",     "url": "https://github.com/username/my-electron-app.git"   },   "build": {     "appId": "com.example.my-electron-app",     "productName": "My Electron App",     "directories": {       "output": "dist"     }   } }
  1. 配置构建选项

在 build 字段中，你需要添加一些构建选项来指定应用程序的行为。以下是一些常用的构建选项：

  • appId：应用程序的 ID。
  • productName：应用程序的名称。
  • files：要打包的文件和文件夹。
  • directories：源代码和构建输出目录。
  • asar：是否将应用程序打包成 ASAR 文件。
  • mac、win、linux：用于配置每个平台的构建选项。
  • dmg、nsis、deb：用于配置每个平台的安装包选项。

以下是一个常见的 build 字段的示例：

"build": {   "appId": "com.example.my-electron-app",   "productName": "My Electron App",   "directories": {     "output": "dist"   },   "files": [     "main.js",     "package.json",     "index.html",     "assets/**/*"   ],   "asar": true,   "mac": {     "target": "dmg",     "icon": "assets/icon.icns"   },   "win": {     "target": "nsis",     "icon": "assets/icon.ico"   },   "linux": {     "target": "deb",     "icon": "assets/icon.png"   } }
  1. 打包应用程序

在 package.json 文件中，你可以使用以下命令来打包应用程序：


npm run build

执行此命令后，Electron Builder 将使用你在 build 字段中配置的选项来构建应用程序，并将构建输出文件保存到 directories.output 中指定的目录。

  1. 处理跨平台问题

在开发 Electron 应用时，开发者需要注意不同平台的差异。例如，不同平台可能存在不同的文件系统、网络协议和 UI 设计等问题。为了解决这些问题，可以使用一些跨平台的库和工具。

其中一个常用的工具是 electron-packager，它可以将应用程序打包成各个平台的本地安装包。另外，开发者还可以使用一些跨平台的 UI 框架，例如 React Native、Flutter 等，来构建跨平台应用程序。此外，在使用 Electron 开发跨平台应用时，还需要特别注意一些与平台相关的细节问题，例如文件路径分隔符、文件系统的大小写敏感等等。

总之，处理跨平台问题是 Electron 应用开发中不可避免的问题，开发者需要特别注意不同平台的差异，并根据需要选择合适的工具和库来解决这些问题。

发布应用程序

将应用程序打包为可执行文件之后，你可以将其发布到各个平台的应用商店或者自己的网站上。以下是一些常用的工具，可以帮助你发布 Electron 应用程序：

  • electron-updater：用于自动化发布应用程序的工具。
  • electron-release-server：一个基于 Electron 的应用程序，可用于自己的应用程序的自动更新。

热更新

热更新是将更新部署到生产环境的最佳方式之一，它允许你在不影响用户的情况下更新应用程序。以下是一些常用的工具，可以帮助你实现热更新：

  • electron-updater：用于自动化发布应用程序的工具，支持热更新。
  • electron-hot-loader：用于在开发过程中实现热更新的工具。
  • electron-winstaller：用于在 Windows 上创建安装程序，并支持增量更新。

总结

本文介绍了一些 Electron 的进阶知识，包括使用主进程和渲染进程、使用模块、使用开发工具、调试、部署和热更新。通过掌握这些知识，你可以更好地管理和开发 Electron 应用程序，提高开发效率，为用户提供更好的体验。

转载自:https://juejin.cn/post/7202231477252538423
评论
请登录