electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒-阿里云开发者社区

electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

2017-07-05 3019

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

公司项目有一款带即时聊天、群组功能的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);