/

介紹 Electron

介紹 Electron

了解 Electron，這是由 GitHub 開發的跨平台框架，用於建立創新且非常受歡迎的跨平台應用程式。

Electron 是一個使用 JS、HTML 和 CSS 來建立跨平台桌面應用程式的免費開源工具，由 GitHub 開發。

許多非常受歡迎且成功的應用程式都使用了 Electron，包括 VS Code、Slack、Discord 等等。

Electron 是一個宏大的專案，它革命性地改變了原生桌面應用程式的開發方式，使之成為可能以 JavaScript 為基礎的過程。

需要注意的是：在 Electron 出現之前，已經有其他工具可以用 JavaScript 來開發桌面應用程式，但 Electron 讓這種開發方式更加普及。

尤其是 Electron 可以用於建立跨平台的桌面應用程式。在此之前，沒有任何工具可以讓你在不同平台上運行相同的應用程式。

直到 2014 年，Electron 首次發布。

快速了解 Electron 的內部結構

Electron 基本上是將 Chromium 渲染庫和 Node.js 打包在一起（Chromium 是由 Google 開源的專案，用於構建 Chrome 瀏覽器）。

你既可以使用由 Chromium 提供的畫布，運行 V8 JavaScript 引擎，也可以使用任何 Node.js 套件並運行自己的 Node.js 代碼。

你可以把它想象成桌面版的 Node.js。它本身不提供任何 GUI 元素，而是讓你使用 HTML、CSS 和 JavaScript 來創建使用者界面。

Electron 旨在提供核心功能，同時保持速度快、體積小、精簡。這些核心功能可以滿足所有應用程式的需求。

你可以使用 Electron 創建哪些類型的應用程式

你可以創建各種不同類型的應用程式，包括：

  • 常規應用程式，具有 dock 圖標和窗口
  • 菜單列應用程式，不會出現在 dock 中
  • 守護進程
  • 命令行實用程序

在官方網站上有很多 Electron 應用程式的收藏：https://electronjs.org/apps。使用 Electron，您可以創建應用程式並將其發布到 Windows 和 Mac App Store。

Electron APIs 應用程式

你可以下載 Electron API 示範應用程式，這是一個使用 Electron 建立的官方示範應用程式。

Electron 應用程式演示

這個應用程式非常酷，它可以讓你體驗 Electron 的多個功能。它是開源的，代碼可以在 https://github.com/electron/electron-quick-start 上找到。

Electron 應用程式演示

如何創建你的第一個 Electron 應用程式

首先，在你的檔案系統中創建一個新文件夾，然後在其中運行：

1
npm init -y

以創建一個 package.json 檔案：

1
2
3
4
5
6
7
8
9
10
11
12
{
 "name": "testelectron",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

在 scripts 部分中添加以下行：

1
2
3
"scripts": {
 "start": "electron ."
}

現在安裝 Electron：

1
npm install -D electron

可以使用以下命令啟動 Electron：

1
npm start

然而，如果你這麼做，你會看到一個錯誤，告訴你沒有 index.js 檔案，這是我們在 package.json 中指定的應用程式的主要起始點：

一個簡單的 Electron GUI 應用程式示例！

讓我們創建一個在窗口中顯示 “Hello World” 的應用程式。

創建兩個文件，main.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const { app, BrowserWindow } = require('electron')

function createWindow() {
 // 創建瀏覽器窗口。
 const win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true,
 },
 })

 // 加載應用程式的 index.html。
 win.loadFile('index.html')
}

app.whenReady().then(createWindow)

index.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>

現在再次運行 npm start，應該會出現以下窗口：

Activity monitor

這是一個非常簡單的單窗口應用程式，當你關閉這個窗口時，應用程式也會退出。

簡化應用程式開發者的生活

Electron 致力於讓開發者的生活變得更輕鬆。應用程式通常有許多共同問題。有時候，與原生 API 相比，執行某些任務可能會更加複雜。

Electron 提供了一種簡單的方式來管理應用程式內部購買、通知、拖放、管理快捷鍵等等。

它還提供了一個托管的應用程式更新服務，使你的應用程式更新變得比你自己構建這樣的服務更加簡單。

tags: [“Electron”, “JavaScript”, “HTML”, “CSS”, “framework”]