Electron中文手册
  • 文档概述
  • 开发指南目录
  • 构建说明(Linux)
  • 构建说明(macOS)
  • 构建说明(Windows)
  • 构建系统概述
  • 编码规范
  • 在 macOS 中调试
  • 在 Windows 中调试
  • 在C ++代码中使用clang-format
  • 在调试器中设置符号服务器
  • 源代码目录结构
  • Chrome升级清单
  • Chromium 开发指南
  • V8 开发指南
  • 教程目录
    • 关于 Electron
    • Electron 版本说明
    • API弃用说明
    • 快速入门
    • 支持的平台
    • 桌面环境集成
    • 系统通知
    • 离屏渲染
    • 在线/离线事件检测
    • 多线程
    • REPL
    • 键盘快捷键
    • DevTools扩展
    • 使用原生模块
    • 使用 Pepper Flash 插件
    • 使用 Selenium 和 WebDriver
    • 使用 Widevine CDM 插件
    • 应用分发
    • 应用打包
    • 主进程调试
    • 使用 node-inspector 进行主进程调试
    • 使用 VSCode 进行主进程调试
    • Mac App Store应用提交指南
    • Windows App Store应用提交指南
    • 安全,本地功能和你的责任
    • Headless CI Systems 测试
  • API接口目录
    • API接口之公用接口
      • 应用语言
      • 开发概要
      • 专业术语
      • 常见问题
      • 环境变量
      • 快捷键字符串
      • 命令行
      • 客户端请求
      • 剪贴板
      • <File> H5 File文件操作
      • 无框窗口
      • <window.open> window.open打开新窗口或打开时传递消息
      • 沙盒选项
    • API接口之主进程接口
      • 整体控制
      • 全局快捷键
      • 图标创建与应用
      • 屏幕
      • 窗口
      • 菜单
      • 菜单项
      • 系统托盘
      • 网页内容
      • 从主进程到渲染进程的异步通信
      • 对话框
      • 创建和控制视图
      • 会话
      • 会话,缓存和代理等控制
      • 页面请求
      • HTTP/HTTPS请求处理
      • 协议的注册和处理
      • 使用系统默认应用程序管理文件或URL
      • 下载项管理
      • 进程控制
      • Chromium原生网络库
      • 获取系统首选项
      • 电源状态
      • 节能管理
      • 调试工具
      • 奔溃报告
      • 性能数据收集
      • 自动更新
      • TouchBar触摸条
      • TouchBar触摸条按钮
      • TouchBar触摸条拾色器
      • TouchBar触摸条分组
      • TouchBar触摸条scrubber
      • TouchBar触摸条分段控件
      • TouchBar触摸条label标签
      • TouchBar触摸条弹出框
      • TouchBar触摸条滑块
      • TouchBar触摸条间隔符
    • API接口之渲染进程接口
      • 页面渲染
      • <webview> webview标签
      • 渲染进程与主进程通信
      • 从渲染进程到主进程的异步通信
      • 子窗口
      • 捕获桌面资源
  • 结构列表
    • 蓝牙设备对象
    • 证书对象
    • 证书主体对象
    • Cookie对象
    • 崩溃报告对象
    • 桌面捕获源对象
    • 显示器对象
    • 打印机信息对象
    • 文件过滤器对象
    • 最近使用的项目
    • 常用列表项
    • CPU使用率对象即程序占用的CPU资源
    • IO值对象
    • 内存信息对象
    • 进程内存信息对象
    • 内存使用详细信息
    • Mime类型缓冲区
    • 矩形对象
    • 删除客户端证书对象
    • 删除密码对象
    • Scrubber项对象
    • 分段控制对象
    • 快捷方式对象
    • 任务对象
    • 缩略图工具栏按钮对象
    • 上传blob对象
    • 上传数据对象
    • 上传文件系统对象
    • 上传文件对象
    • 上传原始数据对象
Powered by GitBook
On this page
  • tray.displayBalloon(options) Windows
  • tray.popUpContextMenu([menu, position]) macOS Windows
  • tray.setContextMenu(menu)
  • tray.getBounds() macOS Windows
  • tray.isDestroyed()

Was this helpful?

  1. API接口目录
  2. API接口之主进程接口

系统托盘

Previous菜单项Next网页内容

Last updated 4 years ago

Was this helpful?

将图标和上下文菜单添加到系统托盘。

进程:

Tray是一个[EventEmitter][event-emitter].

const {app, Menu, Tray} = require('electron')
let tray = null
app.on('ready', () => {
  tray = new Tray('/path/to/my/icon')
  const contextMenu = Menu.buildFromTemplate([
    {label: 'Item1', type: 'radio'},
    {label: 'Item2', type: 'radio'},
    {label: 'Item3', type: 'radio', checked: true},
    {label: 'Item4', type: 'radio'}
  ])
  tray.setToolTip('这是我的应用程序.')
  tray.setContextMenu(contextMenu)
})

平台限制:

  • 在Windows上,建议使用ICO图标以获得最佳的视觉效果。

  • 如果应用程序指示器没有一个上下文菜单时,它将不会显示。

  • 在Linux中,如果支持应用程序指示器则使用它,否则使用 GtkStatusIcon。

  • 在Linux的发行版中,仅支持应用程序指示器,您需要安装 libappindicator1 ,以便使用托盘图标(tray icon)。

  • 在Linux中,如果使用了应用指示器, click事件则被忽略.

  • 在Linux中,为了让个别的 MenuItem 起效,你必须再次调用 setContextMenu .例如:

    ```JavaScript

    const {app, Menu, Tray} = require('electron')

let appIcon = null app.on('ready', () => { appIcon = new Tray('/path/to/my/icon') const contextMenu = Menu.buildFromTemplate([ {label: 'Item1', type: 'radio'}, {label: 'Item2', type: 'radio'} ])

//更改上下文菜单 contextMenu.items[1].checked = false //因为我们修改了上下文菜单,所以再次为Linux调用 appIcon.setContextMenu(contextMenu) })

如果你想在所有平台上保持完全相同的行为,你不应该依赖于click事件,而是附加上下文菜单到托盘图标。

### `new Tray(image)`
> 用途:**创建与 `image`关联的新托盘图标**

* `image` ([NativeImage](native-image.md) | String)

### 实例事件

 `Tray` 模块内含下列事件:

#### 事件: 'click'
> 触发:**单击托盘图标时**

* `event` Event
  * `altKey` Boolean
  * `shiftKey` Boolean
  * `ctrlKey` Boolean
  * `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界

#### 事件: 'right-click' _macOS_ _Windows_
> 触发:**右击托盘图标时**

* `event` Event
  * `altKey` Boolean
  * `shiftKey` Boolean
  * `ctrlKey` Boolean
  * `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界

#### 事件: 'double-click' _macOS_ _Windows_
> 触发:**双击托盘图标时**

* `event` Event
  * `altKey` Boolean
  * `shiftKey` Boolean
  * `ctrlKey` Boolean
  * `metaKey` Boolean
* `bounds` [Rectangle](structures/rectangle.md) - 托盘图标的边界



#### 事件: 'balloon-show' _Windows_
> 触发:**显示托盘气泡时**

#### 事件: 'balloon-click' _Windows_
> 触发:**点击托盘气泡时**

#### 事件: 'balloon-closed' _Windows_
> 触发:**因超时而关闭托盘气泡时**

#### 事件: 'drop' _macOS_
> 触发:**将任何内容拖动到托盘图标时**

#### 事件: 'drop-files' _macOS_
> 触发:**将文件拖动到托盘图标时**

* `event` Event
* `files` String[] - 被拖动文件的路径.

#### 事件: 'drop-text' _macOS_
> 触发:**将文本内容拖动到托盘图标时**

* `event` Event
* `text` String - 被拖动的文本

#### 事件: 'drag-enter' _macOS_
> 触发:**当拖动操作进入托盘图标时**

#### 事件: 'drag-leave' _macOS_
> 触发:**当拖动操作离开托盘图标时**

#### 事件: 'drag-end' _macOS_
> 触发:**托盘或其它地方结束拖动时**

## 实例方法
 `Tray` 模块有以下方法:

#### `tray.destroy()`
> 用途:**销毁托盘图标**

#### `tray.setImage(image)`
> 用途:**设置与此托盘图标相关联的 `image`**

* `image` ([NativeImage](native-image.md) | String)

#### `tray.setPressedImage(image)` _macOS_
> 用途:**在macOS中点按托盘图标时,设置与此托盘图标相关联的 `image`**

* `image` [NativeImage](native-image.md)

#### `tray.setToolTip(toolTip)`
> 用途:**设置此托盘图标的悬停提示内容**

* `toolTip` String

#### `tray.setTitle(title)` _macOS_
> 用途:**状态栏里托盘图标旁边需要显示的标题**

* `title` String

#### `tray.setHighlightMode(mode)` _macOS_
> 用途:**当托盘图标被点击的时候,是否高亮它的背景色为蓝色**

* `mode` String - 高亮方式,可选以下:
  * `selection` - 单击托盘图标或其上下文菜单处于打开状态时,进行高亮。这是默认值。
  * `always` - 始终高亮
  * `never` - 禁止高亮


**注意:** 当窗口可见性进行更改时,你可以使用 `highlightMode`模块让一个 [`BrowserWindow`](browser-window.md) 切换为 `'never'` 或 `'always'` 模式.
```JavaScript
const {BrowserWindow, Tray} = require('electron')
const win = new BrowserWindow({width: 800, height: 600})
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
  win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
  tray.setHighlightMode('always')
})
win.on('hide', () => {
  tray.setHighlightMode('never')
})

tray.displayBalloon(options) Windows

用途:显示托盘气球

  • options Object

    • title String - (可选)

    • content String - (可选)

tray.popUpContextMenu([menu, position]) macOS Windows

用途:弹出托盘图标的上下文菜单

  • menu Menu (可选)

  • position Object (可选) - 弹出位置。

    • x Integer

    • y Integer

划过 menu时则显示 menu,而不是托盘图标的上下文菜单。position仅在Windows上可用,默认为(0,0)。

tray.setContextMenu(menu)

用途:设置此图标的上下文菜单。

  • menu Menu

tray.getBounds() macOS Windows

tray.isDestroyed()

用途:判断托盘图标是否已被销毁( Boolean)

icon ( | String) - (可选)

用途:获取此图标的 bounds对象()

[event-emitter]:

NativeImage
Rectangle
https://nodejs.org/api/events.html#events_class_eventemitter
主进程