博主电脑??进水坏了之后，MDZZ......来回折腾好几个来回，第三次维修店??拿电脑??，终于修好了~.废话不多一如既往先上图
一、将应用程序加入系统托盘
微信
对于现代人来说已经是一种生活方式，支持单人、多人参与的一款跨平台的通讯工具。
通过手机网络发送语音、图片、视频和文字。其主要核心技术功能是(仅代表博主个人观点) InstantMessaging(即时通讯,实时传讯) 原谅博主资历尚浅，这里暂且不述~.
微信虽然大家都用，但也不见得自己无论是从产品方面或是技术方面会用/了解她，， 博主跑题了.......
回到正文， 微信启动时，系统托盘中会自动添加一个微信启动程序图标
使用electron如何实现这种效果昵？
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 })
作者：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/
时间： 2024-07-30 13:43:09