【electron系列之一】创建右下角通知栏小图标

electron 用Tray对象来实现右下角通知栏小图标

一、先引入app, BrowserWindow来实现浏览器功能，接着引入Tray, Menu来实现右下角

二、

new Tray('./page/images/icon.ico')

 

const {app, BrowserWindow, Tray, Menu} = require('electron')

app.on('ready', () => {

	application.createWindow()
	// 拖盘图标
	application.initTrayIcon()
	

}

application = {
	
    createWindow() {

		uiWin = new BrowserWindow({
			width: 1230,
			height: 830,
			autoHideMenuBar: true,  // 自动隐藏菜单栏, 除非按了Alt键
			// skipTaskbar: true    // 不显示在任务栏
		})
		uiWin.once('focus', () => uiWin.flashFrame(false))
		uiWin.loadURL(path.join(__dirname, 'page/login.html'))
		uiWin.webContents.openDevTools()
		uiWin.on('closed', () => {
			uiWin = null
		})
		
	},

    initTrayIcon() {
        
        const tray = new Tray('./page/images/icon.ico');
        const trayContextMenu = Menu.buildFromTemplate([
            {
                label: '打开',
                click: () => {
                    this.showAndFocusWindow();
                }
            }, {
                label: '退出',
                click: () => {
                    uiWin.webContents.send(remote.app.quit, 'quit');
                }
            }
        ]);
        tray.setToolTip('IM云通信');

        tray.on('click', () => {
            this.showAndFocusWindow();
        });
        tray.on('right-click', () => {
            tray.popUpContextMenu(trayContextMenu);
        });

    },

　　

Tray资料：https://github.com/electron/electron/blob/master/docs/api/tray.md