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应用任务栏图标闪烁提醒点击打开链接