css 中写脚本_如何使用HTML，CSS和Java脚本轻松构建桌面应用程序

最新推荐文章于 2023-11-08 23:32:38 发布

cumifi2519

最新推荐文章于 2023-11-08 23:32:38 发布

阅读量419

点赞数

文章标签： vue python java js javascript ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-easily-build-desktop-apps-with-html-css-and-javascript-d3e3f03f95a5/

版权

css 中写脚本

Can HTML, CSS and Javascript really be used to build Desktop Applications?

HTML，CSS和Java语言是否可以真正用于构建桌面应用程序？

The answer is yes.

答案是肯定的。

In this Article we will be focussing mainly on how Electron can be used to create desktop applications with Web Technologies like HTML, CSS and Javascript.

在本文中，我们将主要关注如何使用Electron通过Web技术(如HTML，CSS和Javascript)创建桌面应用程序。

电子 (Electron)

Electron can be used to build Desktop Apps with HTML, CSS and Javascript. Also these apps work for multiple platforms like Windows, Mac, Linux and so on.

Electron可用于使用HTML，CSS和Javascript构建桌面应用程序。这些应用程序还适用于Windows，Mac，Linux等多种平台。

Electron combines Chromium and NodeJS into a single runtime. This enables us to run the HTML, CSS and Javascript code as a desktop application.

Electron将Chromium和NodeJS组合为一个运行时。这使我们能够将HTML，CSS和Javascript代码作为桌面应用程序运行。

电子锻造 (Electron Forge)

If Electron is used directly, then some manual setup is needed before building your application. Also if you want to use Angular, React, Vue or any other framework or library, you will need to manually configure for that.

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

Electron Forge makes the above things much easier.

Electron Forge使上述事情变得更加容易。

It provides template applications with Angular, React, Vue and other frameworks which avoids the extra manual setups.

它为模板应用程序提供了Angular，React，Vue和其他框架，从而避免了额外的手动设置。

Also it provides an easy way to build and package the application. It also provides many other features which can be found in their documenation.

它还提供了一种构建和打包应用程序的简便方法。它还提供了许多其他功能，可在其文档说明中找到。

先决条件 (Pre-requisites)

Ensure you have NodeJS installed. It can be installed from here.

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

Install Electron Forge globally using the following command:

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

npm install -g electron-forge

让我们开始使用该应用程序 (Let’s get started with the application)

Use the following command to create your application:

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

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs is the name of the application.

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

The above command will take some time to run.

上面的命令将需要一些时间才能运行。

Once it finishes running, start the application using the following commands:

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

cd simple-desktop-app-electronjsnpm start

This should open up a window like the one shown below:

这将打开一个窗口，如下所示：

了解现有的文件夹结构和代码 (Understanding the Existing Folder Structure and Code)

The application has a particular folder structure. Here I will be mentioning some of the important things in this folder structure.

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

package.json (package.json)

It has information about the application you are creating, all the dependencies needed for the app, and some scripts. Some of the scripts are already pre configured, and you can add new scripts as well.

它包含有关您正在创建的应用程序，该应用程序所需的所有依赖项以及一些脚本的信息。一些脚本已经预先配置，您也可以添加新脚本。

The config.forge path has all the configurations which are specific to ElectronJS. For example make-targets is used to specify the target make files for various platforms like Windows, Mac or Linux.

config.forge路径具有特定于ElectronJS的所有配置。例如， make-targets用于为Windows，Mac或Linux等各种平台指定目标make文件。

Also package.json has "main": "src/index.js" which indicates that src/index.js is the starting point of the application

package.json还具有"main": "src/index.js" ，这表明src / index.js是应用程序的起点

src / index.js (src/index.js)

According to package.json, index.js is the main script. The process which runs the main script is known as the main process. So the main process runs the index.js script.

根据package.json的描述， index.js是主要脚本。运行主脚本的进程称为主进程 。因此，主进程运行index.js脚本。

The main process is used to display GUI elements. It does this by creating web pages.

主要过程用于显示GUI元素。它通过创建网页来实现。

Each web page created runs in a process called the renderer process.

创建的每个网页都在称为渲染器进程的过程中运行。

主过程和渲染过程 (Main process and renderer process)

The purpose of the main process is to create web pages using a BrowserWindow Instance.

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

The BrowserWindow Instance uses a renderer process to run each web page.

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

Each app can have only one main process but can have many renderer processes.

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

It is possible to communicate between the main and the renderer process as well. This, however, will not be covered in this article.

主程序和渲染器进程之间也可以进行通信。但是，本文不会对此进行介绍。

abcd.html is shown as a second webpage in the above architecture. But in our code we won’t be having a second web page.

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

src / index.html (src/index.html)

index.js loads the index.html file into a new BrowerWindow Instance.

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

What this basically means is that index.js creates a new GUI Window, and loads it with index.html web page. The index.html web page runs in its own renderer process.

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

index.js中的代码说明 (Code in index.js explained)

Most of the code created in index.js has good comments explaining what it does. Here I will mention a few key points to note in 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`);

The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.

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

You will see app used often in the code. For example take the below code snippet:

您会在代码中看到经常使用的应用。例如，使用以下代码片段：

app.on('ready', createWindow);

app is used to control the application’s event life cycle.

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

The above code snippet says that when the application is ready, load the first window.

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

Similarly, app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.

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

让我们创建一个温度转换器桌面应用程序 (Let’s create a Temperature Converter Desktop Application)

Let us use the same application we used before and modify it slightly to create a temperature converter application.

让我们使用之前使用的相同应用程序，并对其进行一些修改以创建温度转换器应用程序。

First let us install Bootstrap with the following command:

首先让我们使用以下命令安装Bootstrap：

npm install bootstrap --save

Copy the following code into src/index.html:

将以下代码复制到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>

The above code does the following:

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

Creates a text box with id Celcius. Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
创建一个ID为Celcius的文本框。每当在此文本框中键入任何内容时，都会调用celciusToFahrenheit()函数。
Creates a text box with id Fahrenheit. Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called.
创建一个ID为Fahrenheit的文本框。每当在此文本框中键入任何内容时，都会调用fahrenheitToCelcius()函数。
Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
每当在“ Celcius”文本框中键入新值时，“ Fahrenheit”文本框中的值就会在“ Fahrenheit”中显示相同的温度
Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius
每当在“华氏温度”文本框中键入新值时，“摄氏温度”文本框中的值将显示与“摄氏温度”相同的温度

The 2 functions which do the temperature conversion are present in renderer.js.

renderer.js中提供执行温度转换的2个函数。

Create a file called renderer.js inside src. Copy the following code into it:

在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;
}

The celciusToFahrenheit() function reads the value in the Celcius text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit text box.

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

The fahrenheitToCelcius() function does the exact opposite of this.

fahrenheitToCelcius()函数与此完全相反。

运行应用程序 (Running the application)

Run the application using the following command:

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

npm start

This should display the following window. Try it out with different values.

这将显示以下窗口。尝试使用其他值。

打包应用程序 (Packaging the application)

The command to package the application is:

打包应用程序的命令是：

npm run package

This command will take some time to run. Once it finishes check the out folder within the project folder.

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

I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside the out folder

我在Windows计算机上对此进行了测试。这将在out文件夹中创建一个名为simple-desktop-app-electronjs-win32-x64的文件夹

So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.

因此，在out / simple-desktop-app-electronjs-win32-x64文件夹中，该命令为此应用程序创建一个.exe文件。单击exe文件会自动启动桌面应用程序。

The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where

文件夹名称simple-desktop-app-electronjs-win32-x64可以分解为appname-platform-architecture ，其中

appname = simple-desktop-app-electronjs
appname = simple-desktop-app-electronjs
platform = win32
平台= Win32
architecture = x64
架构= x64

When you run this command without any parameters, by default it packages for the platform which you are using for development.

在不带任何参数的情况下运行此命令时，默认情况下，它将打包用于开发的平台。

Let’s say you want to package for a different platform and architecture. Then you can use the following syntax:

假设您要打包用于其他平台和体系结构。然后，您可以使用以下语法：

npm run package -- --platform=<platform> arch=<architecture>

For example, in order to package for linux you can use the following command:

例如，为了为Linux打包，您可以使用以下命令：

npm run package -- --platform=linux --arch=x64

This will create a folder called simple-desktop-app-electronjs-linux-x64 inside the out folder.

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

创建一个make文件 (Creating a make File)

In order to create a make file or an installer for the application, use the following command:

为了创建应用程序的make文件或安装程序，请使用以下命令：

npm run make

This command will take some time to run. Once it finishes check the out folder within the project folder.

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

The out/make folder will have a Windows installer for the desktop application.

out / make文件夹将具有用于桌面应用程序的Windows安装程序。

When you run this command without any parameters, by default it creates the installer for the platform which you are using for development.

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

码 (Code)

The code for this desktop application is available in my GitHub repo:

该桌面应用程序的代码可在我的GitHub存储库中找到：

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

恭喜😊 (Congrats 😊)

You now know how to create desktop applications using HTML, CSS and Javascript.

您现在知道如何使用HTML，CSS和Javascript创建桌面应用程序。

This article covered very basic concepts of Electron and Electron-Forge.

本文介绍了Electron和Electron-Forge的非常基本的概念。

To know more about them, you can check out their documentation.

要了解有关它们的更多信息，可以查看其文档。

关于作者 (About the author)

I love technology and follow the advancements in the field. I also like helping others with my technology knowledge.

我热爱技术，并关注该领域的进步。我也喜欢用我的技术知识来帮助他人。

Feel free to connect with me on my LinkedIn account https://www.linkedin.com/in/aditya1811/

随时使用我的LinkedIn帐户与我联系https://www.linkedin.com/in/aditya1811/

You can also follow me on twitter https://twitter.com/adityasridhar18

您也可以在Twitter上关注我https://twitter.com/adityasridhar18

My Website: https://adityasridhar.com/

我的网站： https : //adityasridhar.com/

Read more of my articles on my blog at adityasridhar.com.

在adityasridhar.com的博客上阅读更多文章。

翻译自: https://www.freecodecamp.org/news/how-to-easily-build-desktop-apps-with-html-css-and-javascript-d3e3f03f95a5/

css 中写脚本

cumifi2519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫