文章首发于：clawhub.club

Tray 系统托盘

创建原生应用菜单和上下文菜单。

添加图标和上下文菜单到系统通知区

dialog 对话框

显示用于打开和保存文件、警报等的本机系统对话框。

例子：在系统的右下角生成一个系统托盘。
左键点击：进入系统主页面
右键点击：弹出上下文菜单
关于：弹出系统信息
打开主窗口：进入系统主页面
重启应用：重启应用
退出：退出
如图：
系统托盘

上下文菜单

关于
系统主页面

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function createTray () {
  const menubar = `${__static}/logo.ico`
  tray = new Tray(menubar)
  tray.on('right-click', () => {
    // 创建右键菜单
    createContextMenu()
    // 弹出右键菜单
    tray.popUpContextMenu(contextMenu)
  })
  tray.on('click', (event, bounds) => {
    if (mainWindow === null) {
      createWindow()
      mainWindow.show()
    } else {
      mainWindow.show()
      mainWindow.focus()
    }
  })
}
// 右键菜单
function createContextMenu () {
  contextMenu = Menu.buildFromTemplate([
    {
      label: '关于',
      click () {
        dialog.showMessageBox({
          title: 'DOC',
          message: '文档管理系统',
          detail: `Version: 0.0.1\nAuthor: ClawHub`
        })
      }
    },
    {
      label: '打开主窗口',
      click () {
        if (mainWindow === null) {
          createWindow()
          mainWindow.show()
        } else {
          mainWindow.show()
          mainWindow.focus()
        }
      }
    },
    {
      label: '重启应用',
      click () {
        app.relaunch()
        app.exit(0)
      }
    },
    {
      role: 'quit',
      label: '退出'
    }
  ])
}