使用electron将应用程序加入到系统托盘

 博主电脑?进水坏了之后，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();

最后代码汇总,代码太长折叠 ?

 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 })

View Code

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/7534944.html

关于作者：专注于前端开发

本文版权归作者所有,转载请标明原文链接

资料参考

  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/

转载于:https://www.cnblogs.com/zjf-1992/p/7534944.html