学透 Electron 自定义 Dock 图标

Mac OS 作为前端开发者的首选操做系统相信你们再熟悉不过了，在电脑主界面的底部能够看到各类各样的应用程序图标。好比：App Store、Safari 浏览器、照片、短信等等。使用 Electron 开发时咱们也会发现有一个默认的图标，但总感受这个图标不够酷。那么，咱们要如何自定义 Dock 图标呢？

Dock 介绍

Dock 是 Mac OS 电脑主界面底部的应用程序集合栏，能够理解成 windows 下的桌面快捷方式。一般，咱们会把比较经常使用的软件锁定在 Dock 下，便于快速找到和使用它们。

Dock 图标

Dock 图标在 UI 上总共包括两方面的内容：图标 Logo 和消息标识。

若是不作任何设置，Electron 默认的应用程序图标如图所示：

那么，Electron 开发中要如何自定义 Dock 图标呢？

自定义 Dock 图标

首先，咱们去苹果开发者官网上去下载一个图标。

这里我下载的是 Facetime 这个应用的 Logo，而后咱们给 BrowserWindow 这个对象添加一个 icon 属性，而后看看效果。

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        },
++      icon: path.join(__dirname, 'assets/images/facetime.png')
    });

    mainWindow.loadFile('index.html');

    mainWindow.on('close', function() {
        mainWindow = null;
    });
}
复制代码

发现并无变化？这个实际上是正常的，BrowserWindow 对象的 icon 属性只对 windows/Linux 系统生效，对于 Mac OS 须要经过 app.dock.setIcon 进行设置。咱们将上面的代码修改以下：

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        },
        icon: path.join(__dirname, 'assets/images/facetime.png')
    });
    
++  if (process.platform === 'darwin') {
++      app.dock.setIcon(path.join(__dirname, 'assets/images/facetime.png'));
++  }

    mainWindow.loadFile('index.html');

    mainWindow.on('close', function() {
        mainWindow = null;
    });
}
复制代码

修改以后，咱们再运行下代码发现 icon 已经生效了。

设置 Dock 标识

咱们常常会发现 Dock 里面的图标右上方会有消息通知(Dock badges)，好比 App Store 有多少个已安装的软件能够更新，QQ 上有多少条未读的消息等等。这个 Dock 标识在 Electron 中要如何设置呢？

咱们能够经过 app.dock.setBadge API 进行设置。下面咱们实现当应用窗口失去焦点时让消息通知的标识加1的功能。

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        },
        icon: path.join(__dirname, 'assets/images/facetime.png')
    });
    
    if (process.platform === 'darwin') {
        app.dock.setIcon(path.join(__dirname, 'assets/images/facetime.png'));
    }

    mainWindow.loadFile('index.html');

    mainWindow.on('close', function() {
        mainWindow = null;
    });
    
++  mainWindow.on('blur', () => {
++      const badgeString = app.dock.getBadge();
++      if (badgeString === '') {
++          app.dock.setBadge('1');
++      } else {
++        app.dock.setBadge((parseInt(badgeString) + 1).toString());
++      }
++  });
}
复制代码

效果如图：

Dock 弹跳

系统的了解 Dock 图标的自定义设置和 Dock 标识以后，接下来咱们看看 Dock 里另外一个比较重要的功能：Dock 弹跳。

Dock 弹跳一般用于重要信息的通知，由于它会比较引人注意。好比：网络断开的时候，QQ 会弹跳一次。接下来咱们看看如何使用这个功能的？

Dock 弹跳是经过 app.dock.bounce() 这个 API 进行实现的，它的参数能够是 information 或者 critical，默认值是 information。两个参数的区别是：information 用于消息的通知，它仅仅会使图标弹跳一次，而 critical 会使得图标一直弹跳直到应用处于激活状态或者手动取消弹跳。

下面，咱们实现窗口启动5秒后触发弹跳功能：

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        },
        icon: path.join(__dirname, 'assets/images/facetime.png')
    });
    
    if (process.platform === 'darwin') {
        app.dock.setIcon(path.join(__dirname, 'assets/images/facetime.png'));
    }

    mainWindow.loadFile('index.html');

    mainWindow.on('close', function() {
        mainWindow = null;
    });
    
++  setTimeout(() => {
++      app.dock.bounce();
++  }, 5000);
    
    mainWindow.on('blur', () => {
        const badgeString = app.dock.getBadge();
        if (badgeString === '') {
            app.dock.setBadge('1');
        } else {
          app.dock.setBadge((parseInt(badgeString) + 1).toString());
        }
    });
}
复制代码

弹跳效果如图所示，注意让应用处于失去焦点的状态能够看到这个效果：

到这里，自定义 Dock 图标这个部分就介绍完了。

---

个人我的博客：github.com/cpselvis/bl…

想学习更多干货内容能够扫码关注个人公众号：推送频率每周一篇