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
[5] https://electron.atom.io/docs/
[6] https://www.w3cschool.cn/electronmanual/
electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒的更多相关文章
- 在Boss直聘上投简历时,怎样保证有新消息时能及时收到
最近在Boss直聘上投简历,偶尔会有HR给我发消息,不想在电脑上错过这些消息,但我又不能时时刻刻盯着这个页,怎么办呢? 这时,我想起来,之前做过的Chrome插件,如果检测到Boss直聘上新消息数大于 ...
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- android 实现类似qq未读消息点击循环显示
public void jumpUnread(boolean cycle) { List<ContactLogModel> dataList = adapter.getContactLog ...
- C# WPF QQ新消息托盘悬浮窗效果实现
原文:C# WPF QQ新消息托盘悬浮窗效果实现 今天在做一个项目的时候需要这么一个效果,但是网上找了一会发现并没有现成的给我参考(复制),但是呢,我千(到)辛(处)万(抄)苦(袭)想(复)破(制)头 ...
- jQuery闪烁提示,让新消息在网页标题显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
- devexpress显示缓冲滚动条与实现类似QQ消息推送效果
1.一般在项目中处理大数据,或者查询大量数据时,耗时会很长,这个时候缓冲条是必不可少的.这里展示一个devexpress不错的缓冲条,如图所示: 使用到了控件splashScreenManager,运 ...
- 【WPF】实现类似QQ聊天消息的界面
最近公司有个项目,是要求实现类似 QQ 聊天这种功能的. 如下图 这没啥难的,稍微复杂的也就表情的解析而已. 表情在传输过程中的实现参考了新浪微博,采用半角中括号代表表情的方式.例如:“abc[dog ...
- 类似QQ消息左滑删除的Demo
最近在网上学到一篇类似QQ消息左滑删除的demo,完善了下代码,感觉还不错,特此分享一波: CustomSwipeListView.java 是个继承自ListView的类,里面调用了自定义View ...
- [C# 网络编程系列]专题九:实现类似QQ的即时通信程序
转自:http://www.cnblogs.com/zhili/archive/2012/09/23/2666987.html 引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例 ...
随机推荐
- PYTHON-操作系统基础
预习:操作系统基础1,编程语言的分类2,多版本共存3,执行python程序的两种方式4,变量5,输入输出6,运算符7,基本数据类型8,流程控制之if ------------------------- ...
- GO-time.after 用法
初学GO,time包里sleep是最常用,今天突然看到一个time.after,特记录time.after用法笔记如下: 首先是time包里的定义 // After waits for the dur ...
- css之absolute
一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doct ...
- Linux下搭建ruby on rails环境
要搭建的东西:Ruby 1.8.7,Rails 2.3.8,rubygem 1.3.7 1.安装ruby sudo apt-get install ruby-full 2.安装rubygem sudo ...
- Kibana加载样本数据
kibana 6.2 加载样本数据 kibana loading sample data 下载样本数据 # 莎士比亚经典作品 wget https://download.elastic.co/demo ...
- Spring的控制反转和依赖注入
Spring的官网:https://spring.io/ Struts与Hibernate可以做什么事? Struts, Mvc中控制层解决方案 可以进行请求数据自动封装.类型转换.文件上传.效验… ...
- Highcharts实现图形报表(我主要实现javaweb开发的图形报表)
官网网址:https://www.hcharts.cn/ 中文版的(参考起来方便,你懂的.):http://www.mamicode.com/info-detail-446038.html 网上已经有 ...
- MySQL运行内存不足时应采取的措施
导读 排除故障指南:MySQL运行内存不足时应采取的措施? 原文出处:<What To Do When MySQL Runs Out of Memory: Troubleshooting Gui ...
- Python dict get items pop update
一.get方法 dict = {'k1':1,'k2':2} dict.get('k1') 1 dict.get('k2') 2 dict.get('k3') None dict.get('k3',' ...
- MQ的订阅模式
一:介绍 1.模式 2.使用场景 一个生产者,多个消费者 每一个消费者都有自己的队列 生产者没有直接把消息发送给队列,而是发送到了交换机 每一个队列都要绑定到交换机 可以实现一个消息被多个消费者消费. ...