electronjs（也称为电子）是使用HTML，CSS和JavaScript等语言构建桌面应用程序的框架，基本上，如果您知道如何编码网站，则可以创建自己的桌面应用程序！<<<<<<<<<<<<<<< /p>
先决条件
- 您选择的代码编辑器（例如Visual Studio Code）
- 对JavaScript和HTML的基本理解
- Node.js
创建一个新项目
获得所需的工具后。现在，我们将设置项目。首先，创建一个新文件夹，该文件夹将包含所有文件并在您选择的代码编辑器上打开它。我将在本指南中使用Visual Studio代码。
接下来，打开代码编辑器中的终端。对于Visual Studio代码，您可以按CTRL + SHIFT + `或这样做，例如：
然后输入npm init创建node.js project。
现在您必须输入以下详细信息：
- 软件包名称：您的应用程序的名称
- 版本：输入您的应用程序版本（默认：1.0.0）
- 描述：输入应用程序的描述或目的
-
入口点：启动应用程序时将执行的JS文件。对于本指南，我将使用
index.js。 -
test命令：在终端中运行
npm test时将执行的命令。在本指南中，我们将使用electron .进行电子运行我们的应用程序，我们希望它在我们的项目文件夹中运行，因此我们使用DOT来指定它以在root Directory中运行
对于其余字段，您可以跳过或输入您选择的任何内容。
完成后，package.json应该出现在您的工作空间上。里面应该看起来像这样：
完成设置项目的最后一步是使用NPM（Node Package Manager）安装电子。为此，请在您的终端窗口中输入npm install electron。
将出现一个node_modules文件夹，它将容纳电子所需的所有安装模块。
显示一个新窗口
我们设置了所有必要的项目后，我们现在可以开始编码。首先，创建一个新的JS文件，该文件将处理我们所有应用程序的后端。在您的package.json中的入口点之后命名（在我的情况下为index.js）。
我们将首先声明必要的变量：
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let win
我们首先通过从我们的node_modules文件夹导入electron来声明第一个变量，然后我们将从第一个变量中获取应用程序对象，该变量负责检测事件，例如启动应用程序时，最小化，最大化，最大化，等等。由用户。接下来，BrowserWindow将使我们将HTML文件显示到应用程序中。最后一个变量只是一个持有人变量，以后将使用。
接下来，我们将为我们的应用对象分配一个ready事件。
app.on('ready', function() {
win = new BrowserWindow({
width: 800,
height: 600
})
}
)
当用户启动应用程序时，此事件将运行。活动的内部将创建一个新窗口。新窗口是用诸如宽度和高度的像素量之类的选项制成的，并分配给win Varaible
可以找到更多选项。
现在我们将处理应用程序关闭。将其添加到以前的代码下方的app.on()函数中。
win.on('closed', function() {
mainWindow = null;
})
现在，我们将在先前代码下方的app.on()函数中添加一个函数，以将HTML文件加载到我们的应用程序窗口。
win.loadFile('index.html')
index.html可以替换为任何HTML文件名。这将在以后很重要。
现在您的index.js代码应该看起来像这样：
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let win
app.on('ready', function() {
win = new BrowserWindow({
width: 800,
height: 600
})
win.on('closed', function() {
mainWindow = null;
})
win.loadFile('index.html')
}
)
显示HTML文件
现在，我们所需要的只是一个HTML文件，供我们的应用显示。
使用您以前选择的内容创建HTML文件。 （就我而言，index.html）。
在该指南中，在该指南中，HTML文件将是您的应用程序，我只编写一个简单的网页以显示。
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Example of an electron app</h2>
</body>
</html>
现在，我们要做的就是在您的终端中运行npm test，您应该能够看到在应用程序窗口中显示的HTML文件。
现在，只要使用Nodejs和Electron创建自己的应用程序，这一切都取决于您。您可以安装来自npmjs的更多模块，也可以由NodeJS本身提供的内置模块内置，以扩展您自己的应用的功能。
您可以在其documentation
中找到有关电子的更多信息当然，由于这是我的第一篇文章，因此可能没有添加或可能令人困惑的东西。因此，请随时在评论中告诉我。