Electron学习笔记

Electron 简介

Electron(官网:https://www.electronjs.org/zh/)是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源框架。

官网消息2023.8

22.x.y 持续支持

正如再见 Windows 7/8/8.1 所述,Electron 22(Chromium 108)的计划寿命终止日期将从 2023 年 5 月 30 日延长至 2023 年 10 月 10 日。 Electron 团队将会继续向 Electron 22 提供本计划中的任何安全修复,直到 2023 年 10 月 10 日。 十月 支持日期遵循 Chromium 和 Microsoft 的延长支持日期。 10 月 11 日,Electron 团队将支持回退到最新的三个稳定主要版本,将不再支持 Windows 7/8/8.1。

E25(23 年 5 月) E26(23 年 8月) E27(23 年 10 月)
25.x.y 26.x.y 27.x.y
24.x.y 25.x.y 26.x.y
23.x.y 24.x.y 25.x.y
22.x.y 22.x.y

时间表

Electron Alpha Beta Stable EOL Chrome Node Supported
26.0.0 2023-Jun-01 2023-Jun-27 2023-Aug-15 TBD M116 TBD
25.0.0 2023-Apr-10 2023-May-02 2023-May-30 2024-Jan-02 M114 v18.15
24.0.0 2022-Feb-09 2023-Mar-07 2023-Apr-04 2023-Oct-10 M112 v18.14

摘自:Electron 25.0.0

Electron 特点

Electron提供了易用的标记语法解析、绑定支持、灵活的布局排版、图形能力、数据处理、模板支持以及图形处理管线和插件拓展等功能。

  1. 易用性和标记语法解析:Electron使用HTML和类似于HTML的标记语法,让你可以轻松创建用户界面。它与Web技术紧密集成,你可以使用熟悉的标记语法来构建界面和布局。

  2. 支持绑定和组件:Electron可以使用JavaScript框架(如Vue.js、React等)来实现绑定和组件化开发。你可以使用这些框架实现数据绑定和构建可复用的组件,类似于Vue或React。

  3. 布局排版和插件拓展:Electron提供了灵活的CSS布局排版,你可以使用CSS进行多种布局。此外,Electron还允许你通过插件系统来进行布局的拓展,使你能够自定义和扩展布局功能。

  4. 图形能力和后处理管线:Electron支持强大的图形能力,你可以使用Canvas API或WebGL来实现延迟渲染和后处理管线(例如使用着色器)。这使得你可以处理复杂的图形渲染和效果。

  5. 数据处理和模板:通过JavaScript框架,你可以实现数据处理、触发器和数据前后期处理。此外,你可以使用JavaScript的动态特性来实现动态模板,根据设备数据的变化选择不同的模板。

  6. 图形处理管线和图形插件:Electron允许你使用图形处理管线和图形插件来增强渲染器的图形功能。你可以使用现有的图形库或编写自定义的图形插件来满足你的需求。

如何学习 Electron

  1. Electron官方网站:Electron的官方网站是一个重要的学习资源,提供了全面的文档、API参考和示例代码。你可以在官方网站上找到最新的Electron版本、教程和社区资源。访问Electron的官方网站:https://www.electronjs.org/ ↗

  2. Electron文档:Electron官方提供了详细的文档,涵盖了Electron的核心概念、API参考、应用程序架构和开发流程等内容。你可以在文档中找到关于窗口管理、文件系统访问、进程间通信等方面的信息。访问Electron的文档:https://www.electronjs.org/docs ↗

  3. Electron API演示应用程序:Electron官方提供了一个API演示应用程序,其中包含了许多示例代码,涵盖了Electron的各种功能和用法。你可以通过浏览这些示例代码来学习Electron的具体用法和最佳实践。访问API演示应用程序:https://github.com/electron/electron-api-demos ↗

  4. Electron Fiddle:Electron Fiddle是一个交互式的学习工具,它允许你在浏览器中编写和运行Electron代码片段。你可以使用Electron Fiddle来实验和学习Electron的各种功能和API。访问Electron Fiddle:https://www.electronjs.org/fiddle ↗

  5. Electron社区资源:Electron拥有活跃的开发者社区,你可以通过访问Electron的论坛、GitHub存储库、Stack Overflow和其他开发者社区来获取帮助、参与讨论和分享经验。在Electron的官方网站上可以找到相关链接和资源。

安装 Electron (国内)

安装 Node.js:

首先,确保你的电脑上已经安装了 Node.js。你可以从 Node.js 官方网站(https://nodejs.org ↗)下载安装程序,并按照安装向导进行安装。

查看node和npm版本

安装完成后,你可以在命令提示符或 PowerShell 中验证 Node.js 是否安装成功,通过运行以下命令:

1
node -v

如果成功显示 Node.js 的版本号,则表示安装成功。

catnodeversion

创建Electron 项目

在任意位置创建一个新的文件夹作为你的 Electron 项目目录。

createhelloworld

进入项目目录:

在命令提示符或 PowerShell 中,使用 cd 命令进入你的 Electron 项目目录。
例如,如果你的项目目录在桌面上的一个名为 HelloWorld 的文件夹中,你可以运行以下命令进入该目录:

1
2
:D
cd D:\electorn\HelloWorld

更换npm国内源

若原本的npm下载失败,尝试更换国内源

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

(或)

1
npm config set registry https://registry.npm.taobao.org

使用 npm 进行全局安装

在终端中运行以下命令来安装 Electron 作为项目的依赖项:
这将在项目目录中安装最新版本的 Electron。

1
npm install electron -g

非全局安装:

1
npm install electron

这将下载并安装 Electron 及其相关依赖项。安装完成后,你的项目目录中将出现一个名为 node_modules 的文件夹,其中包含了 Electron 及其依赖项的文件。

检测是否安装成功

安装好后,我们可以通过 -v 命令检测 electron 是否安装成功,命令如下所示:

1
electron -v

显示版本即为安装成功

electronversion

其他命令:查看可提供的版本

1
npm view electron versions

初始化 npm

在项目目录中运行以下命令,初始化 npm 项目,并按照提示填写项目相关信息:

1
npm init

这将生成一个 package.json 文件,其中包含了你的项目的配置信息。

npminitelectron

创建入口main.js文件

在项目目录中创建一个新的 JavaScript 文件,例如 main.js,作为 Electron 应用程序的入口文件。
main.js 文件中编写你的 Electron 应用程序的代码。

1
2
3
4
5
6
7
8
9
10
11
12
const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

这段代码创建了一个 Electron 窗口,并加载了一个名为 index.html 的文件。

创建html文件

在项目目录中创建一个新的 HTML 文件,例如 index.html
打开 index.html 文件,并将以下代码粘贴到文件中:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

这是一个简单的 HTML 文件,其中包含一个标题为 “Hello World!” 的 <h1> 元素。

运行 Electron 应用程序

在项目目录中执行以下命令来启动 Electron 应用程序:

1
npx electron .

这将在 Electron 中打开一个窗口,并加载 index.html 文件。你应该能够看到一个包含 “Hello World!” 的窗口。

恭喜!你已经成功创建并运行了一个简单的 Electron HelloWorld 程序。
你可以根据需要修改 index.html 文件来实现更复杂的界面和功能。

successhelloworld

“Hello World” 文件结构

“Hello World” Electron 应用程序的文件结构通常如下所示:

1
2
3
4
my-electron-app/
├── index.html
├── main.js
├── package.json

electronmainjs

每个文件的作用:

  1. index.html: 这是应用程序的主要 HTML 文件,用于定义应用程序的用户界面。你可以在其中添加 HTML、CSS 和 JavaScript 代码来创建你想要的界面和功能。

  2. main.js: 这是 Electron 应用程序的主要启动文件。它包含了创建 Electron 窗口、加载 index.html 文件等核心功能代码。

  3. package.json: 这是应用程序的配置文件,其中包含了应用程序的元数据、依赖项和脚本等信息。通过运行 npm init 命令可以生成这个文件,并在其中添加你的应用程序的相关信息。

这是一个最简单的 Electron 应用程序的文件结构,它包含一个 HTML 文件和一个 JavaScript 文件。

你可以根据需要对文件结构进行扩展和修改,例如添加其他的 HTML、CSS 和 JavaScript 文件,或者将资源文件(如图像、样式表等)放在适当的位置。

查看 Electron 版本号

如果您的Electron应用程序已打包成可执行文件,则可以通过在命令行或PowerShell窗口中运行该文件,并添加–version参数来获取Electron的版本号。
例如:

1
my-electron-app.exe --version

这将输出您的Electron应用程序所使用的Electron版本号。

升级 Electron 版本

要升级Electron的版本,请按照以下步骤操作:

  1. 打开您的Electron应用程序的根目录并备份您的代码和配置文件。

  2. 在package.json文件中将Electron的版本号更新为您想要升级到的版本号,例如:

1
2
3
"dependencies": {
"electron": "^26.0.0"
}
  1. 在命令行中运行以下命令,以安装新版本的Electron:
1
npm install

这将会安装package.json文件中指定的所有依赖项,包括新版本的Electron。

  1. 更新您的Electron应用程序的代码和配置文件,以适应新版本的Electron。在新版本的Electron中可能会有一些API更改或功能更新,因此您可能需要相应地更改您的应用程序代码和配置文件。

  2. 测试您的应用程序,确保它在新版本的Electron中正常运行。

请注意,升级Electron版本可能会导致应用程序出现不兼容或错误。因此,在升级之前,请确保备份您的代码和配置文件,并在测试之前进行更改。

清除 npm 缓存

验证代理设置

如果你在代理后面,请确保代理设置正确。
你可以使用npm config命令检查和更新代理设置。在终端中运行以下命令:

1
2
npm config get proxy
npm config get https-proxy

如果这些命令返回一个值,表示已配置代理。
如果返回null,表示未设置代理

删除代理缓存

如果代理设置不正确或者你不需要代理,可以使用以下命令删除它们:

1
2
npm config delete proxy
npm config delete https-proxy

临时禁用代理:

如果你正在使用代理,并怀疑它导致了问题,可以尝试临时禁用它,以查看npm能否正常连接注册表。

使用不同的注册表

默认情况下,npm使用官方注册表(registry.npmjs.org)。
尝试切换到其他注册表,看看是否可以解决问题。
运行以下命令更改注册表:

1
npm config set registry https://registry.npmjs.org/

更改注册表后,再次尝试运行npm命令。

清除npm缓存

有时,npm缓存的问题可能导致连接问题。
你可以尝试通过运行以下命令来清除npm缓存:

1
npm cache clean --force

清除缓存后,再次尝试运行npm命令。

卸载 Electron

要卸载 Electron,你可以按照以下步骤进行操作:

全局卸载

  1. 如果你在全局范围内安装了 Electron,请使用以下命令将其卸载:

使用 npm:

1
npm uninstall -g electron

如果你没有在全局范围内安装 Electron,则可以跳过此步骤。

本地卸载

  1. 如果你在你的项目目录中使用了本地安装的 Electron,请在项目目录下执行以下命令卸载 Electron:

使用 npm:

1
npm uninstall electron

这将从你的项目的 node_modules 目录中移除 Electron。

请注意,以上命令将仅移除 Electron 包本身,而不会删除你的应用程序代码和其他依赖项。

如果你想完全删除 Electron 相关的文件,你可以手动删除以下文件和目录:

  • 从全局范围内安装的情况下,删除对应的 Electron 可执行文件的路径(例如 Windows 中的 C:\Users\your-username\AppData\Roaming\npm\node_modules\electron)。

  • 从项目目录中删除 node_modules 目录中的 Electron 相关文件。

  • 如果你使用了其他构建工具或打包工具(如 webpack、Parcel 或 Electron Builder),请根据相应工具的文档,删除和清理相关的配置文件和构建输出目录。

通过执行上述步骤,你将能够卸载 Electron。

报错信息及解决方式

【查看版本时报错】’electron’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

‘electron’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

使用 electron -v 查看版本时显示:

errorelectronversion

这个错误表明你尝试在命令行中执行 electron 命令时,系统无法找到 electron 命令。

这通常是由于 Electron 没有正确安装或没有在全局范围内配置导致的。

  1. 安装 Electron:首先确保你已经在你的项目目录中通过 npm 或 yarn 安装了 Electron。在命令行中进入你的项目目录,并运行以下命令来安装 Electron:
1
npm install electron
  1. 检查全局安装:如果你希望在命令行中直接运行 electron 命令,你需要全局安装 Electron。使用以下命令来全局安装 Electron:
1
npm install -g electron

请注意,全局安装可能需要管理员权限。

  1. 检查环境变量:如果你已经正确安装了 Electron,但仍然无法在命令行中执行 electron 命令,可能是因为系统的环境变量配置不正确。确保你的系统环境变量中包含 Electron 的可执行文件的路径。

对于 Windows 用户,你可以检查以下路径是否在系统的 PATH 环境变量中:

1
C:\Users\your-username\AppData\Roaming\npm\node_modules\electron\dist

如果路径不在 PATH 环境变量中,可以手动将它添加进去。

  1. 使用 npx 运行:如果你只是想在命令行中临时运行 Electron,而不进行全局安装,你可以使用 npx 命令来执行 Electron。在命令行中进入你的项目目录,并执行以下命令:
1
npx electron

这将临时下载并运行最新版本的 Electron。

【安装时报错】npm ERR! RequestError: connect ETIMEDOUT 20.205.243.166:443

1
2
3
4
5
npm ERR! code 1
npm ERR! path D:\Electron\test1\node_modules\electron
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: connect ETIMEDOUT 20.205.243.166:443

这个错误表明在尝试安装 Electron 时,npm 遇到了连接超时的问题。

解决此问题的一种常见方法是切换 npm 的下载源。默认情况下,npm 使用的是官方的 npm registry,但有时该源可能遇到连接问题。

你可以尝试将 npm 源切换为国内的源,例如淘宝的 npm 镜像。请按照以下步骤进行操作:

  1. 打开命令行工具,并进入到你的 Electron 项目目录下。

  2. 运行以下命令,将 npm 源切换为淘宝的 npm 镜像:

1
npm config set registry https://registry.npm.taobao.org

这将把 npm 源设置为淘宝的源。

  1. 然后,再次运行 npm install 命令来安装 Electron:
1
npm install

这将使用淘宝的 npm 镜像来下载 Electron,以避免连接问题。

请注意,切换源可能会导致下载速度变慢,但能够解决连接超时的问题。如果仍然遇到问题,请确保你的网络连接正常,并检查防火墙或代理设置是否会阻止 npm 的网络访问。

【安装时报错】npm ERR! RequestError: read ECONNRESET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
npm ERR! code 1
npm ERR! path C:\Users\15234\AppData\Roaming\npm\node_modules\electron
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: read ECONNRESET
npm ERR! at ClientRequest.<anonymous> (C:\Users\15234\AppData\Roaming\npm\node_modules\electron\node_modules\got\source\request-as-event-emitter.js:178:14)
npm ERR! at Object.onceWrapper (node:events:628:26)
npm ERR! at ClientRequest.emit (node:events:525:35)
npm ERR! at origin.emit (C:\Users\15234\AppData\Roaming\npm\node_modules\electron\node_modules\@szmarczak\http-timer\source\index.js:37:11)
npm ERR! at TLSSocket.socketErrorListener (node:_http_client:502:9)
npm ERR! at TLSSocket.emit (node:events:513:28)
npm ERR! at emitErrorNT (node:internal/streams/destroy:151:8)
npm ERR! at emitErrorCloseNT (node:internal/streams/destroy:116:3)
npm ERR! at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

npm ERR! A complete log of this run can be found in: C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T15_13_34_305Z-debug-0.log

这个错误消息表明在尝试安装Electron时,npm遇到了连接错误。具体来说,它显示了“RequestError: read ECONNRESET”错误,这意味着npm无法从服务器读取数据。

以下是一些可能的解决方案:

  1. 检查您的网络连接是否正常。尝试访问其他网站来确保您的网络连接正常。

  2. 尝试清除npm缓存,并重新运行npm install命令:

1
2
npm cache clean --force
npm install
  1. 如果您使用的是代理,请确保npm已正确配置以使用代理服务器。您可以使用以下命令来设置代理:
1
2
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

请将“proxy.company.com”替换为您的代理服务器地址和端口号。

  1. 如果您使用的是较旧版本的npm,请尝试升级npm版本并重新运行npm install命令。您可以使用以下命令来升级npm版本:
1
npm install -g npm@latest

这将会安装最新版本的npm。然后,您可以再次尝试运行npm install命令,查看是否已经解决了该问题。

请注意,如果您在尝试解决这个问题时对npm进行了更改,请注意备份您的代码和配置文件,并在测试之前仔细检查它们。

【安装时报错】npm ERR! path D:\electron/package.json

1
2
3
4
5
6
7
8
9
10
11
D:\electron>npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\electron/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\electron\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T11_58_08_529Z-debug-0.log

这个错误消息表明在D:\electron目录中找不到package.json文件,因此npm无法运行npm install命令。

请确保您在D:\electron目录中已经创建了一个package.json文件,并指定了您的Electron应用程序的名称、版本、依赖项等信息。如果没有创建该文件,请使用以下命令来创建它:

1
npm init

该命令将会引导您创建一个新的package.json文件,并询问您的应用程序的名称、版本、作者、许可证等信息。完成后,您可以在D:\electron目录下找到生成的package.json文件。

如果您已经创建了package.json文件,请确保文件名和路径名称是正确的,并且该文件位于D:\electron目录下。如果它不在该目录中,请将其移动到该目录下。

如果问题仍然存在,请尝试运行以下命令来清除npm的缓存,并重新运行npm install命令:

1
npm cache clean --force

然后再次尝试运行npm install命令。

请确保您在运行npm install命令之前已经在D:\electron文件夹中创建了一个package.json文件。您可以在该文件中指定您的应用程序的名称、版本、依赖项等信息。

如果您已经创建了package.json文件,那么可能是文件名或路径不正确。请检查文件名和路径是否正确,并确保您正在运行npm install命令的文件夹路径与package.json文件所在的路径相同。

此外,如果您使用的是较旧的npm版本,请尝试升级npm版本,并再次运行npm install命令。您可以使用以下命令来升级npm版本:

1
npm install -g npm@latest

这将会安装最新版本的npm。然后,您可以再次尝试运行npm install命令,查看是否已经解决了该问题。

【安装时报错】npm WARN cleanup Failed to remove some directories

1
2
3
4
5
6
7
8
9
10
11
npm WARN cleanup Failed to remove some directories [
npm WARN cleanup [
npm WARN cleanup 'D:\\Electron\\test1\\node_modules\\extract-zip',
npm WARN cleanup [Error: EPERM: operation not permitted, rmdir 'D:\Electron\test1\node_modules\extract-zip\node_modules'] {
npm WARN cleanup errno: -4048,
npm WARN cleanup code: 'EPERM',
npm WARN cleanup syscall: 'rmdir',
npm WARN cleanup path: 'D:\\Electron\\test1\\node_modules\\extract-zip\\node_modules'
npm WARN cleanup }
npm WARN cleanup ]
npm WARN cleanup ]

在尝试安装 Electron 时,npm 遇到了:

npm WARN cleanup:在清理过程中无法删除某些目录。具体是 D:\Electron\test1\node_modules\extract-zip\node_modules 目录无法被删除,导致了警告。这可能是由于权限不足或其他操作系统相关的问题导致的。

  1. 权限问题:确保你有足够的权限来删除目录。你可以尝试在命令行中以管理员权限运行安装命令,或者手动删除 D:\Electron\test1\node_modules\extract-zip\node_modules 目录。

【运行时报错】npm ERR! Missing script: “start”

1
2
3
4
5
6
7
8
9
10
11
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\15234\AppData\Local\npm-cache\_logs\2023-08-03T08_07_03_419Z-debug-0.log

缺少脚本:“start”
错误信息提示缺少名为 “start” 的脚本,同时给出了一些可能的替代命令。

  1. 确认你在正确的目录中运行 npm 命令。你应该在包含 package.json 文件的应用程序根目录下运行 npm 命令。

  2. 检查你的 package.json 文件,确保其中包含了一个名为 “start” 的脚本。 "scripts" 部分应该包含 "start" 字段,并且对应的值应该是你启动应用程序的命令。

示例 package.json 文件中的 "scripts" 部分:

1
2
3
"scripts": {
"start": "electron ."
}

如果你的 package.json 文件中没有 “start” 脚本,你可以根据你的需求添加它。

electronpackagejson

如图,启动应用程序的命令为:

1
npx electron .

【运行时报错】Unable to find Electron app at D:\Electron

1
2
3
4
5
Error launching app
Unable to find Electron app at D:\Electron
Cannot find module 'D:\Electron'
Require stack:
C:\Users\15234VAppData\LocalNnpm-cachel_npx\1323dbbc85759269\node... main.js

errorlauchingapp

根据提供的错误信息,出现了一个与 Electron 应用程序启动相关的错误。错误信息显示了以下内容:

1
2
3
4
5
Error launching app
Unable to find Electron app at D:\Electron
Cannot find module 'D:\Electron'
Require stack:
C:\Users\15234VAppData\LocalNnpm-cachel_npx\1323dbbc85759269\node... main.js

这个错误表明 Electron 无法找到位于 D:\Electron 目录下的应用程序,并且在 D:\Electron 目录中找不到名为 D:\Electron 的模块。

请注意,根据提供的错误信息,似乎存在一个路径错误。错误信息中的路径为 D:\Electron,它被认为是一个模块路径,而不是一个应用程序路径。

请按照以下步骤检查和解决这个问题:

  1. 检查应用程序路径:确认应用程序所在的路径是否正确。检查路径中的拼写错误、缺少斜杠等问题。

  2. 检查启动命令:确保你在启动 Electron 应用程序时使用了正确的命令。常见的启动命令是 electron . 或者 electron main.js。确保命令中的路径和文件名与你的项目结构一致。

  3. 确认应用程序目录结构:在应用程序的目录中,确保存在一个有效的 package.json 文件和一个入口文件(通常命名为 main.jsindex.js)。package.json 文件应包含一个有效的 "main" 入口字段,指向你的应用程序的入口文件。

【运行时报错】Unable to find Electron app at D:\Electron\my-electron-app

1
2
3
Error launching app
Unable to find Electron app at D:\Electron\my-electron-app
Cannot find module 'D:\Electron\my-electron-app\index.js'. Please verify that the package.json has a valid "main" entry

errorlaunchingapp2

错误启动应用程序
无法在 D:\electron\my-electron-app 找到 Electron 应用程序
无法找到模块 ‘D:\electron\my-electron-app\index.js’。请验证 package.json 文件中是否有有效的 “main” 入口

这个错误提示表明在指定的路径 D:\Electron\my-electron-app 下找不到 Electron 应用程序。同时,它还指出需要验证 package.json 文件中是否有有效的 "main" 入口。

请确保以下几点:

  1. 检查指定的路径是否正确,确保你的 Electron 应用程序确实存在于 D:\Electron\my-electron-app 目录中。

  2. 验证 package.json 文件是否存在,并且确保其中包含了有效的 "main" 入口。"main" 入口应该指向 Electron 应用程序的主要启动文件(通常是 index.jsmain.js)。

  3. 可能是 Electron 版本不匹配。
    最新的 Electron 版本可能已经更新,因此旧版本的 Electron 可能无法正常工作。

为了解决这个问题,你可以尝试更新 Electron 的版本,或者使用一个更稳定的版本。以下是更新 package.json 文件的示例,将 Electron 版本更新为最新版本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"name": "test1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^25.4.0"
}
}

在这个示例中,我将 Electron 版本更新为 "^25.4.0",这是一个较新且稳定的版本。请注意,你也可以使用其他版本号,但建议使用较新的稳定版本。

更新 package.json 文件后,运行 npm install 命令来安装最新版本的 Electron:

1
npm install

然后,尝试再次启动 Electron 应用程序:

1
npm start

示例 package.json 文件:

1
2
3
4
5
6
7
8
9
10
11
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"dependencies": {
"electron": "^25.4.0"
}
}

请确保 "main" 字段的值正确指向你的应用程序的主要启动文件。

  1. 确保你已经在应用程序的根目录下运行了正确的命令来启动 Electron 应用程序。通常,可以使用如下命令来启动应用程序:
1
electron .

这将在当前目录下查找 package.json 文件,并使用 "main" 字段指定的入口文件来启动 Electron 应用程序。

Hello World示例

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "dependencies": {
        "electron": "^25.4.0"
    },
    "name": "helloworld",
    "version": "1.0.0",
    "main": "main.js",
    "devDependencies": {},
    "scripts": {
        "start": "electron ."
    },
    "author": "mor",
    "license": "ISC",
    "description": "^25.4.0"
}

index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile('index.html');
}
app.whenReady().then(createWindow);

参考资料

Electron详解(一):基本介绍
Electron详解(二):基本使用与项目打包
Electron简介、安装、实践
React使用Electron开发桌面端

  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

You Found Me.

支付宝
微信