電子概論

了解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教程: