Electron常见问题（二）Electron图标打包

本文介绍electron中所有的图标打包方式

• 应用图标
• 安装包图标
• 安装包侧边栏图片
• 关联文件图标
• 托盘图标

应用图标/安装包图标/侧边栏图片

在windows中，我们推荐使用nsis安装程序，可以轻松的完成打包，这里主要将package.json中应用一些相关图标的打包。

package.json
{
    ...  
    "build": {
      ...
      "nsis": {
        "oneClick": false, //不使用一键安装，允许用户自定义
        "allowToChangeInstallationDirectory": true, // 允许用户修改安装路径
        "installerIcon": "./build/icon.ico",  // 安装的图标，默认 build/installerIcon.ico或者应用的图标
        "uninstallerIcon": "./build/icon.ico",// 卸载的图标，默认build/uninstallerIcon.ico或者应用的图标
        "installerHeader": "./build/icon.ico",// 安装的头部，默认build/installerHeader.bmp
        "installerHeaderIcon": "./build/icon.ico",//安装包头部的涂票，默认build/installerHeaderIcon.ico
        "installerSidebar": "./build/sidebar.bmp",// 安装包安装侧边图片，默认build/installerSidebar.bmp，要求164 × 314 像素
        "uninstallerSidebar": "./build/sidebar.bmp"// 安装包卸载侧边图片，默认build/installerSidebar.bmp，要求164 × 314 像素
      } ,
      "fileAssociations": [
        {
          "name": "test file associations",
          "ext": "elefile",
          "icon": "./resources/icon.ico",
          "description": "test file associations"
        }
      ],
      "extraResources": [
        {
          "from": "icons/",
          "to": "icons/"
        }
      ],  
      ...
    },
    ...
}

文件关联图标

有时候我们需要点击一种特定的文件来打开我们的应用。这种特定的文件会有关联的图标。

package.json
{
    ...  
    "build": {
      ...
      "fileAssociations": [
        {
          "name": "test file associations",// 关联文件在注册表的名称
          "ext": "elefile",// 关联文件的后缀
          "icon": "./resources/icon.ico",// 关联文件的图标
          "description": "test file associations"// 关联文件的描述
        }
      ],
      ...
    },
    ...
}

托盘图标

托盘图标很容易设置，但是有的时候我们设置好了，打包之后图标会丢失。这是因为我们打包之后没有把图标也打包过去。所以我们需要在打包的时候将托盘的图片复制过去。

package.json
{
    ...  
    "build": {
      ...
      "extraResources": [
        {
          "from": "icons/", 
          "to": "icons/"
        } // 可以移动多个文件夹，from-to
      ],  
      ...
    },
    ...
}