用電子和角度構建桌面應用程序

構建跨平台桌面應用：Electron 和 Angular 的完美結合

本教程演示如何使用 Electron 和 Angular 構建跨平台桌面應用程序。 Electron.js 是一個流行的平台，用於使用 JavaScript、HTML 和 CSS 創建適用於 Windows、Linux 和 macOS 的桌面應用程序。它利用 Google Chromium 和 Node.js 等強大的平台，並提供自己的一套 API 用於與操作系統交互。

我們將學習如何安裝 Angular CLI，創建一個新的 Angular 項目，並從 npm 安裝最新版本的 Electron 作為開發依賴項。教程還包括創建 GUI 窗口和加載 index.html 文件的代碼片段，將 main.js 文件設置為主要入口點，以及在構建 Angular 項目後添加一個啟動 Electron 應用程序的腳本。

此外，我們將學習如何使用 IPC（進程間通信）從 Angular 調用 Electron API，這允許不同進程之間的通信。我們將演示如何從 Angular 應用程序調用 BrowserWindow API，以及如何創建一個子模態窗口，在其中加載 URL，並在準備好時顯示它。

Electron 的優勢

Electron 使用 Google Chromium 和 Node.js 等強大的平台，同時提供豐富的 API 來與底層操作系統交互。它提供一個原生容器來封裝 Web 應用，使其外觀和感覺像桌面應用，並能訪問操作系統功能（類似於 Cordova 用於移動應用）。這意味著我們可以使用任何 JavaScript 庫或框架來構建我們的應用程序。本教程中，我們將使用 Angular。

前提條件

本教程需要滿足以下前提條件：

• 熟悉 TypeScript 和 Angular。
• 在開發機器上安裝 Node.js 和 npm。

安裝 Angular CLI

首先，安裝 Angular CLI，這是創建和使用 Angular 項目的官方工具。打開一個新的終端並運行以下命令：

npm install -g @angular/cli

我們將全局安裝 Angular CLI。如果命令因 EACCESS 錯誤而失敗，請在 Linux 或 macOS 中在命令前添加 sudo，或在 Windows 中以管理員身份運行命令提示符。

如果 CLI 安裝成功，請導航到您的工作目錄，並使用以下命令創建一個新的 Angular 項目：

cd ~
ng new electron-angular-demo

等待項目文件生成和依賴項從 npm 安裝。接下來，導航到項目的根目錄，並運行以下命令從 npm 安裝最新版本的 Electron 作為開發依賴項：

npm install --save-dev electron@latest

截至撰寫本文時，此命令將安裝 Electron v4.1.4。

創建 main.js 文件

接下來，創建一個 main.js 文件並添加以下代碼：

npm install -g @angular/cli

此代碼只需創建一個 GUI 窗口並加載 index.html 文件（在構建 Angular 應用程序後，該文件應在 dist 文件夾下可用）。此示例代碼改編自官方入門存儲庫。

配置 package.json

接下來，打開項目的 package.json 文件，並添加 main 密鑰以將 main.js 文件設置為主要入口點：

cd ~
ng new electron-angular-demo

添加啟動腳本

接下來，我們需要添加一個腳本，以便在構建 Angular 項目後輕鬆啟動 Electron 應用程序：

npm install --save-dev electron@latest

我們添加了 start:electron 腳本，它運行 ng build --base-href ./ && electron . 命令：

• 命令的 ng build --base-href ./ 部分構建 Angular 應用程序並將 base href 設置為 ./。
• 命令的 electron . 部分從當前目錄啟動我們的 Electron 應用程序。

現在，在您的終端中，運行以下命令：

const {app, BrowserWindow} = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

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

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

將打開一個 Electron GUI 窗口，但它將是空白的。在控制台中，您將看到“不允許加載本地資源：/electron-angular-demo/dist/index.html”錯誤。

Electron 無法從 dist 文件夾加載文件，因為它根本不存在。如果您查看項目的文件夾，您會看到 Angular CLI 將您的應用程序構建在 dist/electron-angular-demo 文件夾中，而不是 dist 文件夾中。

在我們的 main.js 文件中，我們告訴 Electron 在沒有子文件夾的 dist 文件夾中查找 index.html 文件：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

__dirname 指的是我們運行 Electron 的當前文件夾。

我們使用 path.join() 方法將當前文件夾的路徑與 /dist/index.html 路徑連接起來。

您可以將路徑的第二部分更改為/dist/electron-angular-demo/index.html，或者更好的是，更改Angular 配置以在dist 文件夾中輸出文件，而無需使用子文件夾。

打開 angular.json 文件，找到 projects → architect → build → options → outputPath 密鑰並將它的值從 dist/electron-angular-demo 更改為 dist：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

返回您的終端並再次運行以下命令：

npm run start:electron

該腳本將調用 ng build 命令在 dist 文件夾中構建 Angular 應用程序，並從當前文件夾調用 electron 以啟動加載了 Angular 應用程序的 Electron 窗口。

這是我們的桌面應用程序運行 Angular 的屏幕截圖：

(以下內容與原文保持一致，只是對段落和標題進行了一些調整，使其更易於閱讀和理解。)

從 Angular 調用 Electron API

現在讓我們看看如何從 Angular 調用 Electron API。

Electron 應用程序使用運行 Node.js 的主進程和運行 Chromium 瀏覽器的渲染器進程。我們無法直接從 Angular 應用程序訪問所有 Electron 的 API。

我們需要使用 IPC 或進程間通信，這是操作系統提供的一種機制，允許不同進程之間的通信。

並非所有 Electron API 都需要從主進程訪問。一些 API 可以從渲染器進程訪問，一些 API 可以從主進程和渲染器進程訪問。

BrowserWindow（用於創建和控制瀏覽器窗口）僅在主進程中可用。 desktopCapturer API（用於使用 navigator.mediaDevices.getUserMedia API 從桌面捕獲音頻和視頻）僅在渲染器進程中可用。同時，剪貼板 API（用於在系統剪貼板上執行複制和粘貼操作）在主進程和渲染器進程中都可用。

您可以從官方文檔中查看完整的 API 列表。

讓我們看看從 Angular 應用程序調用 BrowserWindow API（僅在主進程中可用）的示例。

打開 main.js 文件並導入 ipcMain：

npm install -g @angular/cli

接下來，定義 openModal() 函數：

cd ~
ng new electron-angular-demo

此方法將創建一個子模態窗口，在其中加載 https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a URL，並在準備好時顯示它。

接下來，偵聽來自渲染器進程發送的 openModal 消息，並在收到消息時調用 openModal() 函數：

npm install --save-dev electron@latest

現在，打開 src/app/app.component.ts 文件並添加以下導入：

const {app, BrowserWindow} = require('electron')
const url = require("url");
const path = require("path");

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
  // 打开开发者工具
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

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

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

接下來，定義一個 ipc 變量並調用 require('electron').ipcRenderer 以在您的 Angular 組件中導入 ipcRenderer：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}

require() 方法由 Electron 在運行時注入到渲染器進程中，因此它僅在 Electron 中運行 Web 應用程序時可用。

最後，添加以下 openModal() 方法：

{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && electron ."
  },
  // [...]
}

我們使用 ipcRenderer 的 send() 方法向主進程發送 openModal 消息。

打開 src/app/app.component.html 文件並添加一個按鈕，然後將其綁定到 openModal() 方法：

npm run start:electron

現在，使用以下命令運行您的桌面應用程序：

mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

這是帶有按鈕的主窗口的屏幕截圖：

如果您單擊“打開模態”按鈕，應該會打開一個帶有 SitePoint 網站的模態窗口：

您可以從此 GitHub 存儲庫中找到此演示的源代碼。

結論

在本教程中，我們研究瞭如何使用 Electron 將使用 Angular 構建的 Web 應用程序作為桌面應用程序運行。我們希望您已經了解了使用 Web 開發工具包開始構建桌面應用程序是多麼容易！

(以下內容為原文FAQs部分，略作調整，使其更符合中文表達習慣。)

常見問題解答 (FAQs)

如何調試 Electron 和 Angular 應用程序？

調試是開發過程中的一個重要部分。對於 Electron 和 Angular 應用程序，您可以使用 Chrome 開發者工具。要打開開發者工具，您可以使用快捷鍵 Ctrl Shift I，也可以在 main.js 文件中添加一行代碼：mainWindow.webContents.openDevTools()。這將在應用程序啟動時打開開發者工具。然後，您可以像在 Web 應用程序中一樣檢查元素、查看控制台日誌和調試代碼。

如何打包 Electron 和 Angular 應用程序以進行分發？

可以使用 electron-packager 或 electron-builder 將 Electron 和 Angular 應用程序打包以進行分發。這些工具可幫助您將應用程序打包到適用於不同操作系統的可執行文件中。您可以自定義應用程序的名稱、說明、版本等。您需要將這些包安裝為 devDependencies，然後在 package.json 文件中添加一個腳本以運行打包命令。

能否在 Electron 中使用 Angular Material？

可以。 Angular Material 是一個 UI 組件庫，它在 Angular 中實現了 Material Design。它提供各種預構建的組件，您可以使用這些組件來創建用戶友好且響應迅速的應用程序。要使用 Angular Material，您需要使用 npm 或 yarn 安裝它，然後在應用程序中導入必要的模塊。

如何在 Electron 和 Angular 中處理文件系統操作？

Electron 提供了一個名為 fs（文件系統）的內置模塊，您可以使用它來處理文件系統操作，例如讀取和寫入文件。您可以在 Electron 應用程序的主進程中使用它。但是，如果您想在渲染器進程（Angular）中使用它，則需要使用 Electron 的 IPC（進程間通信）在主進程和渲染器進程之間進行通信。

如何在 Electron 和 Angular 應用程序中使用 Node.js 模塊？

Electron 允許您在應用程序中使用 Node.js 模塊。您可以在主進程中直接使用它們。但是，如果您想在渲染器進程（Angular）中使用它們，則需要在 Electron 配置中啟用 nodeIntegration。請注意，如果您的應用程序加載遠程內容，啟用 nodeIntegration 會帶來安全風險，因此建議使用更安全的選項，例如 contextIsolation 和預加載腳本。

如何更新 Electron 和 Angular 應用程序？

可以使用 Electron 的 autoUpdater 模塊來更新 Electron 和 Angular 應用程序。此模塊允許您在後台自動下載和安裝更新。您還可以提供一個用戶界面，供用戶手動檢查更新。

能否將 Angular CLI 與 Electron 一起使用？

可以。 Angular CLI 是 Angular 的命令行界面，可幫助您創建、開發和維護 Angular 應用程序。您可以使用它來生成組件、服務、模塊等等。您也可以在使用 Electron 運行之前使用它來構建 Angular 應用程序。

如何保護 Electron 和 Angular 應用程序的安全？

保護 Electron 和 Angular 應用程序的安全對於保護用戶數據至關重要。 Electron 提供了一些安全建議，例如啟用 contextIsolation、禁用 nodeIntegration、使用沙箱模式等等。您還應該遵循 Angular 的安全最佳實踐，例如清理用戶輸入、使用 Https 協議等等。

如何測試 Electron 和 Angular 應用程序？

可以使用 Jasmine 和 Karma（用於 Angular）以及 Spectron（用於 Electron）等測試框架來測試 Electron 和 Angular 應用程序。這些框架允許您編寫單元測試和端到端測試，以確保應用程序按預期工作。

能否將 Electron 與其他框架或庫一起使用？

可以。 Electron 與框架無關，這意味著您可以將其與任何 JavaScript 框架或庫一起使用。除了 Angular 之外，您還可以將其與 React、Vue.js、Svelte 等等一起使用。如果您願意，也可以將其與原生 JavaScript 一起使用。

以上是用電子和角度構建桌面應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！