公司项目有一款带即时聊天、群组功能的APP，因为要给客服人员使用，需要开发PC版本。之前使用C#开发过一个PC版本，但是C#的UI这一块支持的不太好，而且升级比较麻烦，我就牵头基于Electron去实现了一个PC版本。

 

遇到了客服那边提过来的需求，当有新消息过来的时候，如果聊天窗口最小化了，需要有提醒，系统托盘也要像QQ一样有新消息过来的提醒与闪烁。

 

查了一个资料，两个功能都实现了。

 

 

先看任务栏的提醒样式如何实现

const path = require('path');const electron = require('electron');const {    app,    BrowserWindow,    Menu,    ipcMain,    Tray} = electron;let mainWnd = null;mainWnd = new BrowserWindow({    minWidth: 1200,    minHeight: 750,    resizable: true,    icon: 'icon.ico',    skipTaskbar: false});

// 开始或停止显示窗口来获得用户的关注mainWnd.flashFrame(true);

 

闪烁的原理就是，用定时器更换托盘图标的icon，一张正常、一张透明，切换（像眨眼睛一样）。

let appIcon = new Tray(iconPath);const contextMenu = Menu.buildFromTemplate([{    label: '移除',    click: function() {        event.sender.send('tray-removed');    }}, {    type: 'separator'}, {    label: 'Item1',    type: 'radio'}, {    type: 'separator'},{    label: 'MenuItem2',    type: 'checkbox',    checked: true}]);// Make a change to the context menucontextMenu.items[2].checked = false;appIcon.setToolTip('在托盘中的 Electron 示例.');appIcon.setContextMenu(contextMenu);var count = 0;setInterval(function() {    if (count++ % 2 == 0) {        appIcon.setImage(path.join(__dirname, '../img/tray/tray_icon_2.png'));    } else {        appIcon.setImage(path.join(__dirname, '../img/tray/tray_icon.png'));    }}, 400);

 

上面两个功能并不复杂，主要是对API方法的调用。

 

 

参考：

[1]

[2]

[3]

[4]

[5]

[6]