學透 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…

想學習更多幹貨內容能夠掃碼關注個人公衆號：推送頻率每週一篇