Electron 是一个开源的框架，可用于构建跨平台的桌面应用程序，它由 Node.js 和 Chromium 组成。Electron 可以让我们使用常见的 Web 技术，如 HTML、CSS 和 JavaScript，来开发原生的桌面应用。本文将介绍如何使用 Electron 构建跨平台桌面应用。
安装 Electron
首先，我们需要安装 Node.js ，因为 Electron 是基于 Node.js 的。进入 Node.js 官方网站下载页面（https://nodejs.org），选择适合你的操作系统的安装包进行安装。
安装完成后，打开终端并运行以下命令来检查 Node.js 是否安装成功：
node -v
接下来，我们可以使用 Node.js 的包管理器 npm 来安装 Electron。运行以下命令来安装 Electron：
npm install -g electron
初始化项目
创建一个新的文件夹，并进入该文件夹，这将是我们的项目目录。接下来，打开终端并在项目目录中运行以下命令来初始化项目：
npm init -y
这将创建一个默认的 package.json 文件。
接着，我们需要安装 Electron 构建工具。运行以下命令来安装 electron-builder：
npm install electron-builder --save-dev
创建主要代码
在项目目录中，创建一个名为 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', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
以上代码为 Electron 应用创建了一个最小化的窗口，并加载了一个名为 index.html 的文件。
创建界面
在项目目录中，创建一个名为 index.html 的文件，这将是我们应用的界面文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Electron App</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>
运行应用
在终端中，切换到项目目录并执行以下命令：
electron .
这将启动你的 Electron 应用程序，展示一个窗口，并显示 "Hello Electron!" 的文本。
打包应用
一旦你的应用程序准备好了，你可以将其打包为可执行文件，以便在各种操作系统上进行部署和分发。
在项目目录中，创建一个名为 build 的文件夹，然后创建一个 electron-builder.yml 的文件，并将以下内容复制到文件中：
appId: com.example.electronapp
productName: Electron App
directories:
output: ./dist
win:
target: nsis
icon: ./assets/icons/icon.ico
mac:
target: dmg
icon: ./assets/icons/icon.icns
linux:
target: AppImage
icon: ./assets/icons/icon.png
然后，创建一个 assets 文件夹，并将应用程序的图标文件放入其中。
最后，在终端中运行以下命令来构建应用程序：
electron-builder
这将在 dist 文件夹中创建可执行文件，可用于发布和分发你的应用程序。
结论
通过使用 Electron，我们可以使用 Web 技术来构建跨平台的桌面应用程序。本文介绍了如何安装 Electron，初始化项目，创建主要代码和界面，以及将应用程序打包为可执行文件。希望这篇文章对你构建跨平台桌面应用程序有所帮助！
本文来自极简博客，作者：技术趋势洞察，转载请注明原文链接：使用Electron构建跨平台桌面应用
