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编程,并且通过一些小的示例 ...
随机推荐
- rsync使用详解
1.什么是Rsync Rsync(remote synchronize)是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.Rsync使用所谓的“Rsync算法”来使本地和远 程两个 ...
- 京东在html5页面中打开本地app的解决方案
转:https://blog.csdn.net/CameloHuang/article/details/64476385 从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为 ...
- Coursera台大机器学习技法课程笔记05-Kernel Logistic Regression
这一节主要讲的是如何将Kernel trick 用到 logistic regression上. 从另一个角度来看soft-margin SVM,将其与 logistic regression进行对比 ...
- 配置本地无密码 SSH登录远程服务器
下面这幅图简单来说就是你本地有一把钥匙,服务器也有一把钥匙,当登录的时候本地的钥匙与服务器的进行对比,通过算法的判定,监测是否具有权限的用户 第一步,在本地配置这把钥匙生成私钥与公钥: 打开.ssh目 ...
- python3 + selenium 之窗口切换
窗口切换 此代码来源学习后对淘宝操作实践记录: 以下代码在Chrome61和IE11上正常运行,Firefox5.7上运行存在一些问题须改进,应该是火狐不兼容差link_text部分和循环经常报错,在 ...
- select 禁止 选择
禁止select控件選擇 大家知道, 對於HTML控件select, 是沒有readOnly屬性的,所以設置它並不起作用,如: <select id="select1" re ...
- 【C++ Primer 第15章】定义派生类拷贝构造函数、赋值运算符
学习资料 • 派生类的赋值运算符/赋值构造函数也必须处理它的基类成员的赋值 • C++ 基类构造函数带参数的继承方式及派生类的初始化 定义拷贝构造函数 [注意]对派生类进行拷贝构造时,如果想让基类的成 ...
- 查看Linux端口的占用及连接情况
[root@cloudplatform ~]# netstat -nap | grep 22066 | grep 127.0.0.1 -vtcp 0 0 :::22066 ...
- Python swapcase
swapcase 字符串大写转换为小写小写转换为大写. a = "woHaoshuai" a.swapcase() WOhAOSHUAI
- Mysql 模糊匹配(字符串str中是否包含子字符串substr)
1.LIKE 通常与 % 一同使用,类似于一个元字符的搜索.若substr不在str中,则返回0. 2.INSTR(str,substr) 返回字符串 str 中子字符串的第一次出现位置.若subst ...