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中:
温度转换器
Temperature Converter
Celcius:
Fahrenheit: