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 属性，然后看看效果。
代码语言：javascript复制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秒后触发弹跳功能：
代码语言：javascript复制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 图标这个部分就介绍完了。
