博主电脑?进水坏了之后,MDZZ......来回折腾好几个来回,第三次维修店?拿电脑?,终于修好了~.废话不多一如既往先上图
一、将应用程序加入系统托盘
微信对于现代人来说已经是一种生活方式,支持单人、多人参与的一款跨平台的通讯工具。
通过手机网络发送语音、图片、视频和文字。其主要核心技术功能是(仅代表博主个人观点) InstantMessaging(即时通讯,实时传讯) 原谅博主资历尚浅,这里暂且不述~.
微信虽然大家都用,但也不见得自己无论是从产品方面或是技术方面会用/了解她,, 博主跑题了.......
回到正文, 微信启动时,系统托盘中会自动添加一个微信启动程序图标使用electron如何实现这种效果昵?
以下是使用electron实现将应用程序加入系统托盘demo
1 //electron 2 const electron = require('electron'); 3 const app = electron.app; 4 5 const path = require('path'); 6 7 //用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上. 8 const Menu = electron.Menu; 9 const Tray = electron.Tray; 10 11 //托盘对象 12 var appTray = null; 13 14 function createWindow() { 15 // Create the browser window. 16 mainWindow = new BrowserWindow({ 17 width: 1000, 18 height: 600, 19 resizable: true, 20 title: '将应用程序添加至系统托盘', 21 skipTaskbar:false 22 }) 23 //系统托盘右键菜单 24 var trayMenuTemplate = [ 25 { 26 label: '设置', 27 click: function () {} //打开相应页面 28 }, 29 { 30 label: '意见反馈', 31 click: function () {} 32 }, 33 { 34 label: '帮助', 35 click: function () {} 36 }, 37 { 38 label: '关于微信', 39 click: function () {} 40 }, 41 { 42 label: '退出微信', 43 click: function () { 44 //ipc.send('close-main-window'); 45 app.quit(); 46 } 47 } 48 ]; 49 50 //系统托盘图标目录 51 trayIcon = path.join(__dirname, 'tray'); 52 53 appTray = new Tray(path.join(trayIcon, 'app.ico')); 54 55 //图标的上下文菜单 56 const contextMenu = Menu.buildFromTemplate(trayMenuTemplate); 57 58 //设置此托盘图标的悬停提示内容 59 appTray.setToolTip('This is my application.'); 60 61 //设置此图标的上下文菜单 62 appTray.setContextMenu(contextMenu); 63 } 64 65 // This method will be called when Electron has finished 66 // initialization and is ready to create browser windows. 67 // Some APIs can only be used after this event occurs. 68 app.on('ready', createWindow); 69 70 71 // Quit when all windows are closed. 72 app.on('window-all-closed', function() { 73 // On OS X it is common for applications and their menu bar 74 // to stay active until the user quits explicitly with Cmd + Q 75 if (process.platform !== 'darwin') { 76 app.quit() 77 } 78 })
二、系统托盘程序右键菜单
就是步骤一声明 trayMenuTemplate 对象,加入托盘上下文菜单 //设置此图标的上下文菜单 appTray.setContextMenu(contextMenu); 即可,
而进入右键菜单相应页面就要涉及主线程与渲染线程交互.对线程不了解的可参考之前写的博客主线程与渲染线程之间通信
三、托盘来电消息的闪烁
像微信一样,推送一条未读新消息闪烁,其原理不同时刻图标切换,一张透明与不透明图标切换。
//系统托盘图标闪烁 var count = 0,timer = null; timer=setInterval(function() { count++; if (count%2 == 0) { tray.setImage(path.join(trayIcon, 'app.ico')) } else { tray.setImage(path.join(trayIcon, 'appa.ico')) } }, 600); //单点击 1.主窗口显示隐藏切换 2.清除闪烁 tray.on("click", function(){ if(!!timer){ tray.setImage(path.join(appTray, 'app.ico')) //主窗口显示隐藏切换 mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show(); } })
四、加入未读的音频
若对方发送一条未读消息,提示用户滴滴滴声音?......至于音频(使用HTML5 Audio即可)什么时候停止,取决你对用户的界定.
1 //playAudio 2 function playAudio(){ 3 var audio = new Audio(__dirname + '/tray/app.wav'); 4 audio.play(); 5 setTimeout(function(){ 6 console.log("暂停播放...."); 7 audio.pause();// 暂停 8 }, 800) 9 } 10 playAudio();
最后代码汇总,代码太长折叠 ?
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 //electron 2 const electron = require('electron'); 3 const app = electron.app; 4 5 const path = require('path'); 6 7 //用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ,通常被添加到一个 context menu 上. 8 const Menu = electron.Menu; 9 const Tray = electron.Tray; 10 11 //托盘对象 12 var appTray = null; 13 14 //createWindow 15 function createWindow() { 16 // Create the browser window. 17 mainWindow = new BrowserWindow({ 18 width: 1000, 19 height: 600, 20 resizable: true, 21 title: '将应用程序添加至系统托盘', 22 skipTaskbar:false 23 }) 24 //系统托盘右键菜单 25 var trayMenuTemplate = [ 26 { 27 label: '设置', 28 click: function () {} //打开相应页面 29 }, 30 { 31 label: '意见反馈', 32 click: function () {} 33 }, 34 { 35 label: '帮助', 36 click: function () {} 37 }, 38 { 39 label: '关于微信', 40 click: function () {} 41 }, 42 { 43 label: '退出微信', 44 click: function () { 45 //ipc.send('close-main-window'); 46 app.quit(); 47 } 48 } 49 ]; 50 51 //系统托盘图标目录 52 trayIcon = path.join(__dirname, 'tray'); 53 appTray = new Tray(path.join(trayIcon, 'app.ico')); 54 //图标的上下文菜单 55 const contextMenu = Menu.buildFromTemplate(trayMenuTemplate); 56 //设置此托盘图标的悬停提示内容 57 appTray.setToolTip('This is my application.'); 58 //设置此图标的上下文菜单 59 appTray.setContextMenu(contextMenu); 60 61 62 63 //系统托盘图标闪烁 64 var count = 0,timer = null; 65 timer=setInterval(function() { 66 count++; 67 if (count%2 == 0) { 68 tray.setImage(path.join(trayIcon, 'app.ico')) 69 } else { 70 tray.setImage(path.join(trayIcon, 'appa.ico')) 71 } 72 }, 600); 73 74 //单点击 1.主窗口显示隐藏切换 2.清除闪烁 75 tray.on("click", function(){ 76 if(!!timer){ 77 tray.setImage(path.join(appTray, 'app.ico')) 78 //主窗口显示隐藏切换 79 mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show(); 80 } 81 }) 82 } 83 // This method will be called when Electron has finished 84 // initialization and is ready to create browser windows. 85 // Some APIs can only be used after this event occurs. 86 app.on('ready', createWindow); 87 88 // Quit when all windows are closed. 89 app.on('window-all-closed', function() { 90 // On OS X it is common for applications and their menu bar 91 // to stay active until the user quits explicitly with Cmd + Q 92 if (process.platform !== 'darwin') { 93 app.quit() 94 } 95 })
资料参考
https://github.com/amhoho/electron-cn-docs/
https://github.com/demopark/electron-api-demos-Zh_CN
https://www.w3cschool.cn/electronmanual/electronmanual-tray.html
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/browser-window.md
https://github.com/electron/electron/blob/master/docs-translations/zh-CN/api/tray.md
https://electron.atom.io/docs/