学透 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 图标这个部分就介绍完了。

---

我的个人博客：https://github.com/cpselvis/b...

想学习更多干货内容可以扫码关注我的公众号：推送频率每周一篇