博主電腦??進水壞了之後，MDZZ......來回折騰好幾個來回，第三次維修店??拿電腦??，終於修好了~.廢話不多一如既往先上圖

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

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

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

微信雖然大家都用，但也不見得自己無論是從產品方面或是技術方面會用/了解她，， 博主跑題了.......

回到正文， 微信啟動時，系統托盤中會自動添加一個微信啟動程序圖標

 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/

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