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

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 Type will 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 https://github.com/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

electron-quick-start