electron程序显示在右下角托盘

electron程序显示在右下角托盘的方法，使用electron实现将应用程序加入系统托盘demo

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

回到正文， 微信启动时，系统托盘中会自动添加一个微信启动程序图标使用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();
        }
})

四、加入未读的音频

若对方发送一条未读消息，提示用户滴滴滴声音

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

完整代码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;

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

转载：http://www.cnblogs.com/zjf-1992/p/7534944.html?utm_medium=referral&utm_source=debugrun
QQ登录框的例子：http://www.cnblogs.com/Starts_2000/p/electron-qqlogin-demo.html