操作系统概论电子版

Electron is an Open Source and free tool for building cross-platform desktop apps with JS, HTML and CSS, built by GitHub

Electron是一个开源和免费工具，用于通过GitHub构建带有JS，HTML和CSS的跨平台桌面应用程序

It’s very popular and hugely successful applications use it, including VS Code, Slack, Discord and many, many more.

它非常流行，并且成功使用了它的应用程序，包括VS Code，Slack，Discord等等。

Electron is a huge project that revolutionized native desktop app development, by making it viable to be a JavaScript-based process.

Electron是一个巨大的项目，通过使其成为基于JavaScript的流程成为可能，从而彻底改变了本机桌面应用程序的开发。

Mind you: it was possible to write JavaScript-based desktop applications even before Electron, with other tools, but Electron made it much more mainstream.

请注意：即使在Electron之前，也可以使用其他工具编写基于JavaScript的桌面应用程序，但是Electron使其变得更加主流。

And in particular Electron allowed to create cross-platform desktop apps. Before, there was no tool that could let you run the same app everywhere.

特别是Electron允许创建跨平台的桌面应用程序。 以前，没有工具可以让您在任何地方运行相同的应用程序。

Until 2014, when Electron was released.

直到2014年Electron发行。

快速了解电子内部 (A quick look into the Electron internals)

Electron is basically bundling the Chromium rendering library and Node.js (Chromium the open source project made by Google, on which they build the Chrome browser).

Electron基本上将Chromium渲染库和Node.js(Chromium是Google制作的开放源代码项目，用于构建Chrome浏览器)捆绑在一起。

You have both access to a canvas powered by Chromium, which runs the V8 JavaScript engine, and use any Node.js package, and run your own Node.js code.

您都可以访问由Chromium驱动的画布，该画布运行V8 JavaScript引擎，并且可以使用任何Node.js程序包并运行自己的Node.js代码。

It’s a sort of Node.js for the desktop, if you wish. It does not provide any kind of GUI elements, but rather lets you create UIs using HTML, CSS and JavaScript.

如果您愿意的话，这是一种用于桌面的Node.js。 它不提供任何类型的GUI元素，而是允许您使用HTML，CSS和JavaScript创建UI。

Electron aims to be fast, small in size, and as slim as possible, yet providing the core features that all apps can rely upon.

Electron的目标是快速，小巧和纤薄，同时提供所有应用程序都可以依赖的核心功能。

您可以使用Electron创建哪种应用 (Which kind of apps you can create using Electron)

You can create lots of different kind of apps, including:

您可以创建许多不同类型的应用，包括：

• regular apps, with a dock icon, and a window
  常规应用，带有停靠图标和一个窗口
• menu bar apps, which don’t have any dock icon
  菜单栏应用，没有任何停靠图标
• daemons
  守护程序
• command line utilities
  命令行实用程序

A good collection of Electron apps is available on the official site: https://electronjs.org/apps. With Electron you can create apps and publish them on the Windows and Mac App Store.

官方网站上提供了大量电子应用程序： https : //electronjs.org/apps 。 使用Electron，您可以创建应用程序并将其发布在Windows和Mac App Store中。

电子API应用程序 (The Electron APIs app)

You can download the Electron API Demos app, which is an official sample desktop app built using Electron.

您可以下载Electron API演示应用程序 ，这是使用Electron构建的官方示例桌面应用程序。

The app is pretty cool and it lets you experiment with several features of Electron. It’s open source, and the code is available at https://github.com/electron/electron-quick-start.

该应用程序非常酷，它使您可以尝试Electron的多个功能。 它是开源的，其代码可从https://github.com/electron/electron-quick-start获得 。

如何创建您的第一个电子应用程序 (How to create your first Electron app)

First, create a new folder on your filesystem and into it run:

首先，在文件系统上创建一个新文件夹，然后运行：

npm init -y

to create a package.json file:

创建一个package.json文件：

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add this line in the scripts section:

在scripts部分中添加以下行：

"scripts": {
  "start": "electron ."
}

Now install Electron:

现在安装Electron：

npm install -D electron

Electron can now be started with

电子现在可以用

npm start

However if you do you will see an error telling you there’s no index.js file, which is what we wrote in the package.json file to be the main starting point of our app:

但是，如果您这样做，将会看到一条错误消息，告诉您没有index.js文件，这是我们在package.json文件中编写的内容，它是我们应用程序的主要起点：

Hello World Electron GUI应用程序！ (An Hello World Electron GUI app!)

Let’s create an application that shows an Hello World in a window.

让我们创建一个在窗口中显示Hello World的应用程序。

Create 2 files, main.js:

创建2个文件main.js ：

const { app, BrowserWindow } = require('electron')

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

and index.html:

和index.html ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>

Now run again yarn start, and this window should show up:

现在再次运行yarn start ，将显示以下窗口：

This is a very simple one-window app, and when you close this window, the application exits.

这是一个非常简单的单窗口应用程序，当您关闭此窗口时，该应用程序将退出。

使应用程序开发人员的生活更轻松 (Making app developer’s life easier)

Electron aims to make the developer’s life easier. Applications have lots of problems in common. They need to perform things that the native APIs sometimes make a little bit more complicated that one might imagine.

Electron旨在简化开发人员的生活。 应用程序有很多共同的问题。 他们需要执行某些本机API有时会使人们想象不到的复杂的事情。

Electron provides an easy way to manage In-App Purchases, Notifications, Drag and Drop, managing key shortcuts and much more.

Electron提供了一种简单的方法来管理应用内购买 ，通知，拖放，管理快捷键等。

It also provides a hosted service for app updates, to make updating your apps much simpler than if you had to build such as service yourself.

它还提供了用于应用程序更新的托管服务 ，从而使您的应用程序更新比必须自己构建诸如服务之类的简单得多。

翻译自: https://flaviocopes.com/electron/

操作系统概论电子版