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

Question

我正在使用电子反应样板来开发电子应用程序（它使用电子生成器来打包应用程序）。

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

appIcon = new Tray(iconPath | nativeImage)

Answer 1

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

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

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

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

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

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

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

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)

您可以使用 [process.resourcesPath](https://github.com/electron/electron/blob/master/docs/api/process.md#processresourcespath) 获取资源目录的路径 (3认同)