用电子创建跨平台桌面节点应用程序-js教程-PHP中文网

钥匙要点

>注意：我们在这里使用受版权保护的漫威属性来说明目的。请不要以自己的方式分发它们！

我如何创建一个新的电子项目？

终端或命令提示符，然后使用命令电子。此命令启动您的应用程序。

我可以在我的电子应用中使用node.js模块吗？

我可以在我的电子应用中使用Web技术吗？

首页

web前端

js教程

用电子创建跨平台桌面节点应用程序

Christopher Nolan

Feb 18, 2025 pm 12:26 PM

用电子创建跨平台桌面节点应用程序

钥匙要点

Electron允许开发人员使用JavaScript和Web Technologies创建跨平台桌面应用程序。它提供了比以前的选项（例如Flash，Air，Java和Silverlight。

>。 Electron应用程序可以使用Electron-Packager NPM模块等工具将电子应用程序包装到“本机”应用中。这会创建一个可执行的二进制文件，该二进制可以在各种平台上运行，包括Windows，MacOS和Linux。

>电子不仅用于简单的应用程序。它可以处理复杂的功能，并提供访问剪贴板访问，应用程序菜单栏工具和用于调试的Chrome Dev工具等功能。通过电子构建了几种流行的应用，例如Atom，Slack和Kitematic。

>称我为老式，但我一直更喜欢使用适合每个目的的桌面应用程序。我觉得，如果我要使用的只是我所做的所有事情的浏览器，那为什么要拥有一台“合适的”计算机呢？从实际的层面上，我经常旅行，通常在互联网连接或使用不稳定的互联网连接之间进行旅行，并且“真实”应用程序通常在允许有效的离线工作方面要好得多。

我感谢我的开发和维护本地桌面应用程序的复杂程度，并且可以理解为什么公司将用户推向Web或跨平台版本。在过去的几十年中，已经有很多选择来实现这一目标。 Flash，Air，Java和Sliverlight都是所有能力以不同程度的成功承诺的选项。

这些选项的主要问题是，他们通常涉及学习另一种语言（打败了这一点）或强迫用户安装困扰着稳定，性能和安全问题的插件。

我们都知道JavaScript和Web技术的力量，并看到了使用此知识开发和包装跨平台桌面应用程序的一波选项。

电子，github是一种选择，但是由于我已经很高兴地使用了与之构建的多个应用程序，因此研究似乎是一个不错的选择。经过两年的开发，包括一个名称更改（来自原子壳），Electron最近已达到1.0版，这始终是任何项目存在的里程碑。有什么更好的时间来了解它的能力。

安装电子

Electron具有快速的启动项目和预先构建的版本，但让我们直接潜入深处，并通过NPM安装电子：

或Mac Homebrew Lovers，通过桶：

<span>npm install electron-prebuilt -g
</span>

登录后复制

无论您遵循哪个选项，您都应最终得到可执行的电子二进制。

用电子创建跨平台桌面节点应用程序

此应用程序仅用于捆绑和运行您的最终项目，而不是为创建一个项目。为此，您可以使用任何标准的文本编辑器或IDE。

一个电子项目需要三个文件：

index.html：默认呈现的网页。

> main.js：启动该应用并创建一个浏览器窗口以渲染html。
package.json：列出应用程序依赖项，元数据和所需的文件。

用电子创建跨平台桌面节点应用程序你需要一个英雄

在此示例中，我将创建一个简单的应用程序，该应用程序连接到Marvel API，拉出25个超级英雄并显示其名称和缩略图图像。当该过程完成并具有类似OS的应用程序图标时，它将显示系统通知。最终用户将不知道如何创建应用程序或能够查看源代码。

您可以在github上找到最终项目。

打开软件包。

这是一个标准软件包。在此设置应用程序名称，版本，主JavaScript文件和依赖项。

>在添加它们后运行NPM安装以确保您安装了依赖项。>

brew <span>install Caskroom/cask/electron
</span>

登录后复制

> main.js处理主机操作系统与您的JavaScript代码之间的交互。这将是一个简单的例子，您可以在电子文档中找到更多信息。

首先，让我们设置所需的要求（即电子），创建一个应用程序，本机浏览器窗口和一个可使用的主窗口占位符。

下一个句柄，如果关闭了Windows，请退出应用程序。如果平台是OS X，则应用程序关闭所有窗口后通常会保持打开状态，并且用户通常会明确戒烟，因此请处理该用例。

初始化电子后，创建浏览器窗口并加载应用程序代码。如果窗口关闭，请解除窗口对象。

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

登录后复制

创建一个称为应用的子文件夹。在App/index.html中，将引用添加到所需的样式表和JavaScript文件中，并设置接口的HTML结构。

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

登录后复制

创建app/css/index.css并添加一些基本的CSS以帮助布局。

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

登录后复制

创建应用程序/JS/index.js。这将是大多数应用程序功能发生的地方。首先设置所需的依赖项和变量：

<span>npm install electron-prebuilt -g
</span>

登录后复制

奇迹API是一个有趣的API，但其身份验证和数据结构可能会令人困惑。在此处注册以获取键，然后遵循以下说明以获取上述三个参数。身份验证所需的公共密钥和私钥存储在.env文件中，并使用dotenv软件包访问。

。

brew <span>install Caskroom/cask/electron
</span>

登录后复制

限制值设置要请求的记录数量，还有其他参数可以设置。>

>如果您宁愿跳过与Marvel API进行连接和认证，那么我创建了一个json数据文件供您使用。用以下方式替换上述JavaScript代码

接下来创建将每个字符输出到targue_list div中所需的HTML和占位符变量：

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

登录后复制

接下来，请致电API并处理响应，然后钻入JSON结构中的实际字符列表。data.data.results。

>为每个字符创建HTML元素，并将其附加到tarne_list。 Marvel API中的图像分为文件名和扩展名。如果没有可用的图像，它将显示“不可用的图像”图像，我们可以处理此图像，但在此示例中不会。

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

登录后复制

循环完成后，显示系统通知，关闭方法并处理连接到API的潜在错误。

通过在项目的根目录中执行下面的命令来运行应用程序：>

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

登录后复制

包装应用程序

将代码打包到“本机”应用程序中的

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

登录后复制

很简单，但需要几件。首先是应用徽章的图标。外观和文件类型将取决于您要定位的操作系统，但这是我使用的图标，取自Marvel的官方Android App。

用电子创建跨平台桌面节点应用程序

>注意：我们在这里使用受版权保护的漫威属性来说明目的。请不要以自己的方式分发它们！

然后，我使用iconverticons.com/online/将PNG转换为MAC ICON文件，但是还有其他可用工具。

> 包装项目的最简单方法是使用Electron-Packager NPM模块（注意：需要单独安装此项目）。它可以生成大型二进制文件，对于桌面应用程序，这可能不是问题，但是如果是，则在此处描述其他选项。

如果您是在非窗口平台上的Windows包装，则需要安装葡萄酒，这是一个很大的依赖。除了这些警告之外，这是如何创建应用程序二进制文件的方法。在您的项目文件夹中，运行（

替换为项目用电子创建跨平台桌面节点应用程序 >的相关值）：

顺序，这些参数设置：

项目文件夹。
生成的应用程序名称。
>平台：这些是Windows，Linux，Darwin的Win32，用于Vanilla Mac OS X和MAS MAS，用于Mac App Store版本。全部设置，将为所有平台生成一个二进制文件。
架构：32和64位CPU架构的IA32和X64，或全部。
>

注意：所有参数都可以分开以分别为多个值分开，如果要生成所有平台和体系结构，则可以用-All。

替换相关参数

用电子创建跨平台桌面节点应用程序

进一步的步骤

这是一个简单的例子，可以说明电子的潜力，还有更多的可能性。搁置纯JavaScript可以完成的工作，您可能想看一下：

Electron的新互动API Explorer。
devtron，镀铬开发工具的扩展，专门用于电子开发。
仍然怀疑吗？我想指出的是，在Atom撰写本文时，我在Slack中与本文的编辑进行了交流，并在Kitematic创建的Docker容器中测试了该应用程序。所有这些都是电子生成的应用。好的，他们有问题，但这真是令人印象深刻！

我很想在下面的评论中听到您使用电子构建的应用程序。

经常询问有关带电子桌面节点应用的问题

>使用电子开发桌面应用程序的先决条件是什么？ node.js是一个JavaScript运行时，允许您在服务器或计算机上运行JavaScript，而NPM是Node.js软件包的软件包管理器。您可以从官方node.js网站下载node.js和npm。安装了这些安装后，您可以使用NPM安装电子。

>如何在系统上安装电子？

>安装电子非常简单。安装了node.js和NPM后，您可以在终端或命令提示中使用以下命令在系统上安装电子：npm install -G电子。此命令在全球安装电子，允许您从系统上的任何目录访问它。

>

我如何创建一个新的电子项目？

创建一个新的电子项目，首先，为您的项目创建一个新目录。在您的终端或命令提示符中导航到此目录，然后使用命令NPM INIT初始化一个新的Node.js项目。此命令在您的项目目录中创建一个新的package.json文件。然后，您可以使用命令npm安装-Save Electron在项目中安装Electron。

>电子应用程序的结构是什么？

>电子应用程序通常包含三种类型的文件： package.json，main.js和index.html。 package.json文件包含有关您的应用程序及其依赖项的元数据。 main.js文件是您应用程序的入口点，您可以在其中控制应用程序的生命周期事件。 index.html文件是您的应用程序启动时显示的网页。