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
      ],  
      ...
    },
    ...
}