在这篇博文中，我将向您展示使用 Electron 构建 JavaScript 桌面应用程序是多么容易。大约 13 行代码后，您将拥有一个功能齐全的 Electron 应用程序！
我将引导您完成代码并解释所有需要了解的内容。🤝
什么是Electron
我们将使用 Electron 框架来创建这个应用程序。Electron 是一个免费的开源框架，主要由GitHub维护。
它为许多应用程序提供支持，大多数人都听说过：Discord、Slack、Notion、VSCode、Spotify等等。
该框架旨在让开发人员使用 JavaScript、HTML 和 CSS 等 Web 技术创建桌面应用程序，并在 Chromium 浏览器引擎的风格中运行这些应用程序，同时将 NodeJS 用于后端环境。
Electron 公开了有用的 API，例如 IPC（进程间通信模块），可让您从桌面应用程序中使用 NodeJS 的强大功能。Electron 最初是为 Atom 构建的，它也是由 GitHub 开发的 IDE。
Electron 应用程序的结构
这是一个非常简单的电子应用程序的目录布局：
.
├── index.html
├── index.js
├── node_modules
├── package-lock.json
└── package.json
1 directory, 4 files
让我们先创建一个 npm 项目，添加一些脚本，然后安装 electron。
为此，让我们package.json用npm init.
确保您还安装了我们将在此项目中使用的唯一库 Electron：
npm i electron
该package.json文件将如下所示：
{
"name": "electron-blog-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^20.0.2"
}
}
现在运行npm i以安装所有依赖项。
电子应用主要包括两件事。
您可以将它们视为应用程序的前端和后端。
后端
在每个电子应用程序中，您都会有一个index.js文件。这是您实际要运行的文件。该文件负责创建桌面应用程序的主窗口，它看起来像这样：
const { app, BrowserWindow } = require("electron");
const createWindow = () => {
const win = new BrowserWindow({
width: 400,
height: 400,
});
win.loadFile("./index.html");
};
app.whenReady().then(() => {
createWindow();
});
让我们回顾一下每一行。
const { app, BrowserWindow } = require("electron");
这是您从 Electron 导入您需要的两个最重要的东西的地方：
让我们BrowserWindow用来创建一个实际的浏览器窗口：
const createWindow = () => {
const win = new BrowserWindow({
width: 400,
height: 400,
});
win.loadFile("./index.html");
};
createWindow函数做了两件事：
- 它为浏览器窗口指定一些属性，例如宽度和高度
- 它加载一个名为
index.html
这几乎等同于index.html在浏览器中打开网页。
但是，createWindow在 Electron 完全初始化之前不应调用。我们可以确定它在whenReady被调用时已经完全初始化。此函数返回一个 Promise，因此您可以将其链接起来then并拥有如下内容：
app.whenReady().then(() => {
createWindow();
});
前端
与该index.js文件类似，有一个index.html文件包含您的应用程序的 UI。
让我们创建一个index.html包含一些简单内容的文件：
<!DOCTYPE html>
<html>
<head>
<title>This is my first Electron app!</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
</head>
<body>
<h1>I made a Desktop App!</h1>
</body>
</html>
到目前为止，我们有一个创建 BrowserWindow 的 JavaScript 文件和一个在 Electron 准备就绪时显示的简单 HTML 文件。
运行你的第一个 Electron 应用程序
但是我们如何运行这个东西呢？
添加"start": "electron .",到"scripts"：
{
"name": "electron-blog-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron .", // this is new
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^20.0.2"
}
}
最后，您所要做的就是运行以下命令：
npm start
你的第一个 Electron 应用程序将在几秒钟内启动：
恭喜！您刚刚使用 JavaScript 构建了您的第一个桌面应用程序！
来源：https://akoskm.com/build-a-javascript-desktop-app-with-electron
网友评论