博客

QQ启动时，右下角会有企鹅的小图标。

使用Electron可以通过下面的方法实现这种效果

1.这是我们项目的目录结构

2.打开main.js ，目前我的main.js 是这样的：

const {app, BrowserWindow} = require('electron');  
let win;  
let windowConfig = {  
    width:800,  
    height:600  
};  
function createWindow(){  
    win = new BrowserWindow(windowConfig);  
    win.loadURL(`file://${__dirname}/index.html`);  
    //开启调试工具  
    win.webContents.openDevTools();  
    win.on('close',() => {  
        //回收BrowserWindow对象  
        win = null;  
    });  
    win.on('resize',() => {  
        win.reload();  
    })  
}  
  
app.on('ready',createWindow);  
app.on('window-all-closed',() => {  
    app.quit();  
});  
  
app.on('activate',() => {  
    if(win == null){  
        createWindow();  
    }  
})  

3.添加上应用最小化隐藏到系统托盘功能所需要的代码后是这样的：

const {app, BrowserWindow} = require('electron');  
//electron
const electron = require('electron');
const path = require('path');
//用一个 Tray 来表示一个图标,这个图标处于正在运行的系统的通知区 ，通常被添加到一个 context menu 上.
const Menu = electron.Menu;
const Tray = electron.Tray;
//托盘对象
var appTray = null;
let win;  
let windowConfig = {  
    width:800,  
    height:600  
};  
function createWindow(){  
    win = new BrowserWindow(windowConfig);  
    win.loadURL(`file://${__dirname}/index.html`);  
    //开启调试工具  
    win.webContents.openDevTools();  
	
	//系统托盘右键菜单
    var trayMenuTemplate = [
        {
            label: '设置',
            click: function () {} //打开相应页面
        },
        {
            label: '帮助',
            click: function () {}
        },
        {
            label: '关于',
            click: function () {}
        },
        {
            label: '退出',
             click: function () {
		         app.quit();
                 app.quit();//因为程序设定关闭为最小化，所以调用两次关闭，防止最大化时一次不能关闭的情况
            }
        }
    ];

    //系统托盘图标目录
    trayIcon = path.join(__dirname, 'app');//app是选取的目录

    appTray = new Tray(path.join(trayIcon, 'app.ico'));//app.ico是app目录下的ico文件

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

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

    //设置此图标的上下文菜单
    appTray.setContextMenu(contextMenu);
    //单击右下角小图标显示应用
    appTray.on('click',function(){
        win.show();
    })
	
    win.on('close',(e) => {  
        //回收BrowserWindow对象
		if(win.isMinimized()){
			win = null;
		}else{
			e.preventDefault();
			win.minimize();
		} 
    });  
    /*win.on('resize',() => {  
        win.reload();  
    })*/  
}  

app.on('ready',createWindow);  
app.on('window-all-closed',() => {  
    app.quit();  
});  
  
app.on('activate',() => {  
    if(win == null){  
        createWindow();  
    }  
})

4. 完成了

5.那么在接收到消息提醒后，怎么让图标闪烁呢？

可以参考另一篇文章：



【ELectron】electron应用任务栏图标闪烁提醒



点击打开链接