使用 Electron 和 Angular 构建桌面应用程序

在本教程中，我们将使用 Electron 和 Web 技术（如 TypeScript 和 Angular）构建一个跨平台的桌面应用程序。

Electron.js 是一个流行的平台，用于使用 JavaScript，HTML 和 CSS 构建适用于 Windows，Linux 和 macOS 的跨平台桌面应用程序。它由 GitHub 创建和维护，并且可以在 MIT 许可许可下使用。它最初是为 GitHub 的 Atom 编辑器创建的，但后来被用于创建 Microsoft（Visual Studio Code），Facebook，Slack 和 Docker 等公司的应用程序。

Electron 利用 Google Chromium 和 Node.js 等强大的平台，还提供了自己的一套丰富的 API，用于与底层操作系统进行交互。

Electron 提供了一个包装网络应用程序的本机容器，因此它们看起来和感觉就像可以访问操作系统功能的桌面应用程序（类似于移动应用程序的 Cordova）。这意味着我们可以使用任何 JavaScript 库或框架来构建我们的应用程序。在本教程中，我们将使用 Angular。

先决条件

对于本教程，您需要满足以下先决条件：

• 熟悉 TypeScript 和 Angular。

• Node.js 和 npm 安装在您的开发机器上。

安装 Angular CLI

让我们开始安装 Angular CLI，这是创建和使用 Angular 项目的官方工具。打开一个新终端并运行以下命令：

npm install -g @angular/cli

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

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

cd ~
ng new electron-angular-demo

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

npm install --save-dev electron@latest

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

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

    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
        })
      );
      // Open the DevTools.
      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()
    })

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

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

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

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

    {
      "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 ."
      }, 
      // [...]
    }

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

• 该 ng build --base-href ./ 命令的一部分构建 Angular 应用程序并将基本 href 设置为./。

• 该 electron . 命令的一部分从当前目录启动我们的 Electron 应用程序。

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

npm run start:electron

电子 GUI 窗口将打开，但将为空白。在控制台中，您将看到 不允许加载本地资源：/electron-angular-demo/dist/index.html 错误。

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

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

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

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

      "projects": {
        "electron-angular-demo": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist", 

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

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.getUserMediaAPI） 仅在渲染过程中可用。同时，主要和渲染器进程都可以使用剪贴板 API（用于在系统剪贴板上执行复制和粘贴操作）。

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

让我们看一下 BrowserWindow 从 Angular 应用程序调用 API 的示例，该 API 仅在主进程中可用。

打开 main.js 文件并导入 ipcMain：

    const {app, BrowserWindow, ipcMain} = require('electron')

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

    function openModal(){
      const { BrowserWindow } = require('electron');
      let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false })
      modal.loadURL('https://www.sitepoint.com')
      modal.once('ready-to-show', () => {
        modal.show()
      })
    }

此方法将创建一个子模态窗口，在其中加载 https://www.sitepoint.comURL，并在准备好后显示它。

接下来，侦听 openModal 将从呈现器进程发送的消息，并在 openModal()收到消息时调用该函数：

    ipcMain.on('openModal', (event, arg) => {
      openModal()
    })

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

import { IpcRenderer } from 'electron';

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

      private ipc: IpcRenderer
      constructor(){
        if ((<any>window).require) {
          try {
            this.ipc = (<any>window).require('electron').ipcRenderer;
          } catch (e) {
            throw e;
          }
        } else {
          console.warn('App not running inside Electron!');
        }
      }

该 require()方法在 Electron 的渲染器过程中在运行时注入，因此，只有在 Electron 中运行 Web 应用程序时才能使用该方法。

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

      openModal(){
        console.log("Open a modal");
        this.ipc.send("openModal");
      }

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

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

    <button (click)="openModal()">
      Open Modal
    </button>

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

npm run start:electron

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

如果单击**“ 打开模态”**按钮，则应使用 SitePoint 网站打开模式窗口：

您可以从此 GitHub 存储库中找到此演示的源代码。

结论

在本教程中，我们研究了如何使用 Electron 运行使用 Angular 构建的 Web 应用程序作为桌面应用程序。我们希望您已经了解了使用 Web 开发工具包开始构建桌面应用程序是多么容易！