admin 管理员组

文章数量: 1086866

electron系统通知 隐藏到托盘 electron new Tray

可以用 electron 的 Tray 创建一个系统通知区的图标（也叫托盘），控制隐藏或显示

在入口文件添加下面的代码

// src/main/index.js
import { ipcMain, Menu, Tray } from 'electron'
const path = require('path')// 注意这里是全局定义这个隐藏到系统托盘变量，不然下面 new Tray 会报错
let tray = nullfunction createWindow() {// 已定义了mainWindow = new BrowserWindow({...// 在这个主程序的函数里面加// 创建系统通知区菜单//                        ↓ 这里不能用反斜杠 (对应图标的文件夹，名字)tray = new Tray(path.join('src\\renderer\\assets', 'icon.ico')) // 用ico图标格式// 创建托盘右键选项表const contextMenu = Menu.buildFromTemplate([{// 应用退出label: '退出',click: () => {mainWindow.destroy()},},])tray.setToolTip('梓桐的摸鱼小工具') // 鼠标放在托盘上文本tray.setContextMenu(contextMenu)// 点击图标触发的事件tray.on('click', () => {// 这里模拟桌面程序点击通知区图标实现显示或隐藏应用的功能// mainWindow.isVisible()//   ? (mainWindow.hide(), mainWindow.setSkipTaskbar(false))//   : (mainWindow.show(), mainWindow.setSkipTaskbar(true))// 或者直接只能显示mainWindow.show(), mainWindow.setSkipTaskbar(true)})
}
// 隐藏主程序
ipcMain.on('windowHide', function() {mainWindow.hide()mainWindow.setSkipTaskbar(false)
})

let tray = null
注意创建这个系统通知一定要在这里进行全局定义，不然会报错！

下面是完整代码

import { app, ipcMain, BrowserWindow, Menu, Tray } from 'electron'
const path = require('path')let tray = null // 在全局定义这个隐藏到系统托盘，不然下面 new Tray 会报错
/*** Set `__static` path to static files in production* .html*/
if (process.env.NODE_ENV !== 'development') {global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}let mainWindow
let settingWindow
const winURL =process.env.NODE_ENV === 'development'? `http://localhost:9080`: `file://${__dirname}/index.html`function createWindow() {/*** Initial window options*/mainWindow = new BrowserWindow({height: 200,// useContentSize: true,// 用户是否可调节窗口大小width: 350,resizable: false, // 是否可放大窗口maximizable: false, // 双击禁止放大窗口titleBarStyle: 'hiddenInset',frame: false, // 无边框transparent: true,// backgroundColor: '#2e2c29',// opacity: 0.9, // 应用透明度setAlwaysOnTop: true,webPreferences: {webSecurity: false, // 无需同源策略},})mainWindow.loadURL(winURL)// 创建系统通知区菜单tray = new Tray(path.join('src\\renderer\\assets', 'icon.ico')) //__dirname, 'icon.ico'))const contextMenu = Menu.buildFromTemplate([{// 应用退出label: '退出',click: () => {mainWindow.destroy()},},])tray.setToolTip('梓桐的摸鱼小工具')tray.setContextMenu(contextMenu)tray.on('click', () => {// 这里模拟桌面程序点击通知区图标实现显示或隐藏应用的功能// mainWindow.isVisible()//   ? (mainWindow.hide(), mainWindow.setSkipTaskbar(false))//   : (mainWindow.show(), mainWindow.setSkipTaskbar(true))mainWindow.show(), mainWindow.setSkipTaskbar(true)})
}// 窗口关闭
ipcMain.on('window-close', function() {mainWindow.destroy()
})// 窗口保持最前
ipcMain.on('windowOnTop', function(e, arg) {mainWindow.setAlwaysOnTop(arg)
})// 显示主程序
ipcMain.on('windowShow', function() {mainWindow.show()mainWindow.setSkipTaskbar(true)
})// 隐藏主窗口
ipcMain.on('windowHide', function() {mainWindow.hide()mainWindow.setSkipTaskbar(false)
})

本文标签： electron系统通知 隐藏到托盘 electron new Tray

版权声明：本文标题：electron系统通知 隐藏到托盘 electron new Tray 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693759596a241185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。