电子概论

了解Electron的基础知识,EGitHub是由GitHub构建的框架,可为许多创新且非常流行的跨平台应用程序提供支持

Electron是一个开放源代码和免费的构建工具跨平台桌面应用由GitHub构建的JS,HTML和CSS

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

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

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

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

直到2014年Electron发行。

快速了解电子内部

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

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

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

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

您可以使用Electron创建哪种应用

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

  • 常规应用,带有停靠图标和一个窗口
  • 菜单栏应用程序,没有任何停靠图标
  • 守护程序
  • 命令行实用程序

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

电子API应用程序

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

Electron app demo

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

Electron app demo

如何创建您的第一个Electron应用程序

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

npm init -y

创建一个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"
}

将此行添加到scripts部分:

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

现在安装Electron:

npm install -D electron

电子现在可以用

npm start

但是,如果您这样做,将会看到一条错误消息,告诉您没有index.js文件,这就是我们在package.json文件是我们应用程序的主要起点:

Hello World Electron GUI应用程序!

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

创建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)

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>

现在再次运行yarn start,此窗口应显示:

Activity monitor

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

使应用程序开发人员的生活更轻松

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

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

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


更多devtools教程: