electron最小化托盘设置
众所众知桌面app都是有小托盘的,我们可以退去登录;也可以实现一些其他的功能,比如音乐播放器就可以切换下一首歌曲以及一些设置等等。那么electron中怎么实现呢?
官方文档
以下示列是官方文档的示列,是一个单选的选择器;大家也可以根据文档一步一步去测试出来 elctron托盘文档地址
注意
- icon地址一定要正确,否则托盘出不来,要报错
- icon地址需要绝对路径
报错:
Error: Failed to load image from path './assets/json.png'
官网示列代码:
const { app, Menu, Tray } = require('electron') let tray = null app.whenReady().then(() => { tray = new Tray('/path/to/my/icon') const contextMenu = Menu.buildFromTemplate([ { label: 'Item1', type: 'radio' }, { label: 'Item2', type: 'radio' }, { label: 'Item3', type: 'radio', checked: true }, { label: 'Item4', type: 'radio' } ]) tray.setToolTip('This is my application.') tray.setContextMenu(contextMenu) })
修改后的托盘
我在ready周期中对托盘进行设置,大家可以在网上去下载一些图标,我是在iconfont网站去下载的,尺寸选择的是16;感觉刚刚好。
- 启动服务器是在服务器执行以后显示屏幕
- 退出登录是直接关闭应用
- 当用户点击图标的时候展示应用
这儿需要注意一个点:图标路径不能直接写死需要通过path引入;
static指的是 public 文件下的static(将图标放置到该文件夹即可)
app.on('ready', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { // await installExtension(VUEJS_DEVTOOLS) session.defaultSession.loadExtension(path.resolve(__dirname, "../devTools/chrome")); } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow(); tray = new Tray(path.join(__static, './static/json.png')) const contextMenu = Menu.buildFromTemplate([ { label: '启动服务器', icon: path.join(__static, './static/start.png'), click:()=>{ win.webContents.send('start-server'); win.show(); } }, { label: '退出登录', icon: path.join(__static, './static/quit.png'), click:()=>{ win.close(); } }, ]) // 点击图标展示 tray.on('click',() => { win.show(); }); // 鼠标放置上去显示的文本 tray.setToolTip('PDF管理工具'); tray.setContextMenu(contextMenu); })
到此这篇关于electron最小化托盘设置的文章就介绍到这了,更多相关electron最小化托盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue Element 分组+多选+可搜索Select选择器实现示例
这篇文章主要介绍了Vue Element 分组+多选+可搜索Select选择器实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07antd Select下拉菜单动态添加option里的内容操作
这篇文章主要介绍了antd Select下拉菜单动态添加option里的内容操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11Vue3中watch监听对象的属性值(监听源必须是一个getter函数)
这篇文章主要介绍了Vue3中watch监听对象的属性值,监听源必须是一个getter函数,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-12-12
最新评论