公司项目有一款带即时聊天、群组功能的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
});
闪烁的原理就是,用定时器更换托盘图标的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
[5] https://electron.atom.io/docs/
[6] https://www.w3cschool.cn/electronmanual/
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有