Electron 应用任务栏右键菜单：正确配置“打开新窗口”选项-js教程-PHP中文网

Electron 应用任务栏右键菜单：正确配置“打开新窗口”选项

聖光之護

发布： 2025-09-27 14:10:02

原创

883人浏览过

Electron 应用任务栏右键菜单：正确配置“打开新窗口”选项

本文旨在解决 Electron 应用在 Windows 任务栏右键菜单中显示“Electron”并打开空实例的问题。核心在于理解该默认选项并非“Electron 主页”，而是未打包应用的行为。通过使用 Electron Forge 或 Electron Builder 等工具将应用打包成独立可执行文件，并配置 package.json 中的 productName，即可使任务栏右键菜单正确显示应用名称并打开新应用实例，同时介绍了如何添加自定义 JumpList 条目。

理解任务栏右键菜单的默认行为

当您在开发 electron 应用程序时，如果在 windows 任务栏上右键单击应用程序图标，可能会看到一个名为“electron”的选项，点击后会打开一个空的 electron 窗口，而不是您的应用程序实例。这常常被误解为“electron 主页”。

实际上，您所看到的是 Windows 操作系统任务栏 JumpList 的一个默认行为。当应用程序未被打包成独立可执行文件时，系统识别到的是 electron.exe 这个进程。因此，JumpList 中默认的“打开新窗口”选项会尝试启动一个新的 electron.exe 实例，但由于没有指定主脚本，它便表现为一个空的 Electron 容器。这个默认的“打开新窗口”功能是 Windows 系统层面的行为，针对任何应用程序都存在，且无法直接修改或移除。

为了验证这一点，您可以在项目根目录下直接运行 node_modules/electron/dist/electron.exe 或 npm run electron（不带任何参数），您会观察到同样的结果：一个空的 Electron 窗口。

核心解决方案：打包您的 Electron 应用程序

解决上述问题的关键在于将您的 Electron 应用程序打包成一个独立的、可分发的执行文件。在开发模式下，您运行的是 Electron 运行时环境来加载您的代码；而打包过程则是将 Electron 运行时、您的应用程序代码以及所有依赖项封装在一起，形成一个独立的应用程序。

当您的应用程序被打包后，系统将识别到的是您应用程序的专属可执行文件（例如 YourAppName.exe），而不是通用的 electron.exe。此时，任务栏 JumpList 中的默认“打开新窗口”选项将正确地启动一个新的您的应用程序实例。

推荐的打包工具：

Electron Forge: 一个功能全面的工具，提供了从初始化项目到打包和发布的完整工作流。
Electron Builder: 另一个流行且功能强大的打包工具，支持多种平台和灵活的配置。

使用这些工具进行打包后，您会发现任务栏右键菜单中的默认选项将显示为您的应用程序名称，并且点击后会正常启动一个新的应用程序窗口。

配置应用程序名称 (productName)

打包工具通常会根据您 package.json 文件中的配置来生成可执行文件的名称以及 JumpList 中显示的应用程序名称。其中，productName 属性尤为重要。

通过在 package.json 中设置 productName，您可以自定义打包后应用程序的显示名称。例如：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

{
  "name": "my-fancy-app",
  "version": "1.0.0",
  "productName": "我的炫酷应用"
}

登录后复制

在上述配置中，"productName": "我的炫酷应用" 将确保打包后的可执行文件（例如我的炫酷应用.exe）以及任务栏 JumpList 中的默认条目都显示为“我的炫酷应用”。

扩展：自定义 JumpList 条目

虽然默认的“打开新窗口”选项是固定的，但 Electron 提供了 API 允许您为应用程序添加自定义的 JumpList 条目。这些自定义条目可以包含特定的任务（例如“新建文件”、“打开最近文档”）或指向特定的文件。

您可以使用 Electron 的 app.setJumpList() API 来创建和管理这些自定义条目。这使得您的应用程序能够提供更丰富的用户交互体验。

示例（概念性代码，非完整实现）：

const { app } = require('electron');

app.whenReady().then(() => {
  if (process.platform === 'win32') {
    app.setJumpList([
      {
        type: 'task',
        title: '打开最近文件',
        description: '打开上次编辑的文件',
        program: process.execPath,
        args: '--open-recent',
        iconPath: process.execPath,
        iconIndex: 0
      },
      {
        type: 'task',
        title: '新建文档',
        description: '创建一个新的空白文档',
        program: process.execPath,
        args: '--new-document',
        iconPath: 'path/to/your/icon.ico', // 可以是自定义图标
        iconIndex: 0
      },
      {
        type: 'separator'
      },
      {
        type: 'file',
        path: 'C:\Users\YourUser\Documents\my-project.txt' // 可以指向特定文件
      }
    ]);
  }
});

登录后复制

更多关于如何使用 app.setJumpList() 的详细信息和示例，建议查阅 Electron 官方文档中关于 Windows 任务栏的教程。

总结与注意事项

核心问题并非“Electron 主页”： 任务栏右键菜单中看到的“Electron”选项是未打包应用运行时 electron.exe 的默认行为。
解决方案是打包： 使用 Electron Forge 或 Electron Builder 等工具将您的应用程序打包成独立的可执行文件是解决此问题的关键。
配置 productName： 在 package.json 中设置 productName 属性，以确保打包后的应用程序名称和 JumpList 条目正确显示。
默认选项不可更改： 任务栏 JumpList 中默认的“打开新窗口”功能是系统行为，无法直接移除或修改其启动逻辑。
自定义 JumpList： 您可以通过 app.setJumpList() API 添加额外的自定义任务和目的地，以增强用户体验。

通过理解这些基本概念并正确地打包您的 Electron 应用程序，您将能够为用户提供一个专业且功能完善的桌面应用体验。

以上就是Electron 应用任务栏右键菜单：正确配置“打开新窗口”选项的详细内容，更多请关注php中文网其它相关文章！