Electron爲文件瀏覽器建立圖標(三)

在前面的文章中，請看以前文章,咱們已經完成了使用 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源碼查看