共计 4380 个字符，预计需要花费 11 分钟才能阅读完成。
HTML，CSS 和 JavaScript 语言是否能够真正用于构建桌面应用程序？
答案是必定的。????
在这篇文章中，咱们将次要关注 Electron 如何应用 HTML、CSS 和 Javascript 等网络技术来创立桌面应用程序。
Electron
Electron 可用于应用 HTML，CSS 和 Javascript 构建桌面应用程序。这些应用程序还实用于 Windows，Mac，Linux 等多种平台。
Electron 将 Chromium 和 NodeJS 联合到一个运行时。这使咱们可能将 HTML、CSS 和 Javascript 代码作为一个桌面应用程序来运行。
Electron Forge
如果间接应用 Electron，则在构建应用程序之前须要进行一些手动设置。另外，如果你想应用 Angular，React，Vue 或任何其余框架或库，则须要为此进行手动配置。
Electron Forge 使上述事件变得更加容易。
它提供了 Angular、React、Vue 等框架的模板利用，防止了额定的人工设置。
它还提供了一种构建和打包应用程序的简便办法。它还提供了许多其余性能，可在其文档中找到。
先决条件
确保已装置 NodeJS。
应用以下命令全局装置 Electron Forge：
npm install -g electron-forge
让咱们开始应用该应用程序
应用以下命令创立你的应用程序：
electron-forge init simple-desktop-app-electronjs
simple-desktop-app-electronjs是应用程序的名称。
下面的命令将须要一些工夫能力运行。
实现运行后，应用以下命令启动应用程序：
| cd simple-desktop-app-electronjs | |
| npm start |
这将关上一个窗口，如下所示：
理解现有的文件夹构造和代码
应用程序有一个非凡的文件夹构造。在这里我将提到这个文件夹构造中的一些重要的货色。
package.json
它有对于你正在创立的应用程序的信息，应用程序所需的所有依赖关系，以及一些脚本。有些脚本曾经事后配置好了，你也能够增加新的脚本。
config.forge门路蕴含了 ElectronJS 的所有配置。例如，make-targets用于指定 Windows、Mac 或 Linux 等各种平台的指标 make 文件。
package.json 还具备 "main": "src/index.js"，这表明 src/index.js 是应用程序的终点。
src/index.js
依据 package.json，index.js是主脚本。运行主脚本的过程称为 主过程。所以主过程运行的是 index.js 脚本。
主过程是用来显示 GUI 元素，它通过创立网页来实现。
创立的每个网页都在称为渲染器过程的过程中运行。
主过程和渲染过程
主过程的目标是应用 BrowserWindow 实例创立网页。
BrowserWindow 实例应用渲染器过程来运行每个网页。
每个应用程序只能有一个主过程，但能够有许多渲染器过程。
主过程和渲染器过程之间也能够进行通信。不过，本文将不波及这个问题。
abcd.html在上述架构中显示为第二个网页。然而在咱们的代码中，咱们不会再有第二个网页。
src/index.html
index.js 将 index.html 文件加载到新的 BrowerWindow 实例中。
这基本上意味着 index.js 创立了一个新的 GUI 窗口，并将 index.html 网页加载其中。index.html 网页在本人的渲染器过程中运行。
index.js 中的代码阐明
在 index.js 中创立的大部分代码都有很好的正文来解释它的作用。这里我将提到 index.js 中须要留神的几个关键点。
| mainWindow = new BrowserWindow({ | |
| width: 800, | |
| height: 600, | |
| }); | |
| // 并加载应用程序的 index.html. | |
| mainWindow.loadURL(`file://${__dirname}/index.html`); |
下面的代码片段基本上创立了一个 BrowserWindow 实例，并将 index.html 加载到 BrowserWindow 中。
在代码中你会看到 app 常常应用。比方上面的代码片段。
app.on('ready', createWindow);
app是用于控制应用程序的事件生命周期。
下面的代码片段说，当应用程序准备就绪时，加载第一个窗口。
同样，app也能够用来对各种事件执行其余操作。例如，它能够用来在应用程序敞开前执行一些动作等等。
让咱们创立一个温度转换器桌面应用程序
让咱们应用之前应用的应用程序，并稍加批改，创立一个温度转换器应用程序。
首先让咱们应用以下命令装置 Bootstrap：
npm install bootstrap --save
将以下代码复制到 src/index.html 中：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title> 温度转换器 </title> | |
| <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <h1>Temperature Converter</h1> | |
| <div class="form-group col-md-3"> | |
| <label for="usr">Celcius:</label> | |
| <input type="text" class="form-control" id="celcius" onkeyup="celciusToFahrenheit()"> | |
| </div> | |
| <div class="form-group col-md-3"> | |
| <label for="pwd">Fahrenheit:</label> | |
| <input type="text" class="form-control" id="fahrenheit" onkeyup="fahrenheitToCelcius()"> | |
| </div> | |
| <script src='./renderer.js'></script> | |
| </body> | |
| </body> | |
| </html> |
下面的代码执行以下操作：
- 创立一个 ID 为 Celcius 的文本框。每当在此文本框中键入任何内容时，都会调用 celciusToFahrenheit() 函数。
- 创立一个 ID 为 Fahrenheit 的文本框。每当在此文本框中键入任何内容时，都会调用 fahrenheitToCelcius() 函数。
- 每当在“Celcius”文本框中键入新值时，“Fahrenheit”文本框中的值就会在“Fahrenheit”中显示雷同的温度
- 每当在“Fahrenheit”文本框中键入新值时，“Celcius”文本框中的值将显示与“Celcius”雷同的温度
renderer.js中提供执行温度转换的 2 个函数。
在 src 内创立一个名为 renderer.js 的文件。将以下代码复制到其中：
| function celciusToFahrenheit(){let celcius = document.getElementById('celcius').value; | |
| let fahrenheit = (celcius* 9/5) + 32; | |
| document.getElementById('fahrenheit').value = fahrenheit; | |
| } | |
| function fahrenheitToCelcius(){let fahrenheit = document.getElementById('fahrenheit').value; | |
| let celcius = (fahrenheit - 32) * 5/9 | |
| document.getElementById('celcius').value = celcius; | |
| } |
celciusToFahrenheit() 函数读取 Celcius 文本框中的值，将其转换为 Fahrenheit，而后将新温度写入 Fahrenheit 文本框中。
fahrenheitToCelcius() 函数与此齐全相同。
运行应用程序
应用以下命令运行应用程序：
npm start
这应该会显示以下窗口。用不同的值进行尝试。
打包应用程序
打包应用程序的命令是：
npm run package
这个命令须要一些工夫来运行。一旦它实现，查看我的项目文件夹内的 out 文件夹。
我在 Windows 机器上进行了测试。这将在 out 文件夹中创立一个名为 simple-desktop-app-electronjs-win32-x64 的文件夹。
所以在 out/simple-desktop-app-electronjs-win32-x64 文件夹中，命令为这个应用程序创立一个.exe 文件。点击 .exe 文件就会主动启动桌面应用程序。
文件夹名称 simple-desktop-app-electronjs-win32-x64 能够合成为appname-platform-architecture，其中
- appname = simple-desktop-app-electronjs
- platform = win32
- architecture = x64
在不带任何参数的状况下运行此命令时，默认状况下，它将打包用于开发的平台。
假如你想为不同的平台和架构打包。那么你能够应用上面的语法。
npm run package -- --platform=<platform> arch=<architecture>
例如，为了为 Linux 打包，你能够应用以下命令：
npm run package -- --platform=linux --arch=x64
这将在 out 文件夹中创立一个名为 simple-desktop-app-electronjs-linux-x64 的文件夹。
创立一个 make 文件
为了创立应用程序的 make 文件或安装程序，请应用以下命令。
npm run make
这个命令须要一些工夫来运行。一旦它实现，查看我的项目文件夹内的 out 文件夹。
out/make文件夹中会有一个桌面应用程序的 Windows 安装程序。
当你运行这个命令时，没有任何参数，默认状况下，它会为你用于开发的平台创立安装程序。
代码
该桌面应用程序的代码可在我的 GitHub 仓库中找到：https://github.com/aditya-sri…
祝贺 ????
你当初晓得如何应用 HTML，CSS 和 Javascript 创立桌面应用程序。
本文介绍了 Electron 和 Electron-Forge 的十分根本的概念。
要理解无关它们的更多信息，能够查看其文档。
起源：https://medium.com/free-code-camp
作者：Aditya Sridhar
翻译：公众号《前端全栈开发者》
