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

 博主电脑💻进水坏了之后，MDZZ......来回折腾好几个来回，第三次维修店🕍拿电脑💻，终于修好了~.废话不多一如既往先上图

    一、将应用程序加入系统托盘

微信对于现代人来说已经是一种生活方式，支持单人、多人参与的一款跨平台的通讯工具。

通过手机网络发送语音、图片、视频和文字。其主要核心技术功能是(仅代表博主个人观点) InstantMessaging(即时通讯,实时传讯) 原谅博主资历尚浅，这里暂且不述~.

微信虽然大家都用，但也不见得自己无论是从产品方面或是技术方面会用/了解她，， 博主跑题了.......

回到正文， 微信启动时，系统托盘中会自动添加一个微信启动程序图标使用electron如何实现这种效果昵？

以下是使用electron实现将应用程序加入系统托盘demo

//electron
const electron = require('electron');
const app = electron.app;

const path = require('path');

//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ，通常被添加到一个 context menu 上.
const Menu = electron.Menu;
const Tray = electron.Tray;

//托盘对象
var appTray = null;

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        resizable: true,
        title: '将应用程序添加至系统托盘',
        skipTaskbar:false
    })
    //系统托盘右键菜单
    var trayMenuTemplate = [
        {
            label: '设置',
            click: function () {} //打开相应页面
        },
         {
            label: '意见反馈',
            click: function () {}
        },
        {
            label: '帮助',
            click: function () {}
        },
        {
            label: '关于微信',
            click: function () {}
        },
        {
            label: '退出微信',
            click: function () {
                //ipc.send('close-main-window');
                 app.quit();
            }
        }
    ];

    //系统托盘图标目录
    trayIcon = path.join(__dirname, 'tray');

    appTray = new Tray(path.join(trayIcon, 'app.ico'));

    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);

    //设置此托盘图标的悬停提示内容
    appTray.setToolTip('This is my application.');

    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);


// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

    二、系统托盘程序右键菜单

就是步骤一声明 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即可)什么时候停止，取决你对用户的界定.

//playAudio
function playAudio(){
    var audio = new Audio(__dirname + '/tray/app.wav');
    audio.play();
    setTimeout(function(){
        console.log("暂停播放....");
        audio.pause();// 暂停
    }, 800)
}
playAudio();

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

//electron
const electron = require('electron');
const app = electron.app;

const path = require('path');

//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ，通常被添加到一个 context menu 上.
const Menu = electron.Menu;
const Tray = electron.Tray;

//托盘对象
var appTray = null;

//createWindow
function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 600,
        resizable: true,
        title: '将应用程序添加至系统托盘',
        skipTaskbar:false
    })
    //系统托盘右键菜单
    var trayMenuTemplate = [
        {
            label: '设置',
            click: function () {} //打开相应页面
        },
         {
            label: '意见反馈',
            click: function () {}
        },
        {
            label: '帮助',
            click: function () {}
        },
        {
            label: '关于微信',
            click: function () {}
        },
        {
            label: '退出微信',
            click: function () {
                //ipc.send('close-main-window');
                 app.quit();
            }
        }
    ];

    //系统托盘图标目录
    trayIcon = path.join(__dirname, 'tray');
    appTray = new Tray(path.join(trayIcon, 'app.ico'));
    //图标的上下文菜单
    const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
    //设置此托盘图标的悬停提示内容
    appTray.setToolTip('This is my application.');
    //设置此图标的上下文菜单
    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();
        }
    })
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

作者：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/