用电子和角度构建桌面应用程序

构建跨平台桌面应用：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 项目的官方工具。打开一个新的终端并运行以下命令：

<code class="language-bash">npm install -g @angular/cli</code>

我们将全局安装 Angular CLI。如果命令因 EACCESS 错误而失败，请在 Linux 或 macOS 中在命令前添加 sudo，或在 Windows 中以管理员身份运行命令提示符。

如果 CLI 安装成功，请导航到您的工作目录，并使用以下命令创建一个新的 Angular 项目：

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

等待项目文件生成和依赖项从 npm 安装。接下来，导航到项目的根目录，并运行以下命令从 npm 安装最新版本的 Electron 作为开发依赖项：

<code class="language-bash">npm install --save-dev electron@latest</code>

截至撰写本文时，此命令将安装 Electron v4.1.4。

创建 main.js 文件

接下来，创建一个 main.js 文件并添加以下代码：

<code class="language-bash">npm install -g @angular/cli</code>

此代码只需创建一个 GUI 窗口并加载 index.html 文件（在构建 Angular 应用程序后，该文件应在 dist 文件夹下可用）。此示例代码改编自官方入门存储库。

配置 package.json

接下来，打开项目的 package.json 文件，并添加 main 密钥以将 main.js 文件设置为主要入口点：

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

添加启动脚本

接下来，我们需要添加一个脚本，以便在构建 Angular 项目后轻松启动 Electron 应用程序：

<code class="language-bash">npm install --save-dev electron@latest</code>

我们添加了 start:electron 脚本，它运行 ng build --base-href ./ && electron . 命令：

• 命令的 ng build --base-href ./ 部分构建 Angular 应用程序并将 base href 设置为 ./。
• 命令的 electron . 部分从当前目录启动我们的 Electron 应用程序。

现在，在您的终端中，运行以下命令：

<code class="language-javascript">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()
})</code>

将打开一个 Electron GUI 窗口，但它将是空白的。在控制台中，您将看到“不允许加载本地资源：/electron-angular-demo/dist/index.html”错误。

Electron 无法从 dist 文件夹加载文件，因为它根本不存在。如果您查看项目的文件夹，您会看到 Angular CLI 将您的应用程序构建在 dist/electron-angular-demo 文件夹中，而不是 dist 文件夹中。

在我们的 main.js 文件中，我们告诉 Electron 在没有子文件夹的 dist 文件夹中查找 index.html 文件：

<code class="language-json">{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}</code>

__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：

<code class="language-json">{
  "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 ."
  },
  // [...]
}</code>

返回您的终端并再次运行以下命令：

<code class="language-bash">npm run start:electron</code>

该脚本将调用 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：

<code class="language-bash">npm install -g @angular/cli</code>

接下来，定义 openModal() 函数：

<code class="language-bash">cd ~
ng new electron-angular-demo</code>

此方法将创建一个子模态窗口，在其中加载 https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a URL，并在准备好时显示它。

接下来，侦听来自渲染器进程发送的 openModal 消息，并在收到消息时调用 openModal() 函数：

<code class="language-bash">npm install --save-dev electron@latest</code>

现在，打开 src/app/app.component.ts 文件并添加以下导入：

<code class="language-javascript">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()
})</code>

接下来，定义一个 ipc 变量并调用 require('electron').ipcRenderer 以在您的 Angular 组件中导入 ipcRenderer：

<code class="language-json">{
  "name": "electron-angular-demo",
  "version": "0.0.0",
  "main": "main.js",
  // [...]
}</code>

require() 方法由 Electron 在运行时注入到渲染器进程中，因此它仅在 Electron 中运行 Web 应用程序时可用。

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

<code class="language-json">{
  "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 ."
  },
  // [...]
}</code>

我们使用 ipcRenderer 的 send() 方法向主进程发送 openModal 消息。

打开 src/app/app.component.html 文件并添加一个按钮，然后将其绑定到 openModal() 方法：

<code class="language-bash">npm run start:electron</code>

现在，使用以下命令运行您的桌面应用程序：

<code class="language-javascript">mainWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);</code>

这是带有按钮的主窗口的屏幕截图：

如果您单击“打开模态”按钮，应该会打开一个带有 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中文网其他相关文章！