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源码查看