1200字范文 > electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序

electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序

时间：2020-09-07 14:40:43

electron 桌面程序

by Carol-Theodor Pelu

通过Carol-Theodor Pelu

如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How to Build Your First Desktop App with JavaScript Using Electron)

Have you ever wondered if you can build cross-platform desktop apps with HTML, CSS, and JavaScript?

您是否想过是否可以使用HTML，CSS和JavaScript构建跨平台的桌面应用程序？

It is possible with Electron.

电子有可能。

This article will help you understand some core concepts of Electron.

本文将帮助您了解Electron的一些核心概念。

By the end of this post, you’ll know the process of creating cross-platform desktop apps with Electron, HTML, and CSS.

在本文结束时，您将了解使用Electron，HTML和CSS创建跨平台桌面应用程序的过程。

Before we get started you can check out in advance the app we’re going to build in this tutorial.

在我们开始之前，您可以提前检查我们将在本教程中构建的应用程序。

Hear Me Typewill have a simple but straightforward functionality. Every key pressed on the keyboard will play a specific sound. So if I press the “A” button, the app will play the specific sound for the letter A.

“听我说”将具有简单但直接的功能。键盘上按下的每个键都会播放特定的声音。因此，如果我按下“ A”按钮，则该应用将播放字母A的特定声音。

There are two versions available for download. The source code for this tutorial, and an advanced version of the app, recommended for more experienced Electron users.

有两个版本可供下载。本教程的源代码以及该应用程序的高级版本，建议有经验的Electron用户使用。

The code will change since I’m adding new features and enhancements. Be sure to check back to see what’s new.

由于我要添加新功能和增强功能，因此代码将更改。请务必回来查看最新消息。

Without further ado, let’s find out more about Electron and create our first app!

事不宜迟，让我们进一步了解Electron并创建我们的第一个应用程序！

什么是电子？ (What is Electron?)

Electron is a framework for cross-platform desktop applications using Chromium and Node.js.

Electron是使用Chromium和Node.js的跨平台桌面应用程序的框架。

It’s easy to build cross-platform apps using HTML, CSS, and JavaScript. Your app will be compatible with Mac, Windows, and Linux operating systems right out of the box.

使用HTML，CSS和JavaScript构建跨平台应用程序很容易。您的应用程序将立即与Mac，Windows和Linux操作系统兼容。

Other in-built features are:

其他内置功能包括：

Automatic updates— enable apps to automatically update themselves

自动更新-使应用程序能够自动更新自己

Native menus and notifications— creates native application menus and context menus

本机菜单和通知-创建本机应用程序菜单和上下文菜单

App crash reporting— you can submit crash reports to a remote server

应用崩溃报告-您可以将崩溃报告提交到远程服务器

Debugging and profiling— Chromium’s content module finds performance bottlenecks and slow operations. You can also use your favorite Chrome Developer Tools within your app.

调试和性能分析-Chromium的内容模块发现性能瓶颈和运行缓慢。您还可以在应用中使用自己喜欢的Chrome开发者工具。

Windows installer— you can create install packages. Fast and simple.

Windows安装程序-您可以创建安装软件包。快速简单。

If you’re happy with what Electron offers, let’s dive deeper and create a simple Electron app.

如果您对Electron的功能感到满意，让我们深入研究并创建一个简单的Electron应用程序。

Before we get our hands dirty, you will need to install Node.js. You also should have a GitHub account to store and update your app. Although an account isn’t necessary, it’s highly recommended. GitHub is an industry standard and it’s important to know how to use it.

在我们动手之前，您需要安装Node.js。您还应该有一个GitHub帐户来存储和更新您的应用程序。尽管不需要帐户，但强烈建议您使用。 GitHub是行业标准，知道如何使用它很重要。

We will be using GitHub in this tutorial.

在本教程中，我们将使用GitHub。

入门 (Getting Started)

When you’re set up, open a Terminal window for your operating system.

设置完成后，打开操作系统的“终端”窗口。

Follow the instructions below to clone the Electron Quick Start Git repository to your computer.

请按照以下说明将Electron Quick Start Git存储库克隆到您的计算机。

We’re gonna build our software upon Electron Quick Start.

我们将基于Electron快速入门来构建我们的软件。

# Clone the Quick Start repositorygit clone /electron/electron-quick-start# Go into the repositorycd electron-quick-start# Install the dependencies and runnpm install && npm start

When the steps listed above are complete you should see the app open in what looks like a browser window. And it is indeed a browser window!

完成上述步骤后，您应该会在看起来像浏览器窗口的状态下打开该应用程序。而且确实是浏览器窗口！

The window style changes depending on the Operating System. I chose to use the classic look of Windows. Groovy!

窗口样式根据操作系统而变化。我选择使用Windows的经典外观。时髦！

Like I was saying earlier, you can use Chrome’s Developer Tools inside your app. What you can do with your browser’s Developer Tools, you can also do inside the app. Outstanding!

就像我之前说的，您可以在应用程序内部使用Chrome的开发人员工具。您可以使用浏览器的开发人员工具进行操作，也可以在应用程序内部进行操作。优秀！

电子应用架构 (Electron Application Architecture)

Let’s have a look at the source code and the file structure of our app. Open up the project in your favorite text editor or IDE. I’m going to use Atom which is built on… you guessed it… Electron!

让我们看一下应用程序的源代码和文件结构。在您喜欢的文本编辑器或IDE中打开项目。我要使用的Atom这是建立在......你猜对了...电子！

We have a basic file structure:

我们有一个基本的文件结构：

electron-quick-start

- index.html- main.js- package.json- render.js

The file structure is similar to the one we use when creating web pages.

文件结构类似于我们在创建网页时使用的结构。

We have:

我们有：

index.htmlwhich is an HTML5 web page serving one big purpose: our canvas

index.html，这是一个HTML5网页，具有一个重要目的：我们的画布

main.jscreates windows and handles system events

main.js创建窗口并处理系统事件

package.jsonis the startup script for our app. It will run in the main process and it contains information about our app

package.json是我们应用程序的启动脚本。它将在主要过程中运行，并且包含有关我们应用程序的信息

render.jshandles the app’s render processes

render.js处理应用程序的渲染过程

You may have a few questions about the main process and render process thingies. What the heck are they and how can I get along with them?

您可能对主要流程和渲染流程有一些疑问。它们到底是什么，我该如何与他们相处？

Glad you asked. Hang on to your hat ’cause this may be new territory if you’re coming from browser JavaScript realm!

很高兴你问。请戴上帽子，因为如果您来自浏览器JavaScript领域，这可能是新领域！

什么是过程？ (What is a process?)

When you see “process”, think of an operating system level process. It’s an instance of a computer program that is running in the system.

当您看到“进程”时，请考虑一下操作系统级别的进程。它是系统中正在运行的计算机程序的实例。

If I start my Electron app and check the Windows Task Manager or Activity Monitor for macOS, I can see the processes associated with my app.

如果我启动Electron应用程序并检查Windows任务管理器或Activity Monitor for macOS，则可以看到与我的应用程序相关的进程。

Each of these processes run in parallel. But the memory and resources allocated for each process are isolated from the others.

这些过程中的每一个并行运行。但是为每个进程分配的内存和资源是相互隔离的。

Say I want to create afor loopthat increments something in a render process.

假设我想创建一个for loop，以在渲染过程中增加某些内容。

var a = 1;

for ( a = 1; a < 10; a ++) { console.log('This is a for loop');}

The increments are only available in the render process. It doesn’t affect the main process at all. TheThis is a for loopmessage will appear only on the rendered module.

增量仅在渲染过程中可用。它根本不影响主要过程。This is a for loop消息，将仅出现在呈现的模块上。

主要过程 (Main Process)

The main process controls the life of the application. It has the full Node.js API built in and it opens dialogs, and creates render processes. It also handles other operating system interactions and starts and quits the app.

主过程控制应用程序的生命周期。它内置了完整的Node.js API，可以打开对话框并创建渲染过程。它还处理其他操作系统的交互并启动和退出该应用程序。

By convention, this process is in a file namedmain.js. But it can have whatever name you’d like.

按照惯例，此过程位于名为main.js的文件中。但是它可以具有您想要的任何名称。

You can also change the main process file by modifying it inpackage.jsonfile.

您还可以通过在package.json文件中对其进行修改来更改主进程文件。

For testing purpose, openpackage.jsonand change:

出于测试目的，打开package.json并更改：

“main”: “main.js”,

至

“main”: “mainTest.js”,

Start your app and see if it still works.

启动您的应用程序，看看它是否仍然有效。

Bear in mind that there can be onlyonemain process.

请记住，只能有一个主要过程。

渲染过程 (Render Process)

The render process is a browser window in your app. Unlike the main process, there can be many render processes and each is independent.

渲染过程是您应用中的浏览器窗口。与主过程不同，可以有很多渲染过程，每个渲染过程都是独立的。

Because every render process is separate, a crash in one won’t affect another. This is thanks to Chromium’s multi-process architecture.

因为每个渲染过程都是独立的，所以一个崩溃不会影响另一个。这要归功于Chromium的多进程体系结构。

These browser windows can also be hidden and customized because they’re like HTML files. But in Electron we also have the full Node.js API. This means we can open dialogs and other operating system interactions.

这些浏览器窗口也可以隐藏和自定义，因为它们就像HTML文件一样。但是在Electron中，我们还有完整的Node.js API。这意味着我们可以打开对话框和其他操作系统交互。

Think of it like this:

这样想：

One question remains. Can they be linked somehow?

仍然有一个问题。它们可以以某种方式链接吗？

These processes run concurrently and independently. But they still need to communicate somehow. Especially since they’re responsible for different tasks.

这些过程同时运行并独立运行。但是他们仍然需要以某种方式进行交流。特别是因为他们负责不同的任务。

For this, there’s an interprocess communication system or IPC. You can use IPC to pass messages between main and render processes. For a more in-depth explanation of this system read Christian Engvall’s article.

为此，存在一个进程间通信系统或IPC。您可以使用IPC在主进程和渲染进程之间传递消息。有关此系统的更深入的说明，请阅读Christian Engvall的文章。

These are the basics of processes for developing an Electron application.

这些是开发电子应用程序的基础知识。

Now let’s get back to our code!

现在让我们回到我们的代码！

个性化 (Make It Personal)

Let’s give our app’s folder a proper name.

让我们给应用程序的文件夹起一个适当的名称。

Change the folder name fromelectron-quick-starttohear-me-type-tutorial.

将文件夹名称从“electron-quick-start更改为“hear-me-type-tutorial。

Reopen the folder with your favorite text editor or IDE. Let’s further customize our app’s identity by opening up thepackage.jsonfile.

使用您喜欢的文本编辑器或IDE重新打开该文件夹。让我们通过打开package.json文件进一步自定义应用程序的身份。

package.jsoncontains vital information about our app. This is where you define the name, version, main file, author, license and so much more.

package.json包含有关我们应用程序的重要信息。在这里定义名称，版本，主文件，作者，许可证等等。

Let’s get a little bit of pride and put you as author of the app.

让我们感到自豪，让您成为该应用程序的作者。

Find the “author” parameter and change the value to your name. It should look like this:

找到“作者”参数，然后将值更改为您的名字。它看起来应该像这样：

“author”: “Carol Pelu”,

We also need to change the rest of the parameters. Find thenameanddescriptionbelow and change them in your package.json file:

我们还需要更改其余参数。在下面找到name和description，然后在package.json文件中进行更改：

Awesome! Now our app has a new name and a short but straight to the point description.

太棒了！现在，我们的应用有了一个新名称，并简短而直接地说明了问题。

Remember, you can always runnpm startin your terminal to execute the app and see the changes you’ve made.

记住，您始终可以在终端中运行npm start来执行该应用程序，并查看所做的更改。

Let’s move forward and add the expected functionality of our app. We want to play a specific sound for every keyboard key that we press.

让我们继续前进，并添加应用程序的预期功能。我们想为我们按下的每个键盘按键播放特定的声音。

哦，有趣的家伙！ (Oh, the Fun-ctionalitee!)

What is an app without fun-ctionality? Nothing much…

什么是没有功能的应用程序？没什么…

Now we must take care of it and give our app the functionality it desires.

现在，我们必须照顾好它，并为我们的应用程序提供所需的功能。

To make the app react to our input, we must first define an element to hook upon and then trigger the desired action.

为了使应用程序对我们的输入做出React，我们必须首先定义一个要挂接的元素，然后触发所需的操作。

To do that we will createaudioelements with specificids for the keyboard keys that we want. Then we will create aswitchstatement to find out which keyboard key was pressed. Then we’ll play a specific sound assigned to that key.

为此，我们将为所需的键盘按键创建具有特定id的audio元素。然后，我们将创建一个switch语句，以找出按下了哪个键盘键。然后，我们将播放分配给该键的特定声音。

If this seems a little complex to you now, have no fear. I will guide you through every step.

如果您现在觉得这有点复杂，请不要担心。我将指导您完成所有步骤。

Download this archive containing all the sound files we’ll be using. We’ll soon make use of them!

下载此档案文件，其中包含我们将要使用的所有声音文件。我们将尽快使用它们！

Open up theindex.htmlfile and let’s create the<audio> elements to embed the sound content in our app.

打开index.html文件，让我们创建<audio>元素，将声音内容嵌入到我们的应用程序中。

Inside the<body> element, createa div element with theaudioclass tag.

内部<boDY>元素，CREate与div元素audio类标记。

Inside the createddivelement, create an<audio> element withan id of “A”, thesource tag of “sounds/A.mp3” and with a preload attribute of “auto”.

所创建的内部div元素，创建一个<audIO>元素无线th“A”的一个id, the的“声音/ A.mp3”源标签和瓦特ith ap“自动”的重载属性。

We’ll usepreload=”auto”to tell the app that it should load the entire audio file when the page loads.index.htmlis the main file of the app, and all our sound files will load when the app executes.

我们将使用preload=”auto”告诉应用程序在页面加载时应加载整个音频文件。index.html是应用程序的主文件，并且我们所有的声音文件都会在应用程序执行时加载。

The code should look like this:

该代码应如下所示：

<div class="audio">

<audio id="A" src="sounds/A.mp3" preload="auto"></audio>

</div>

Now the<audio> is pointing to an unknown source file. Let’s create a folder calledsounds and unzip all the sound files inside the folder.

现在，<audio>指向未知的源文件。让我们创建一个目录Called声音和解压的文件夹内的所有声音文件。

Great! The only important thing that’s missing right now is the JavaScript code.

大！目前唯一缺少的重要内容是JavaScript代码。

Create a new file calledfunctions.js. Let’s require it within theindex.htmlfile so that the JS code is ready for use when the app is running.

创建一个名为functions.js的新文件。让我们在index.html文件中要求它，以便在应用程序运行时可以使用JS代码。

Following the example ofrequire(./renderer.js'), add this line of code right under it:

按照require(./renderer.js')的示例，在其下面添加以下代码行：

require('./functions.js')

Your project should look like this:

您的项目应如下所示：

Outstanding! Now that we have everything stitched up, it’s time for the moment of truth.

优秀！既然我们已经完成了所有工作，那么该是时候了。

Open up thefunctions.jsfile and add the following JavaScript code into the file. I’ll explain how it works in just a moment.

打开functions.js文件，并将以下JavaScript代码添加到该文件中。我将在稍后解释它的工作原理。

document.onkeydown = function(e) { switch (e.keyCode) { case 65: document.getElementById('A').play(); break; default: console.log("Key is not found!"); }};

The code should look like this:

该代码应如下所示：

Open your bash or Terminal window. Be sure you’re in your project’s folder and typenpm startto run the app.

打开bash或“终端”窗口。确保您位于项目的文件夹中，然后键入npm start来运行该应用程序。

Tune up the volume of your speakers and press theAbutton on your keyboard.

调高扬声器的音量，然后按键盘上的A按钮。

#MindBlown

The JS code is pretty simple and straightforward.

JS代码非常简单明了。

We use theonkeydownevent on thedocumentobject to find out which HTML element is being accessed. Remember, thedocumentobject is our app’s main window.

我们在document对象上使用onkeydown事件来确定正在访问哪个HTML元素。请记住，document对象是我们应用程序的主窗口。

Within the anonymous function, we use aswitchstatement. Its purpose is to identify the Unicode value of the pressed keyboard key.

在匿名函数中，我们使用switch语句。其目的是识别按下的键盘键的Unicode值。

If the Unicode value of the pressed keyboard key is correct, the sound is played. Otherwise a “not found” is error is thrown. Look for the message in the console.

如果按下的键盘键的Unicode值正确，则会播放声音。否则抛出“未找到”错误。在控制台中查找消息。

What a ride!

太好了！

You may have noticed that we have sound files to cover A-Z and 0–9 keys. Let’s use them too so they don’t feel the bitter taste of loneliness.

您可能已经注意到，我们有涵盖AZ和0–9键的声音文件。让我们也使用它们，这样他们就不会感到孤独的苦涩味。

Head over toindex.htmland create an<audio> element for every key that we have a sound file for.

转到index.html并为我们拥有声音文件的每个键创建一个<audio>元素。

The code should look like this:

该代码应如下所示：

Yeah, of course you can copy-paste:

是的，您当然可以复制粘贴：

Awesome! Now let’s do the same thing for the JS code withinfunctions.js.

太棒了！现在，让我们对functions.js的JS代码做同样的事情。

You can find the char codes (key codes) on this website.

您可以在该网站上找到字符代码(键代码)。

But yeah, you can copy-paste this too:

但是，是的，您也可以复制粘贴此内容：

document.onkeydown = function(e) { switch (e.keyCode) { case 48: document.getElementById('0').play(); break; case 49: document.getElementById('1').play(); break; case 50: document.getElementById('2').play(); break; case 51: document.getElementById('3').play(); break; case 52: document.getElementById('4').play(); break; case 53: document.getElementById('5').play(); break; case 54: document.getElementById('6').play(); break; case 55: document.getElementById('7').play(); break; case 56: document.getElementById('8').play(); break; case 57: document.getElementById('9').play(); break; case 65: document.getElementById('A').play(); break; case 66: document.getElementById('B').play(); break; case 67: document.getElementById('C').play(); break; case 68: document.getElementById('D').play(); break; case 69: document.getElementById('E').play(); break; case 70: document.getElementById('F').play(); break; case 71: document.getElementById('G').play(); break; case 72: document.getElementById('H').play(); break; case 73: document.getElementById('I').play(); break; case 74: document.getElementById('J').play(); break; case 75: document.getElementById('K').play(); break; case 76: document.getElementById('L').play(); break; case 77: document.getElementById('M').play(); break; case 78: document.getElementById('N').play(); break; case 79: document.getElementById('O').play(); break; case 80: document.getElementById('P').play(); break; case 81: document.getElementById('Q').play(); break; case 82: document.getElementById('R').play(); break; case 83: document.getElementById('S').play(); break; case 84: document.getElementById('T').play(); break; case 85: document.getElementById('U').play(); break; case 86: document.getElementById('V').play(); break; case 87: document.getElementById('W').play(); break; case 88: document.getElementById('X').play(); break; case 89: document.getElementById('Y').play(); break; case 90: document.getElementById('Z').play(); break; default: console.log("Key is not found!"); }};

Our app is now complete! Congrats!

我们的应用程序现已完成！恭喜！

The main functionality of the app is finished, but there is still work to be done!

该应用程序的主要功能已完成，但仍有工作要做！

Polska ja！ (给我擦！) (Polska ja! (Polish me!))

Even though the app is functional it still lacks some things here and there.

即使该应用程序正常运行，它仍然缺少某些地方。

For example, within theindex.htmlfile, you can change the app’s title and the content for the main window.

例如，在index.html文件中，您可以更改应用程序的标题和主窗口的内容。

Moreover, the app has no design, no beautiful colors, and no pictures of either cats or dogs.

此外，该应用程序没有设计，没有漂亮的色彩，也没有猫或狗的照片。

Free your imagination and find ways to improve the app’s design.

释放您的想象力，并找到改善应用程序设计的方法。

The code isn’t perfect either. We have lots of identical code which can be optimized and improved. This will result in fewer lines of code and it’ll be less painful for the eyes.

该代码也不是完美的。我们有很多相同的代码可以优化和改进。这将导致更少的代码行，并且将减轻眼睛的痛苦。

Duplicate code is bad practice!

重复代码是不好的做法！

测试一下！只是测试一下！ (Test It! Just Test It!)

Good software must be thoroughly tested.

好的软件必须经过彻底的测试。

I suggest you begin by pressing every keyboard key to see what’s happening.

我建议您首先按下每个键盘键以查看发生了什么。

The best scenario is you will hear the audio for every keyboard key you have specified in the code. But what will happen when you press many keys in a row as fast as you can? What about keys that are not even supposed to be pressed like the Home and NumLock buttons?

最好的情况是，您将听到代码中指定的每个键盘按键的声音。但是，当您尽可能快地连续按下多个键时会发生什么？那什至不应该像Home和NumLock按钮那样被按下的键呢？

What if you minimize the app and try to press a key? Do you hear a sound? And what happens when you don’t have the app window selected and you press a keyboard key, do you still hear any sounds?

如果您最小化应用程序并尝试按一个键怎么办？你听到声音了吗？当您没有选择应用程序窗口并按键盘键时，还会听到任何声音吗？

The answer is unfortunately no.

不幸的是，答案是否定的。

This behavior is because of the architecture upon which Electron was built. It allows you to get global keys like you can do with the C# language, but you can’t register individual keystrokes. This is outside of the realm of normal use-cases for an electron application.

此行为是由于Electron所基于的体系结构。它使您可以像使用C＃语言一样获取全局密钥，但是您不能注册单个击键。这超出了电子应用的正常用例范围。

Run through the code line by line and try to break it. See what is happening and what kind of errors Electron is throwing. This exercise will help you become better at debugging. If you know the flaws of your app you then know how to fix them and make the app better.

逐行运行代码并尝试将其破坏。看看正在发生什么以及电子会引发什么样的错误。该练习将帮助您更好地进行调试。如果您知道应用程序的缺陷，那么您就会知道如何修复它们并使其变得更好。

In thefunctions.jsfile, I have intentionally used a deprecated JavaScript event. Can you spot it?

在functions.js文件中，我有意使用了不推荐使用JavaScript事件。你能发现吗？

Once you find it I would like you to think about how you can replace it without changing the app functionality.

找到它后，我希望您考虑如何在不更改应用功能的情况下将其替换。

Using deprecated code is bad practice and can lead to serious bugs you might not even know exist. Stay current with the documentation of the language to see what might have changed. Always stay up to date.

使用不推荐使用的代码是不好的做法，并且可能导致严重的错误，您甚至可能不知道存在。随时了解该语言的文档，以了解可能有所更改。始终保持最新。