博主电脑?进水坏了之后，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:false22 })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 finished66 // 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 bar74 // to stay active until the user quits explicitly with Cmd + Q75 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(); 最后代码汇总,代码太长折叠 ?
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 //createWindow15 function createWindow() {16 // Create the browser window.17 mainWindow = new BrowserWindow({18 width: 1000,19 height: 600,20 resizable: true,21 title: '将应用程序添加至系统托盘',22 skipTaskbar:false23 })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 finished84 // 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 bar91 // to stay active until the user quits explicitly with Cmd + Q92 if (process.platform !== 'darwin') {93 app.quit()94 }95 }) 作者：Avenstar
出处：
关于作者：专注于前端开发
本文版权归作者所有,转载请标明原文链接
资料参考
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/