Electron 从入门到实践06

博客介绍了使用Electron API创建托盘菜单的方法。先在原项目中新建images目录,将icon保存为file.png放入该目录,然后在main.js中增加托盘菜单代码,还提及了运行后的鼠标移入和右键效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用electron API创建托盘菜单
在原来的项目中新建一个images目录
将下面的icon保存到images目录内,并命名为file.png
在这里插入图片描述
在原来的项目基础上,直接在main.js中增加托盘菜单代码

const { app, BrowserWindow, Menu, Tray, ipcMain } = require('electron')  // 引入Tray
.....
// 托盘应用需要的变量
let tray;
let contextMenu
.....
  const menu = Menu.buildFromTemplate(template);
  //  开始设置菜单
  Menu.setApplicationMenu(menu);

  //  创建 Tray 对象,并指定托盘图标
  tray = new Tray('./images/file.png');
  //  创建用于托盘图标的上下文菜单
  contextMenu = Menu.buildFromTemplate([
      {label: '复制', role:'copy', click:()=>{win.webContents.copy()}},
      {label: '粘贴', role:'paste', click:()=>{win.webContents.paste()}},
      {label: '剪切', role:'cut', click:()=>{win.webContents.cut()}},
      {label: '关闭', role:'close', click:()=>{win.close()}}
  ])
  //  设置托盘图标的提示文本
  tray.setToolTip('这是一个托盘菜单')
  //  将托盘图标与上下文菜单关联
  tray.setContextMenu(contextMenu)
  // 加载index.html文件
  win.loadFile('index.html')
.....

运行后,鼠标移入效果
在这里插入图片描述
运行后,鼠标右键效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

haeasringnar

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值