学透 Electron 自定义 Dock 图标

5,980 阅读3分钟

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

Dock 介绍

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

1

Dock 图标

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

如果不做任何设置,Electron 默认的应用程序图标如图所示:

4

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

自定义 Dock 图标

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

9

这里我下载的是 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 已经生效了。

5

设置 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());
++      }
++  });
}

效果如图:

6

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());
        }
    });
}

弹跳效果如图所示,注意让应用处于失去焦点的状态可以看到这个效果:

8

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


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

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