Electron為檔案瀏覽器建立圖示(三)

龍恩0707發表於2019-07-03
瀏覽器

在前面的文章中，請看之前文章,我們已經完成了使用 electron做檔案瀏覽器這麼一個應用，現在我們需要為應用建立圖示操作。為應用建立圖示以後，我們就可以從計算機中與其他應用區分開來，如果我們自己會做icon圖片的話，我們自己使用ps做一個icon圖示來當做我們的應用圖示。針對不同的作業系統，檔案格式不同，顯示應用圖示的方式也是不一樣的。因此我們需要自己手動做一個比較好。

因此第一步：需要建立一個512*512畫素高清的PNG圖片，下面我是從網上官網找一個一張icon過來(https://github.com/paulbjensen/lorikeet/blob/master/icon.png)，我們檢視網路，把該圖片下載下來，放到我們的 專案中的 images 下，並命名為icon.png. 我們有了這個檔案以後，我們就可以針對不同的作業系統製作不同版本的圖示了。

Mac OS

Mac OS 系統要求應用圖示的檔案格式為ICNS. 該檔案格式包含以下不同解析度版本的應用圖示。

16px、32px、48px、128px、256px

根據我們使用的不同的作業系統，我這邊使用的是Mac系統，有不同的建立ICNS檔案的方法。我這邊在網上下載了一款破解版的 Icon Composer. 下載地址請看
(http://www.xue51.com/mac/6136.html#xzdz), 下載以後我們會進行安裝，安裝完成以後我把它拖進應用程式裡面，因此它在我們應用圖示是如下這樣的：

然後我們雙擊開啟，看到如下這樣的：

我們首先需要把我們的第一項勾選去掉，我們需要第二項、第三項、第四項、如下圖所示：

現在我們就可以把我們之前下載的 icon.png 拖放到 應用的虛框區域中，它會開啟一個選擇資料夾的對話方塊，讓我們選擇儲存生成圖示檔案的地方，我們這邊選擇我們專案中根目錄下的 images 下，然後生成完成後，我們會發現我們的 images 下多了 png 圖片，如下圖所示：

在如上生成的 icon資料夾下，也有我們的 如下5張圖片；如下圖所示：

如上操作以後，我們現在已經有了 ICNS檔案了。這是針對Mac系統下的操作。

Windows 系統下

微軟的Windows系統要求圖示檔案使用ICO檔案格式的，在web瀏覽器中顯示的網站圖示也使用的是該格式。比如我們上面已經使用了的iConvert Icons了，我們也可以使用iConvert Icons來生成ICO檔案了。

Linux系統下，我們這邊忽略不計，說實話，工作了這麼久，目前還沒有使用過nginx系統了。所以這邊暫時忽略不計。

二：對應用程式打包

在electron中，我們使用的一款叫 electron-builder. 它打包electron應用非常好用，我們首先需要使用 npm 來安裝它，安裝命令如下：

npm install electron-builder electron --save-dev

安裝完成後，因此我們的package.json 檔案配置如下程式碼：

{
  "name": "electron-filebrowser",
  "version": "1.0.0",
  "description": "a filebrowser",
  "main": "main.js",
  "scripts": {
    "pack": "build",
    "dist": "build"
  },
  "author": "tugenhua",
  "license": "ISC",
  "dependencies": {
    "async": "^3.1.0",
    "fs": "0.0.1-security",
    "lunr": "^1.0.0",
    "osenv": "^0.1.5",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "electron": "^5.0.6",
    "electron-builder": "^20.44.4"
  }
}

然後我們可以通過 npm run pack 進行打包了，打包命令如下：

等命令打包完成後，我們就可以看到在我們專案的根目錄下會生成dist資料夾。如下所示：

我們到我們的電腦目錄下再檢視下生成的檔案，如下所示：

當我們點選 mac資料夾點選進去的時候，我們會生成一個 electron-filebrowser 應用圖示。如下所示：


我們可以雙擊該圖示，就會開啟我們的 fileBrowser 應用程式了，如下所示：

2. 設定應用圖示

如上我們可以看到，我們的應用程式由一個預設的圖示，但是該圖示並不是我們的 icon.png 圖示，我們現在想設定我們自己的應用圖示，我們現在需要如下做：在package.json中加上 build json, 如下所示：

{
  "name": "electron-filebrowser",
  "version": "1.0.0",
  "description": "a filebrowser",
  "main": "main.js",
  "scripts": {
    "pack": "build",
    "dist": "build"
  },
  "author": "tugenhua",
  "license": "ISC",
  "dependencies": {
    "async": "^3.1.0",
    "fs": "0.0.1-security",
    "lunr": "^1.0.0",
    "osenv": "^0.1.5",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "electron": "^5.0.6",
    "electron-builder": "^20.44.4"
  },
  "build": {
    "mac": {
      "icon": "images/icon.icns"
    },
    "win": {
      "icon": "images/icon.ico"
    }
  }
}

因此我們使用 electron-builder 的時候會自動查詢build這個配置，然後如果是mac系統的話，會使用 我們專案根目錄下的 images/icon.icns 圖示作為應用圖示，同理如果是windows系統的話，也是一樣的道理。因此我們現在再繼續使用命令打包，如：npm run pack 後，我們會在我們的dist目錄下mac資料夾下生成，如下所示：

然後我們雙擊我們的圖示應用就可以開啟我們的應用程式了，如下圖所示：

注意：我們使用 iConvert icons 打包生成的 icns 感覺很模糊，為什麼會生成這樣的，目前還不清楚，等有空的時候可以去研究下，或者我們也可以用其他的方式來生成 icns 檔案的。具體怎麼弄下次再折騰下。或者我們可以看看這篇文章來使用png圖片轉icns圖片也可以可以的。(https://newsn.net/say/electron-icns.html)
github原始碼檢視

相關文章