如何使用 Electron.js 构建包含 JavaScript、HTML 和 CSS 的桌面应用程序

介绍

嘿，朋友们！作为一名前端 Web 开发者，我一直对桌面应用的内部运作机制非常着迷。这能怪我吗？用代码创建文件界面或桌面主页的想法就像一道难题，总是能挠到我的脑袋里痒痒的。所以，我自然而然地决定深入探索桌面开发的世界，满足我的渴望。

在研究过程中，我发现了 Electron JS，这是一个开源框架，它允许开发者使用 Web 开发技术构建桌面应用。该框架基于 Chromium 和 Node.js 运行，并支持 JavaScript、HTML 和 CSS。最棒的是？它允许开发者构建可在 Mac、Windows 和 Linux 操作系统上运行的跨平台桌面应用。这真是太让我惊喜了！于是我像所有普通开发者一样，开始尝试这项新发现的技术！

本文涵盖了您需要了解的有关 Electron JS 的所有内容，从构建功能齐全的桌面应用程序到打包并发布给公众。无论您是桌面应用程序开发新手，还是希望扩展技能，本文都是您的宝贵资源。读完本文后，您将对如何使用 Electron JS 创建和发布您自己的桌面应用程序有深入的了解。

先决条件

为了轻松理解本文，建议您已经了解以下内容；

HTML
CSS
JavaScript

设置开发环境

首先，你需要一个代码编辑器。我将使用VSCode编辑器，但你可以使用任何你熟悉的编辑器。请按照以下步骤设置你的环境：

npmI.如果尚未安装Node.js 和Node 包管理器，请在您的计算机上安装它们。您可以从Node.js 官方网站下载它们。II
. 创建一个名为“项目”的新目录text-editor，并使用终端导航到该目录。复制以下代码即可完成此操作。



mkdir text-editor
cd text-editor

III.通过运行以下命令，使用 NPM 初始化一个新的 Node.js 项目：



npm init

IV. 输入命令后，系统会提示您回答一些关于项目的问题，例如名称、版本和描述。当系统提示您输入应用程序的入口点时，请输入main.js。您可以按 Enter 键接受大多数问题的默认值。

V.使用以下命令将 Electron 安装为开发依赖项：



npm install --save electron electron-dialog --save-dev

此命令安装 Electron JS 并将其作为依赖项保存在您的package.json文件中。

VI. 在项目目录中创建一个名为的新文件main.js。这将是应用程序的主入口点。使用以下代码执行此操作。



touch main.js

VII. 将以下代码添加到您的main.js文件以创建一个新的 Electron 窗口并加载一个基本的 HTML 文件：



const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

function createWindow() {
  let win = new BrowserWindow({ width: 800, height: 600 });
  win.loadFile('index.html');
}

app.on('ready', createWindow);

此代码从 Electron 包中导入 electron 模块，创建一个具有设置高度和宽度的新 Electron 窗口，并加载一个名为 index.html 的 HTML 文件。

VIII. 在您的项目目录中创建一个名为的新文件index.html，并添加以下基本 HTML 代码：



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Text Editor</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

您的文件夹结构应如下所示：

package.jsonIX.使用以下脚本更新您的文件。



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

该脚本npm通过运行 electron 命令并传入当前目录“.”作为参数来启动 Electron 应用程序。X
. 使用以下命令启动您的 Electron 应用程序：



npm start

此命令将启动您的应用程序，并index.html在屏幕上加载您之前创建的文件。如果一切顺利，您的屏幕应该会显示“Hello world”，如下图所示。

在下一节中，我们将构建文本编辑器应用程序的用户界面。

创建用户界面

此应用程序的用户界面将是一个简单的文本区域字段，并附加与文本编辑器相关的功能。完成本项目后，您将能够在编辑器中创建和保存新文件、编辑、复制、粘贴、添加快捷方式以及高亮显示文本。让我们开始吧。

index.htmlI.通过将代码更新为以下内容，向文件添加文本区域和按钮：



<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Text Editor</title>
  </head>
  <body>
    <div class="wrapper">
      <textarea id="editor" cols="60" rows="25"></textarea>
      <div class="button-container">
        <button id="openBtn">Open</button>
        <button id="saveBtn">Save</button>
      </div>
    </div>
    <script src="./renderer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </body>
</html>

II. 在根目录中创建一个style.css文件并添加以下代码来处理样式：



body{
    background: #202020;
    color: white;
    display: flex;
    width: 100%;
    height: 100%;
    place-items: center;
}
.wrapper{
    width: 50%;
    margin: 0 auto;
}
.button-container{
    display: flex;
    margin-top: 10px;
    gap: 15px;
}

#editor{
    background-color: #3e3e3e;
    color: white;

}
button{
    padding: 10px;
    color: white;
    background-color: rgb(10, 185, 164);
    border-radius: 10px;
    outline: none;
    cursor: pointer;

}
button:hover{
    background-color: rgb(7, 220, 195);
}

为了让您的应用程序具有 Windows 桌面外观和感觉，您应该选择Photon CSS。III .在与相同的目录中
创建一个名为的新文件，并添加以下代码来处理按钮单击事件：renderer.jsmain.js



const { ipcRenderer } = require("electron");

const editor = document.getElementById("editor");
const openBtn = document.getElementById("openBtn");
const saveBtn = document.getElementById("saveBtn");

openBtn.addEventListener("click", () => {
  ipcRenderer.send("open-file-dialog");
});

saveBtn.addEventListener("click", () => {
  const content = editor.value;
  ipcRenderer.send("save-file-dialog", content);
});
ipcRenderer.on("open-file", (event, filePath, fileContent) => {
  editor.value = fileContent;

});

基本的 Electron.js 架构需要两个主要文件，分别为main.js和renderer.js。 renderer.js 文件发送字符串消息，例如上面代码中的 "open-file-dialog"。该消息在 main.js 文件中接收，并执行该消息的事件处理。ipcRenderer向main.js文件发送消息以处理文件的打开和保存。

IV. 在main.js文件中，添加打开和保存文件的事件处理函数：



const { dialog, ipcMain } = require("electron");
const path = require("path");
const fs = require("fs");

ipcMain.on("open-file-dialog", (event) => {
  dialog
    .showOpenDialog({
      properties: ["openFile"],
    })
    .then((result) => {
      if (!result.canceled) {
        const filePath = result.filePaths[0];
        const fileContent = fs.readFileSync(filePath, "utf-8");
        ipcRenderer.send("get-file", fileContent);
        event.reply("open-file", filePath, fileContent);
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

ipcMain.on("save-file-dialog", (event, content) => {
  dialog
    .showSaveDialog({
      properties: ["createDirectory"],
    })
    .then((result) => {
        console.log('saved')
      if (!result.canceled) {
        console.log('saved result')
        const filePath = result.filePath;
        fs.writeFileSync(filePath, content, "utf-8");
        event.reply("save-file", filePath);
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

这段代码使用ipcMain处理程序调用桌面上的“文件打开对话框”。然后，它会向renderer.js文件发送一条消息，其中包含从新打开的文件中获取的文件内容。

V. 更新createWindow将 Web 偏好设置添加到 Electron 窗口的功能。这允许 Electron.js 访问窗口对象进行 DOM 操作：



function createWindow() {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });
  win.loadFile("index.html");
}
app.on("ready", createWindow);
}

完成这些更改后，您的 Electron 应用程序现在应该具备文本编辑器的基本功能。在下一节中，我们将在此基础上添加其他功能，例如格式选项（例如粗体、斜体、下划线）、语法高亮、自动完成以及搜索和替换功能。
您的应用程序目前应该如下图所示。

添加格式化功能

一个文本编辑器如果没有格式化文本的功能，那它还有什么用呢？在本节中，你将为项目添加格式化功能。

文本加粗

要将此功能添加到此应用程序，您需要在界面上添加一个按钮来触发该事件。在您的index.html文件中，通过添加以下内容来更新代码：



  <body>
    <div class="wrapper">
      <textarea id="editor" cols="60" rows="25"></textarea>
      <div class="button-container">
        <button id="openBtn">Open</button>
        <button id="saveBtn">Save</button>
        <button id="bold-btn"><b>B</b></button>
      </div>
    </div>
    <script src="./renderer.js"></script>
    <link rel="stylesheet" href="style.css" />
  </body>

新创建的按钮将用作粗体按钮。为此，在 renderer.js 文件中，为粗体按钮添加一个事件监听器，并相应地更新文本区域：



const boldBtn = document.getElementById('bold-btn');
boldBtn.addEventListener('click', () => {
  const start = editor.selectionStart;
  const end = editor.selectionEnd;
  const selectedText = editor.value.substring(start, end);
  const boldText = `<b>${selectedText}</b>`;
  const newText = editor.value.substring(0, start) + boldText + editor.value.substring(end);
  editor.value = newText;
});

此代码监听粗体按钮上的单击事件，获取文本区域中选定的文本，将其包装在<b>标签中以使其变为粗体，并使用新文本更新文本区域。

语法高亮

要实现语法高亮之类的高级功能，你需要一个名为的外部库Prism.js。使用方法如下：

index.htmlI.使用 Prism 库更新您的文件。



<script src="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/prism.js"></script>
<link      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism-okaidia.min.css" rel="stylesheet"/>

此代码将prism.js库添加到 HTML 文件，以便可以在项目中访问它。

II. 在您的renderer.js文件中，使用Prism.highlight()将语法高亮应用于文本编辑器的方法更新您的代码：



editor.addEventListener('input', () => {
  const code = editor.value;
  const highlightedCode = Prism.highlight(code, Prism.languages.javascript, 'javascript');
  editor.innerHTML = highlightedCode;
});

此代码监听文本编辑器上的输入事件，获取编辑器中的代码，使用Prism.jsJavaScript 语法突出显示代码，然后使用突出显示的代码更新编辑器。

III. 要检查高亮显示的代码，请在 index.html 文件中创建一个空段落：



  <p id="paragraph"></p>

IV. 在段落内添加突出显示的代码：



  editor.innerHTML = highlightedCode;
  paragraph.innerHTML = highlightedCode;

您的编辑器应该如下图所示。

自动完成

要在此项目中包含自动完成功能，您将需要另一个名为的 Javascript 库Ace.js。首先；

II. 将 Ace.js 库添加到您的 HTML 文件：



<head>
  <script src="ace.js"></script>
</head>

III. 在 renderer.js 文件中，创建一个 Ace 编辑器实例并为其添加自动完成功能：



const editor = ace.edit('editor');
editor.setOptions({
  enableBasicAutocompletion: true,
  enableSnippets: true,
  enableLiveAutocompletion: true,
});
const langTools = ace.require('ace/ext/language_tools');
const completer = {
  getCompletions: function(editor, session, pos, prefix, callback) {
    const completions = [
      {value: 'foo', score: 1000},
      {value: 'bar', score: 1000},
      {value: 'baz', score: 1000},
    ];
    callback(null, completions);
  }
};
langTools.addCompleter(completer);

这段代码创建了一个 Ace 编辑器实例，设置了自动补全选项，添加了一个包含所有可能补全选项的补全器对象，并将该补全器添加到编辑器中。当用户在编辑器中输入时，补全器会根据用户的输入显示一个建议列表。

撤消和重做

在任何文本编辑器中，撤消和重做操作的功能总是很有用的。将以下代码添加到您的 renderer.js 文件中；



const editor = document.getElementById('editor');
const undoStack = [];
const redoStack = [];

editor.addEventListener('input', () => {
  undoStack.push(editor.innerHTML);
});

function undo() {
  if (undoStack.length > 1) {
    redoStack.push(undoStack.pop());
    editor.innerHTML = undoStack[undoStack.length - 1];
  }
}

function redo() {
  if (redoStack.length > 0) {
    undoStack.push(redoStack.pop());
    editor.innerHTML = undoStack[undoStack.length - 1];
  }
}

document.addEventListener('keydown', (event) => {
  if (event.ctrlKey && event.key === 'z') {
    event.preventDefault();
    undo();
  } else if (event.ctrlKey && event.key === 'y') {
    event.preventDefault();
    redo();
  }
});

复制和粘贴

这是任何编辑器中都非常重要的另一个功能。您可以通过在文件中添加以下代码来快速添加此功能renderer.js。



const copyButton = document.getElementById('copy-button');
const pasteButton = document.getElementById('paste-button');

copyButton.addEventListener('click', () => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(editor);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
});

pasteButton.addEventListener('click', () => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(editor);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('paste');
  selection.removeAllRanges();
});

这段 JavaScript 代码设置了复制和粘贴按钮，这些按钮使用document.execCommand()方法来从编辑器中复制和粘贴文本。代码首先使用 Range 对象和window.getSelection()方法来选择编辑器中的所有内容。然后，它将该范围添加到选择范围中，document.execCommand()使用相应的命令（“复制”或“粘贴”）调用方法来执行操作，最后从选择范围中移除该范围。

查找和替换：

在本小节中，我们将在文本编辑器中添加查找和替换功能。此功能允许用户输入一个关键词，然后将所有出现的该关键词替换为一个新词。
为此，请在 index.html 代码中添加以下内容：



<div>
  <input type="text" id="find-input" placeholder="Find...">
  <input type="text" id="replace-input" placeholder="Replace...">
  <button id="find-button">Find</button>
  <button id="replace-button">Replace</button>
</div>

这段代码将创建两个用于查找和替换文本的输入字段。它还将创建两个按钮来触发查找和替换功能。

在您的 renderer.js 文件中，添加以下内容；



const editor = document.getElementById('editor');
const findInput = document.getElementById('find-input');
const replaceInput = document.getElementById('replace-input');
const findButton = document.getElementById('find-button');
const replaceButton = document.getElementById('replace-button');

findButton.addEventListener('click', () => {
  const searchText = findInput.value;
  const searchRegex = new RegExp(searchText, 'g');
  const editorContent = editor.innerHTML;
  const highlightedContent = editorContent.replace(searchRegex, `<span class="highlight">${searchText}</span>`);
  editor.innerHTML = highlightedContent;
});

replaceButton.addEventListener('click', () => {
  const searchText = findInput.value;
  const replaceText = replace

您已成功使用 HTML、CSS 和 JavaScript 从零开始构建了一个文本编辑器。在下一节中，我们将介绍如何打包和分发该文本编辑器应用程序，使其可供公众使用。

包装和分销

要为所有平台打包并分发 Electron 文本编辑器应用程序，您可以使用 Electron Packager 工具。此工具允许您为 Windows、macOS 和 Linux 等多个平台打包应用程序。以下是打包和分发应用程序的步骤：

一、使用 npm 将 Electron Packager 工具作为开发依赖项安装到项目中：



npm install electron-packager --save-dev

II. 在您的文件中添加以下脚本package.json：



"scripts": {
  "package": "electron-packager . --platform=all --arch=all --out=release-builds"
}

III.使用以下命令运行包脚本：



npm run package

release-builds此命令将在项目根目录中创建一个名为的新目录，其中将包含所有平台的打包应用程序。

打包后的应用程序现在可以分发给用户了。例如，开发者可以使用 NSIS 工具为 Windows 创建安装程序，或使用hdiutil命令为 macOS 创建磁盘映像。打包后的应用程序还可以上传到分发平台，例如 Mac App Store 或 Microsoft Store。

对应用程序进行代码签名以确保安全性

代码签名是使用数字证书对应用程序进行数字签名的过程，以确保应用程序的真实性和完整性。代码签名可帮助用户验证应用程序来自可信来源且未被篡改。

要在文本编辑器应用程序上执行代码签名，请按照以下步骤操作：
I. 从受信任的证书颁发机构 (CA)（例如 Comodo、DigiCert 或 GlobalSign）获取代码签名证书。点击此处了解更多关于获取代码签名证书的信息。II .在项目根目录中
创建一个名为的文件，并向其中添加以下代码：electron-builder.yml



appId: com.example.myapp
productName: My App
win:
  publisherName: My Company
  target: nsis
  signingHashAlgorithms: ['sha256']
  certificateFile: path/to/certificate.pfx
  certificatePassword: mypassword
mac:
  category: public.app-category.developer-tools
  identity: My Company
  entitlements: path/to/entitlements.plist
  entitlementsInherit: path/to/entitlements.plist

III. 将appId、productName、publisherName、certificateFile和替换certificatePassword为适当的值。IV
. 对于 macOS 用户，请创建一个授权文件 (.plist)，指定应用程序运行所需的权限。点击此处了解更多关于授权文件的信息。如果文本编辑器应用程序出于某种原因需要访问麦克风，请将以下代码添加到授权文件：



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>com.apple.security.device.microphone</key>
  <true/>
</dict>
</plist>

IV. 运行以下命令来构建并签名应用程序：



electron-builder --mac --win --publish never --config electron-builder.yml

此命令将为 macOS 和 Windows 构建应用程序，使用代码签名证书对其进行签名，并创建分发包。

遵循上述步骤将确保您的应用程序已进行数字签名并可安全分发。
接下来，我们将讨论如何在应用商店中分发应用程序。

分发至应用商店

Mac 操作系统

通过应用商店分发 Electron 文本编辑器应用程序是接触更广泛受众并提高应用程序知名度的好方法。以下是通过应用商店分发应用程序的步骤：

I. 在您选择的应用商店注册为开发者。例如，如果您想在 Mac 应用商店发布应用程序，则需要注册为 Apple 开发者。II
. 为应用商店生成必要的证书和配置文件。III
. 使用适合该应用商店的构建配置构建应用程序。在 Mac 应用商店中，您需要使用该配置构建应用程序mas。确保electron-builder.yml文件中包含以下代码：



appId: com.example.myapp
productName: My App
mac:
  target: mas
  entitlements: path/to/entitlements.plist
  entitlementsInherit: path/to/entitlements.plist

IV. 将应用程序提交到应用商店进行审核。审核过程通常需要几天或几周。请按照以下步骤提交您的应用程序
。V. 应用程序审核通过后，即可在应用商店下载。用户可以按名称搜索应用程序，或浏览应用商店的分类进行查找。VI
. 根据需要发布更新和错误修复来维护应用程序。应用商店通常提供工具来管理应用程序更新和用户反馈。

Windows 操作系统

可以使用 Microsoft 应用商店在 Windows 操作系统上分发应用程序。请按照以下步骤分发您的应用程序；

I. 注册 Microsoft 合作伙伴中心帐户并创建开发者帐户。点击此链接，了解有关合作伙伴计划的所有信息。II
. 使用 OpenSSL 或 Visual Studio 等工具生成代码签名证书。此证书将用于对应用程序包进行签名。请参阅上文关于代码签名的子部分。III . 使用文件中的配置
创建 Windows 应用包。使用以下代码：msixelectron-builder.yml



appId: com.example.myapp
productName: My App
win:
  target: msix
  certificateFile: path/to/certificate.pfx
  certificatePassword: password

IV. 使用实用程序使用代码签名证书对应用包进行签名SignTool。使用以下代码：



signtool sign /a /t http://timestamp.digicert.com /f path/to/certificate.pfx /p password MyApp.msix

V. 通过微软合作伙伴中心门户将应用包提交到微软商店。应用在发布前需要经过审核。

Linux操作系统

Linux 操作系统使用 Snap 商店分发其应用程序。请按照以下步骤开始分发：
I. 使用文件中的 snap 配置为应用程序创建一个 snap 包electron-builder.yml。使用以下代码：



appId: com.example.myapp
productName: My App
linux:
  target: snap

II. 安装 Snapcraft CLI 工具，并snapcraft在应用程序目录中运行命令来创建 snap 包。使用以下代码：



sudo snap install snapcraft --classic
snapcraft

III. 使用 Snapcraft CLI 工具将 snap 包上传到 Snap Store。使用以下代码：



snapcraft login
snapcraft push myapp_1.0_amd64.snap --release=edge

IV. 应用程序将在发布到 Snap 商店之前进行自动化测试。发布后，用户可以在 Snap 商店找到并安装该应用程序。

调试和故障排除

调试是软件开发过程中的一个重要环节。如果框架或库无法轻松调试，那么它就毫无用处，Electron 应用程序也不例外。幸运的是，Electron 应用程序的调试过程相当简单，主要是因为它们没有使用新技术。请按照以下步骤调试和排除 Electron 应用程序的故障：

使用开发者工具：Electron 提供了一套强大的开发者工具，可帮助您调试和排除应用程序故障。您可以按Ctrl+Shift+I或打开开发者工具Cmd+Option+I。开发者工具包含控制台、调试器和其他工具，可帮助您识别和修复代码中的问题。
检查应用程序日志：Electron 应用程序会生成日志文件，这些文件可以提供有关错误和异常的宝贵信息。您可以通过打开控制台或使用之类的工具来查看日志electron-log。
使用远程调试器：远程调试器允许您从单独的进程或机器调试应用程序。要使用远程调试器，您需要使用该标志启动 Electron 应用程序--remote-debugging-port，然后使用 Chrome DevTools 等工具连接到它。
检查系统要求：Electron 应用程序有一定的系统要求，例如需要特定版本的 Node.js 和 Chromium。请确保您的应用程序在受支持的平台上运行，并且所有依赖项都已正确安装。
使用错误处理和日志记录：正确的错误处理和日志记录可以帮助您识别和排除代码中的问题。确保您的应用程序能够妥善处理错误，并记录与错误和异常相关的信息。

结论

在本用户指南中，我们深入研究了 Electron JS 框架，并成功构建了一个功能齐全的文本编辑器。我们介绍了使用 Electron JS 创建文本编辑器桌面应用的开发环境的基础知识。我们还探索了更多高级功能，例如实现键盘快捷键、使用第三方库和框架，以及如何将应用打包并分发到各个应用商店。

与任何软件开发项目一样，调试和故障排除是该过程的重要组成部分。我们讨论了一些用于调试和故障排除 Electron 应用程序的技巧和技术，包括使用开发人员工具和检查应用程序日志。

总的来说，Electron JS 是一个功能强大、用途广泛的框架，可用于创建各种桌面应用程序。通过本用户指南中掌握的知识和技能，您可以自信地使用 Electron JS 创建自己的桌面应用程序，并充分利用其众多功能和优势。祝您编程愉快！

阅读建议

Elijah Asaolu 使用Electron 和 Vue 构建应用程序：引导您完成使用 Electron 和 Vue.js 构建桌面应用程序的过程。
Electron 安全：提供有关如何保护 Electron 应用程序免受常见漏洞攻击的详细指南。
Chris Hawkes 的Electron 与 NW.JS：比较了两个流行的桌面应用程序框架 Electron 和 NW.js，并讨论了各自的优缺点。
Electron Apps：采用 Electron JS 的热门软件公司列表。
Neutralino JS：类似 Electron JS 的框架，允许您使用 JavaScript、HTML 和 CSS 构建轻量级跨平台桌面应用程序。

文章来源：https://dev.to/bellatrick/how-to-use-electronjs-for-building-desktop-applications-with-javascript-html-and-css-4kpn