本文介紹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
],
...
},
...
}