当前位置: 华文世界 > 科技

HTML 也能开发桌面软件之 NW.js 中的托盘图标

2024-09-06科技

在前端的系列教程中我们已经向大家介绍了如下系列文章了:
01)NW.js 是什么?
02)NW.js 中的配置指南
03)NW.js 中的 App 应用程序类
04)NW.js 中的 Window 窗体类
05)NW.js 中的 Menu 菜单类
现在我们接着为大家介绍 NW.js 类库中的 托盘菜单 类。

Tray 类的基本介绍

Tray 是 NW.js 类库中用于创建系统托盘图标的功能类。系统托盘通常位于桌面操作系统的任务栏或菜单栏上,允许用户快速访问应用程序的某些功能,即使应用程序窗口没有打开或最小化。

类名

简短说明

Tray

用于创建和管理系统托盘图标的类

Tray 类的成员明细

属性明细:

属性

说明

tray.title

标题

tray.tooltip

工具提示

tray.icon

图标

tray.alticon (Mac)

替代图标(Mac)

tray.iconsAreTemplates (Mac)

图标是否为模板(Mac)

tray.menu

菜单

方法明细:

方法

说明

tray.remove()

移除托盘项

事件明细:

事件

说明

Event: click

点击事件

Tray 类的代码实例

配置文件

01)所属文件:`package.json`
02) 文件内容:

{ "name": "my-nw-app", "main": "index.html"}

页面文件

01)所属文件:`index.html`
02)文件内容:

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>NW.js 托盘示例</title></head><body> <p>NW.js 托盘示例</p> <p>此窗口可以被隐藏。请查看菜单栏中的托盘图标。</p> <script> // 确保nw.gui已加载 var gui = require('nw.gui'); // 获取当前窗口 var win = gui.Window.get(); // 创建一个托盘图标 var tray = new gui.Tray({ title: 'NW.js 应用', icon: 'icon.png' // 确保在应用目录中有一个名为icon.png的图标文件 }); // 创建菜单 var menu = new gui.Menu(); // 添加菜单项 menu.append(new gui.MenuItem({ type: 'normal', label: '显示窗口', click: function() { win.show(); win.focus(); } })); menu.append(new gui.MenuItem({ type: 'separator' })); menu.append(new gui.MenuItem({ type: 'normal', label: '退出', click: function() { gui.App.quit(); } })); // 将菜单附加到托盘 tray.menu = menu; // 允许窗口最小化到托盘 win.on('minimize', function() { this.hide(); }); // 允许关闭按钮最小化到托盘 win.on('close', function() { this.hide(); return false; }); </script></body></html>

运行截图