electron - 如何在电子生成器中获取（托盘）图标路径/图像

Question

我正在使用electron-react-boilerplate开发电子应用程序（它使用电子构建器来打包应用程序）。

我想创建托盘，但它需要图标路径或本机图像。问题是如何从电子生成器中检索图标图像或如何告诉电子生成器将图标目录包含到资源中（不打包），所以我可以使用：

appIcon = new Tray(iconPath | nativeImage)

Answer 1

我有点为非打包资产（例如媒体或 JSON 配置文件）的解决方案而苦苦挣扎，主要是因为直到现在我还不熟悉 Electron。:) 我构建了一个简单的个人托盘专用应用程序，并且我不想每次更改图标时都重新打包。

如果您也计划使用更改/动态资产，则可以使用此属性区分“开发”和“生产”： https ://electronjs.org/docs/api/app#appispackaged-readonly

确保你的 package.json 中有这个：

"build": {
  ...
  "extraResources": [
    "./assets/**"
  ],
}

https://www.electron.build/configuration/contents#extraresources

然后在您的代码中，您可以拥有：

const assetsPath = app.isPackaged ? path.join(process.resourcesPath, "assets") : "assets";

当然，您也可以使用不同的路径来存储资产，独立于您打包的应用程序文件夹，例如您的用户的家庭或用户的文档：

https://electronjs.org/docs/api/app#appgetpathname

• 电子 v7.0.1
• 电子生成器 21.2.0

Answer 2

首先，您需要知道electron-builder哪些额外的文件需要复制到您的输出构建中。我复制了每个操作系统的本机驱动程序，如下所示，但您应该能够根据您的需要进行调整。这"to": "resources"意味着您以后可以使用下一个代码来查找文件。

"build": {
...
"extraFiles": [
  {
    "from": "resources/${os}/drivers",
    "to": "resources",
    "filter": [
      "**/*"
    ]
  }
],

然后要从电子中访问该路径，您可以使用：

const path = require('path');
const imgPath = path.join(process.resourcesPath, 'image.png')

如果您在主进程中，则可以省略该remote部分。

然后，您可以使用nativeImage.createFromPath来获取本机图像：

const nativeImage = require('electron').nativeImage
let image = nativeImage.createFromPath(imgPath)

Answer 3

谢谢，蒂姆，你的回答给了我一个很好的想法。我根据我如何运行我的应用程序 - 使用电子或安装的 deb 文件的形式与代码来重用它并添加一些内容：

"build": {
    ...
    "extraFiles": [
        {
            "from": "assets",
            "to": "resources",
            "filter": [
                "**/*"
            ]
        }
    ]
    ...
}

接着：

let imgPath = process.env.DEV ? "assets/icon.png" : path.join(process.resourcesPath, "icon.png");
tray = new Tray(imgPath);