关于前端:如何使用HTMLCSS和JavaScript轻松构建桌面应用程序

9次阅读

共计 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>

下面的代码执行以下操作：

  1. 创立一个 ID 为 Celcius 的文本框。每当在此文本框中键入任何内容时，都会调用 celciusToFahrenheit() 函数。
  2. 创立一个 ID 为 Fahrenheit 的文本框。每当在此文本框中键入任何内容时，都会调用 fahrenheitToCelcius() 函数。
  3. 每当在“Celcius”文本框中键入新值时，“Fahrenheit”文本框中的值就会在“Fahrenheit”中显示雷同的温度
  4. 每当在“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
翻译：公众号《前端全栈开发者》

正文完
前端
发表至： 前端
2020-09-05
 0
关于前端:Web前端设计开发工具集框架验证器编辑器
关于前端:什么是-Web-应用程序的-synthetic-monitor
关于前端:面试突击74properties和yml有什么区别
关于前端:VbenAdmin的useForm实现思路详解以及实现element版的useForm