使用electron將應用程序加入到系統托盤

時間 2019-11-07

標籤使用 electron 應用程序加入系統托盤简体版

原文原文鏈接

博主電腦💻進水壞了以後，MDZZ......來回折騰好幾個來回，第三次維修店🕍拿電腦💻，終於修好了~.廢話很少一如既往先上圖html

1、將應用程序加入系統托盤

微信對於現代人來講已是一種生活方式，支持單人、多人蔘與的一款跨平臺的通信工具。前端

經過手機網絡發送語音、圖片、視頻和文字。其主要核心技術功能是(僅表明博主我的觀點) InstantMessaging(即時通信,實時傳訊) 原諒博主資歷尚淺，這裏暫且不述~.git

微信雖然你們都用，但也不見得本身不管是從產品方面或是技術方面會用/瞭解她，，博主跑題了.......github

回到正文，微信啓動時，系統托盤中會自動添加一個微信啓動程序圖標使用electron如何實現這種效果暱？windows

如下是使用electron實現將應用程序加入系統托盤demoapi

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

2、系統托盤程序右鍵菜單

就是步驟一聲明 trayMenuTemplate 對象，加入托盤上下文菜單 //設置此圖標的上下文菜單 appTray.setContextMenu(contextMenu); 便可，微信

而進入右鍵菜單相應頁面就要涉及主線程與渲染線程交互.對線程不瞭解的可參考以前寫的博客主線程與渲染線程之間通訊網絡

3、托盤來電消息的閃爍

像微信同樣，推送一條未讀新消息閃爍，其原理不一樣時刻圖標切換，一張透明與不透明圖標切換。app

//系統托盤圖標閃爍
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();
        }
})

4、加入未讀的音頻

若對方發送一條未讀消息，提示用戶滴滴滴聲音🔊......至於音頻(使用HTML5 Audio便可)何時中止，取決你對用戶的界定.electron

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