【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