electron实现桌面端隐藏到托盘

男娘i 2022-05-21 12:40 513阅读 0赞

最近学习了下electron，需要实现一个托盘功能，下面是我的实现，如果有更好的实现方法，希望大佬指正下  
下面是项目地址:[码云项目地址][Link 1]  
我们首先要了解一下托盘功能，只有了解了托盘才能更好地写代码实现它。  
1.首先我们需要我们的的桌面程序在右下角也就是系统通知区添加图标和上下文菜单，这部分我们可以用Tray部分的API实现：[官网Tray方面的API][Tray_API]  
2.其次我们现在可以实现下方系统通知区的功能，但需要在点关闭的时候把window隐藏起来，并且任务栏也一并需要隐藏，在点击系统通知区的图标时再把界面显示出来，这部分代码我们可以通过BrowserWindow的一些事件钩子来实现[BrowserWindow官网API][BrowserWindow_API]

梳理里思路后我直接贴出我的代码，再结合代码一点点看之前所说的实现方法

**main.js**的代码

const electron = require('electron');
    const { app, Menu, Tray } = electron;
    const { BrowserWindow } = electron;
    const path = require('path');
    
    let win;
    let tray = null
    function createWindow() {
      // 创建窗口并加载页面
      win = new BrowserWindow({
       width: 800, height: 600, icon: path.join(__dirname, 'icon.ico')});
      win.loadURL(`file://${__dirname}/index.html`);
    
      // 打开窗口的调试工具
      win.webContents.openDevTools();
      win.setMenu(null)
      // 窗口关闭的监听  
      win.on('closed', (event) => { win = null; }); // 当我们点击关闭时触发close事件，我们按照之前的思路在关闭时，隐藏窗口，隐藏任务栏窗口 // event.preventDefault(); 禁止关闭行为(非常必要，因为我们并不是想要关闭窗口，所以需要禁止默认行为) win.on('close', (event) => { win.hide(); win.setSkipTaskbar(true); event.preventDefault(); }); win.on('show', () => { tray.setHighlightMode('always') }) win.on('hide', () => { tray.setHighlightMode('never') }) //创建系统通知区菜单 tray = new Tray(path.join(__dirname, 'icon.ico')); const contextMenu = Menu.buildFromTemplate([ {label: '退出', click: () => {win.destroy()}},//我们需要在这里有一个真正的退出（这里直接强制退出） ]) tray.setToolTip('My托盘测试') tray.setContextMenu(contextMenu) tray.on('click', ()=>{ //我们这里模拟桌面程序点击通知区图标实现打开关闭应用的功能 win.isVisible() ? win.hide() : win.show() win.isVisible() ?win.setSkipTaskbar(false):win.setSkipTaskbar(true); }) } app.on('ready', createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } });

这样我们就实现了一个比较基础的托盘功能  
![这里写图片描述][70]

[Link 1]: https://gitee.com/xiaofengfeng01/electron-tray
[Tray_API]: https://electronjs.org/docs/api/tray
[BrowserWindow_API]: https://electronjs.org/docs/api/browser-window
[70]: /images/20220521/7bf39e5d13db485790816f21e83697f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，513人围观）

还没有评论，来说两句吧...

相关阅读

相关 C# 窗体隐藏到托盘

1.首先添加个notifyicon控件，并可以在属性中设置图标样式 ![20191230144134315.png][]![20191230144217911.png][]

分手后的思念是犯贱/ 2023年06月26日 05:40/ 0 赞/ 3 阅读

相关 Electron打包vue项目成桌面端程序

准备工作所有的工作都是在vue项目根目录下进行 vue项目下执行`npm run build`打包生成dist文件夹备用一、安装electron 在vue

青旅半醒/ 2022年12月10日 07:27/ 0 赞/ 398 阅读

相关 Electron开发桌面端程序

一、配置开发环境安装nodejs，这个网上教程很多二、创建应用 1.创建项目文件目录 electron-app/ ├── package.j

素颜马尾好姑娘i/ 2022年12月06日 01:23/ 0 赞/ 251 阅读

相关 electron实现桌面应用

1. 简介 [官网][Link 1] Electron是由GitHub开发，使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

爱被打了一巴掌/ 2022年11月29日 13:10/ 0 赞/ 348 阅读

相关 Electron实现桌面日历

前言概述本文介绍使用Electron来实现桌面日历示例，该桌面日历可切换年份和月份的数据，可显示假期的数据等不同功能；开发环境：no

清疚/ 2022年10月09日 14:27/ 0 赞/ 251 阅读

相关 Qt 实现系统托盘，托盘菜单，托盘消息

Qt 实现系统托盘，托盘菜单，托盘消息系统托盘就是运行的某个程序在电脑右下角的小图标，相信大家都很熟悉。QT 提供了QSystemTrayIcon类用于实现程序的托盘。

妖狐艹你老母/ 2022年09月30日 10:51/ 0 赞/ 308 阅读

相关 electron实现桌面端隐藏到托盘

最近学习了下electron，需要实现一个托盘功能，下面是我的实现，如果有更好的实现方法，希望大佬指正下下面是项目地址:[码云项目地址][Link 1] 我们首先要了

男娘i/ 2022年05月21日 12:40/ 0 赞/ 514 阅读

相关基于 Electron 的 Hexo 桌面客户端 HexoClient

HexoClient 详细介绍基于Electron的Hexo桌面客户端，欢迎各路大神添砖加瓦。功能简介文章添加、修改、删除。文章实时预览。

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 02:12/ 0 赞/ 240 阅读

相关 Electron开发桌面应用

> 由 [Bazzzinga威][Bazzzinga] 同学翻译自 Medium。[https://medium.com/developers-writing/building

系统管理员/ 2022年04月25日 03:28/ 0 赞/ 280 阅读

相关 electron桌面端与加载的webview通信

webview通过postMessage发送消息，并监听消息返回 // webview向桌面端发送消息 let msg = '测试消息'; windo

布满荆棘的人生/ 2022年02月01日 03:19/ 0 赞/ 1190 阅读