Logo

菜单

发布于 2026-01-06 7 阅读
0

如何使用 HTML、CSS 和 Javascript 轻松构建桌面应用程序 Electron Electron Forge 先决条件 让我们开始应用程序开发 了解现有文件夹结构和代码 让我们创建一个温度转换器桌面应用程序 恭喜 😄 由 Mux 呈现的 DEV 全球展示挑战赛：展示你的项目！

如何使用 HTML、CSS 和 Javascript 轻松构建桌面应用程序

电子

电子锻造

先决条件

让我们开始使用应用程序吧。

了解现有文件夹结构和代码

让我们创建一个温度转换器桌面应用程序。

恭喜😄

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

本文最初发表于adityasridhar.com。

HTML、CSS 和 Javascript 真的可以用来构建桌面应用程序吗？

答案是肯定的😄

本文将主要介绍如何使用 Electron 结合 HTML、CSS 和 Javascript 等 Web 技术创建桌面应用程序。

电子

Electron可用于使用 HTML、CSS 和 Javascript 构建桌面应用程序。此外，这些应用程序可在 Windows、Mac、Linux 等多个平台上运行。

Electron 将 Chromium 和 NodeJS 合并到一个运行时环境中。这使我们能够将 HTML、CSS 和 Javascript 代码作为桌面应用程序运行。

电子锻造

如果直接使用 Electron，则在构建应用程序之前需要进行一些手动设置。此外，如果您想使用 Angular、React、Vue 或任何其他框架或库，也需要手动进行配置。

Electron Forge让上述操作变得更加容易。

它提供基于 Angular、React、Vue 等框架的模板应用程序，避免了额外的手动设置。

此外，它还提供了一种简便的应用程序构建和打包方式。它还提供许多其他功能，这些功能可以在其文档中找到。

先决条件

请确保您已安装 NodeJS。您可以从这里安装。

使用以下命令全局安装 Electron Forge

npm install -g electron-forge
Enter fullscreen mode Exit fullscreen mode

让我们开始使用应用程序吧。

使用以下命令创建您的应用程序

electron-forge init simple-desktop-app-electronjs
Enter fullscreen mode Exit fullscreen mode

simple-desktop-app-electronjs是该应用程序的名称。

上述命令需要一些时间才能运行。

运行完成后，使用以下命令启动应用程序

cd simple-desktop-app-electronjs
npm start
Enter fullscreen mode Exit fullscreen mode

这样应该会打开一个类似下图所示的窗口。

默认结果

了解现有文件夹结构和代码

创建的应用程序具有文件夹结构。在这里，我将提及此文件夹结构中的一些重要内容。

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 脚本。

主要进程用于显示图形用户界面元素。它通过创建网页来实现这一点。

每个创建的网页都在一个名为渲染进程的进程中运行。

主进程和渲染进程

主进程的目的是使用实例创建网页BrowserWindow。

实例BrowserWindow使用渲染进程来运行每个网页。

每个应用程序只能有一个主进程，但可以有多个渲染进程。

主进程和渲染进程之间也可以进行通信。本文不对此进行详细介绍。

建筑学

Electron架构图，展示了主进程和渲染进程。文件名可以有所不同。

在上述架构中， abcd.html显示为第二个网页。但在我们的代码中，不会有第二个网页。

src/index.html

index.js 将 index.html 文件加载到新的 BrowserWindow 实例中。

这基本上意味着 index.js 创建了一个新的 GUI 窗口，并加载 index.html 网页。index.html 网页在其自身的渲染进程中运行。

index.js 中的代码详解

index.js 中的大部分代码都有很好的注释来解释其功能。这里我将提及 index.js 中需要注意的几个关键点。

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);
Enter fullscreen mode Exit fullscreen mode

上面的代码片段基本上创建了一个BrowserWindow实例，并将index.html加载到 BrowserWindow 中。

你会经常在代码中看到app这个词。例如，请看下面的代码片段。

app.on('ready', createWindow);
Enter fullscreen mode Exit fullscreen mode

app用于控制应用程序的事件生命周期。

上面的代码片段表示，当应用程序准备就绪时，加载第一个窗口。

同样，应用程序也可以用于在各种事件发生时执行其他操作。例如，它可以用于在应用程序关闭之前执行某些操作等等。

让我们创建一个温度转换器桌面应用程序。

编写代码

让我们使用之前用过的同一个应用程序，并稍作修改，创建一个温度转换器应用程序。

首先，我们来安装 Bootstrap。使用以下命令安装 Bootstrap。

npm install bootstrap --save
Enter fullscreen mode Exit fullscreen mode

将以下代码复制到 src/index.html 文件中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Temperature Converter</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>
Enter fullscreen mode Exit fullscreen mode

上述代码执行以下操作

  1. 创建一个 id 为celcius 的文本框。每当在此文本框中输入任何内容时，都会调用celciusToFahrenheit()函数。
  2. 创建一个 id 为fahrenheit 的文本框。每当在此文本框中输入任何内容时，都会调用fahrenheitToCelcius()函数。
  3. 每当在摄氏度文本框中输入新值时，华氏度文本框中也会显示相同的华氏温度值。
  4. 每当在华氏度文本框中输入新值时，摄氏度文本框中也会显示相同的摄氏度值。

renderer.js 文件中包含了两个用于温度转换的函数。

在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;
}
Enter fullscreen mode Exit fullscreen mode

celciusToFahrenheit()函数读取摄氏度文本框中的值，将其转换为华氏度，并将新的温度写入华氏度文本框。

fahrenheitToCelcius()函数的作用正好相反。

运行应用程序

使用以下命令运行应用程序

npm start
Enter fullscreen mode Exit fullscreen mode

这应该会显示以下窗口。请尝试使用不同的值。

默认结果

打包应用程序

打包应用程序的命令是

npm run package
Enter fullscreen mode Exit fullscreen mode

此命令需要一些时间才能运行。完成后，请检查项目文件夹内的out文件夹。

我在 Windows 机器上测试过。这会在我们的文件夹内创建一个名为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
  • 平台 = win32
  • 架构 = x64

如果不带任何参数运行此命令，默认情况下，它会针对您用于开发的平台进行打包。

假设你想为不同的平台和架构打包，那么你可以使用以下语法。

npm run package -- --platform=<platform> arch=<architecture>
Enter fullscreen mode Exit fullscreen mode

例如，要打包成 Linux 版本，可以使用以下命令。

npm run package -- --platform=linux --arch=x64
Enter fullscreen mode Exit fullscreen mode

这将在 out 文件夹内创建一个名为simple-desktop-app-electronjs-linux-x64的文件夹。

创建 Makefile 文件

要为应用程序创建 Makefile 或安装程序，请使用以下命令

npm run make
Enter fullscreen mode Exit fullscreen mode

此命令需要一些时间才能运行。完成后，请检查项目文件夹内的out文件夹。

out /make文件夹中将包含一个用于桌面应用程序的 Windows 安装程序。

默认情况下，如果不带任何参数运行此命令，它会为您用于开发的平台创建安装程序。

代码

此桌面应用程序的代码可在我的 GitHub 仓库中找到。

https://github.com/aditya-sridhar/simple-desktop-app-electronjs

恭喜😄

现在你已经学会了如何使用 HTML、CSS 和 Javascript 创建桌面应用程序。

本文介绍了电子和电子锻造的基本概念。

如需了解更多信息，您可以查看他们的文档。

欢迎在LinkedIn上与我联系，或在Twitter上关注我。

如果您喜欢这篇文章，可以访问我的网站https://adityasridhar.com查看其他类似文章。

文章来源：https://dev.to/adityasridhar/how-to-easily-build-desktop-apps-with-html-css-and-javascript-4ic
Git Bisect 很简单（如何...
2019年，企业对Python开发...