Question

我正在使用electron-react-boilerplate开发电子应用（使用electron-builder打包应用）。

我想创建托盘，但它需要图标路径或原生图像。问题是如何从电子建设者检索图标图像或如何告诉电子建设者将图标dir包含在资源中（不包装），所以我可以使用：

appIcon = new Tray(iconPath | nativeImage)

Answer 1

首先，您需要告诉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 2

我一直在努力寻找有关非打包资产（例如媒体或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 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);

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

3 个答案: