【Electron】Electron入門實現

Electron 學習筆記

Electron 是一個開源框架，允許開發者使用網頁技術（HTML、CSS 和 JavaScript）來構建跨平臺的桌面應用程序。它由 GitHub 開發并維護，最初是為了支持開發 Atom 編輯器。Electron 結合了 Chromium（用于呈現網頁內容）和 Node.js（用于與操作系統交互），因此開發者可以利用大量現有的網頁開發技術和工具來構建桌面應用。

Electron 的主要特點有：

跨平臺支持：Electron 應用可以運行在 Windows、macOS 和 Linux 系統上。
使用網頁技術：開發者可以使用熟悉的 HTML、CSS 和 JavaScript 來創建應用程序的用戶界面。
與操作系統交互：通過 Node.js，Electron 應用可以與底層操作系統進行交互，執行文件系統操作、網絡請求等。
自動更新：Electron 提供了自動更新的功能，可以輕松地發布和分發應用的更新版本。
打包和發布：Electron 提供工具將應用程序打包成獨立的可執行文件，以便于分發。

0.前提條件

在使用 Electron 進行開發之前，需要安裝 node.js，使用如下命令進行檢查。

node -v
npm -v

在這里插入圖片描述

注意因為 Electron 將 Node.js 嵌入到其二進制文件中，因此應用運行時的 Node.js 版本與你系統中運行的 Node.js 版本無關。

1.`Electron` 應用程序的創建

1.1 使用腳手架

Electron 應用程序遵循與其他 Node.js 項目相同的結構，首先創建一個文件夾并初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init

在這里插入圖片描述

npm init 初始化命令會設置項目的相關值，生成一個 package.json 的配置文件，但在 electron.js 項目中有以下兩點需要注意：

entry point 是項目的入口文件，這個文件必須存在。
author 與 description 可以任意設置，但對于 electron 應用的打包來說，是必填項。

因此，實際的 package.json 應該是如下的內容：

{"name": "my-electron-app","version": "1.0.0","description": "this is a electron demo.","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "euansu","license": "ISC"
}

然后，使用如下命令，將 electron 包安裝到應用的開發依賴中。

npm install --save-dev electron
# 過程中安裝 electron 可能會失敗，執行如下兩行命令
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install --save-dev electron

1.2 運行主進程

Electron 配置了入口文件，這個文件控制了主進程，，它運行在一個完整的 Node.js 環境中，負責控制您應用的生命周期，顯示原生界面，執行特殊操作并管理渲染器進程。

這里首先是創建入口文件，內容如下所示：

// 引入electron應用和瀏覽器窗口
const { app, BrowserWindow } = require('electron');// 創建瀏覽器窗口
const createWindow = () => {// 瀏覽器窗口實例const mainWindow = new BrowserWindow({width: 600,height: 400,title: 'EuanSu的第一個Electron應用',autoHideMenuBar: true});// 加載頁面// mainWindow.loadURL('http://www.baidu.com')// 加載本地文件mainWindow.loadFile('index.html');
};// 當app準備好的時候，調用創建窗口函數
// 在 Electron 中，只有在 app 模塊的 ready 事件被激發后才能創建瀏覽器窗口。
app.on('ready', () => {createWindow();
});// 當窗口關閉的時候，退出electron應用
app.on('window-all-closed', () => app.quit());

簡單編寫一個 html 文件，內容如下所示：

<h1>Hello electron!</h1>

其次，需要配置 script 操作，如下所示，修改 package.json 文件的 scripts 內容。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "electron ."
},

配置完成后，在終端環境，執行 npm start 啟動 electron 應用。

npm start

在這里插入圖片描述

出現一個應用程序的窗口，內容如下所示：

在這里插入圖片描述

1.3 管理窗口的聲明周期

應用程序的窗口在不同的操作系統下有不同的行為，Electron 將在 app 中實現這些行為的責任交給開發者來實現，也即開發者可以使用 進程 全局的 platform 屬性來專門為某些操作系統運行代碼。

1.3.1 關閉所有窗口時退出應用（`Windows` & `Linux`）

Windows 和 Linux 操作系統上，關閉所有窗口通常會完全退出一個應用程序。

使用 app.on 監聽當前是否處于 window-all-closed（所有窗口被關閉）場景，如果用戶不是在 macOS 上運行程序，則調用 app.quit()。

app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

1.3.2 如果沒有窗口打開則打開一個窗口（`macOS`）

Linux 和 Windows 應用在沒有窗口打開的場景，認為應用是退出狀態。macOS應用通常在沒有打開任何窗口的情況下也繼續運行，并且在沒有窗口可用的情況下激活應用時會打開新的窗口。

為了實現這一特性，監聽 app 模塊的 activate 事件，如果沒有任何應用窗口是打開的，則調用 createWindow() 方法。

// app.whenReady() 等同于 app.on('ready',()=>{})
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

1.4 通過預加載腳本從渲染器訪問 `Node.js`

實現將 Node.js 和 Electron 的版本號以及以來信息輸出到 Electron 應用上。

這里以 Chromium 多進程架構做示范，當 Electron 應用主進程處于 read 狀態，應該做的是頁面的展示，而不是獲取 Node.js 以及相關的依賴信息，創建一個子進程，獲取對應的依賴信息，當主進程處于 ready 狀態，只需要考慮頁面的加載即可。

創建一個名為 preload.js(預加載) 的 JavaScript 文件，內容如下：


window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

如上代碼訪問 Node.js 的 process.version 對象，并運行一個基本的 replaceText 輔助函數將版本號插入到 HTML 文件中。

在 main.js 文件中使用 BrowserWindow 構造器加載 preload.js 文件。

const { app, BrowserWindow } = require('electron')
// 在你文件頂部導入 Node.js 的 path 模塊
const path = require('node:path')// 修改已有的 createWindow() 方法
const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})mainWindow.loadFile('index.html')
}
// ...

以上代碼有兩個 Node.js 的相關內容：

__dirname 字符串指向當前正在執行腳本的路徑，也即當前目錄。
path.join 將多個路徑連接在一起，創建一個符合不同操作系統的路徑字符串。

創建 index.html，內容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</body>
</html>

啟動 Electron 應用。

npm start

出現一個如下所示的窗口內容：

在這里插入圖片描述

2.打包并分發 `Electron` 應用程序

將 electron-builder 添加到應用的開發依賴中，
```
cnpm install --save-dev electron-builder
```

修改 package.json 項目配置文件，主要修改的內容如下所示：

  
// 增加build配置
"build": {"appId": "com.euansu.electron_example", // 應用程序的唯一標識符"productName": "electron_example", // 應用名稱"directories": {"output": "release" //打包輸出的目錄},"win": {"target": [{"target": "nsis", // 指定使用nsis作為安裝程序格式"arch": ["x64" // 生成 64 位按轉包]}]},"nsis":{"oneClick": false, // 安裝程序顯示安裝向導界面"allowToChangeInstallationDirectory": true // 允許用戶選擇安裝目錄}}