Electron 从入门到实践06

使用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')
.....

运行后,鼠标移入效果
在这里插入图片描述
运行后,鼠标右键效果
Electron 从入门到实践06_第1张图片

你可能感兴趣的:(Electron)