electron
  • 如何通过 Menu 模块来创建 macos 上的 Dock 菜单

2. Dock 菜单是什么

  • Q:Dock 菜单是什么?
  • A:Dock 菜单,这是 macos 特有的。
  • 比如上图中框选出来的 vscode 图标,这其实就是一个 Dock 菜单项。

3. demo

js
// index.js
const { app, BrowserWindow, Menu } = require('electron')

let win
function createWindow() {
  win = new BrowserWindow()
  win.loadFile('./index.html')
}

function createDockMenu() {
  const dockTempalte = [
    {
      label: '菜单一',
      click() {
        console.log('New Window')
      },
    },
    {
      label: '菜单二',
      submenu: [{ label: 'Foo' }, { label: 'Bar' }],
    },
    {
      label: '其他...',
    },
  ]

  const dockMenu = Menu.buildFromTemplate(dockTempalte)
  app.dock.setMenu(dockMenu)
}

app.whenReady().then(() => {
  createWindow()
  createDockMenu()
})
  • createWindow() 不是必须的,即便没有窗口,也不影响 dock 菜单的创建。
  • app.dock.setMenu(dockMenu) 创建 macos 的 dock 菜单。

最终效果

右键底部 Dock 栏中的应用图标,会弹出配置好的 Dock 菜单项。

Discussions

正在载入评论…