electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒
公司项目有一款带即时聊天、群组功能的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 menu contextMenu.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] https://github.com/electron/electron/tree/master/docs-translations/zh-CN/api
[2] https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
[3] https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/tray.md
[4] https://github.com/demopark/electron-api-demos-Zh_CN