node-webkit 相关使用心得 --系统托盘（tray）的使用方法

最新推荐文章于 2023-07-10 17:07:54 发布
最新推荐文章于 2023-07-10 17:07:54 发布
阅读量5k 收藏 1
点赞数
文章标签： webkit 桌面应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzs_123/article/details/46634053
版权

最近公司开发桌面应用程序，要求使用node-webkit进行开发，对于从未涉及过这方面的菜鸟只能硬着头皮学习了几天，通过不断测试练习，偶有心得，在此写出来供需要的网友们参考应用。

下图是我的主要目录结构：

trayDemo.html

<!DOCTYPE html>
<html>
<head>
    <title>trayDemo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
    <h1>Tray 测试</h1>
    <script>
        var isShowWindow = true;
        // Load native UI library
        var gui = require('nw.gui');
        var win = gui.Window.get();
        var tray = new gui.Tray({ title: '托盘', icon: 'images/logo.png' });
        tray.tooltip = '点此打开';
        //添加一个菜单
        var menu = new gui.Menu();
        menu.append(new gui.MenuItem({ type: 'checkbox', label: '选择我' }));

        // Add some items 
        menu.append(new gui.MenuItem({ type: 'separator' }));
        menu.append(new gui.MenuItem({ label: 'Item B' }));
        menu.append(new gui.MenuItem({ label: 'Item C' }));
        menu.append(new gui.MenuItem({
            label: 'Quit',
            click: function() {
                //gui.App.quit();;
                gui.Window.get().close();
            }
        }));
        // Remove one item
        menu.removeAt(1);
        // Popup as context menu
        menu.popup(10, 10);

        // Iterate menu's items
        for (var i = 0; i < menu.items.length; ++i) {
            console.log(menu.items[i]);
            
        }
        
        //托盘菜单点击事件
        menu.items[2].click = function() {
            gui.Window.get().close();
          };

        tray.menu = menu;
        //click事件
        tray.on('click',
            function()
            {
                if(isShowWindow)
                {
                    win.hide();
                    isShowWindow = false;
                }
                else
                {
                    win.show();
                    isShowWindow = true;
                }
            }
        );
    </script>  
</body>
</html>


首先是基本的package.json文件的相关配置，我在网上找了一个带有注释的文件说明，方便学习，代码如下：

package.json

{
	"main": "trayDemo.html", // 启动页面
	"name": "node Demo",
	"description": "demo app of node-webkit",         /* APP的简单描述 */
	"version": "0.1.0",                               /* APP的版本号 */
	"keywords": [ "demo", "node-webkit" ],            /* APP的关键字，搜索APP时用到 */
	"window": {                                       /* APP的窗口属性 */
		"icon": "images/logo.png",                           /* APP图标（windows下，状态栏上可见） */
		"toolbar": false,                              /* 是否显示工具栏 */
		"width": 400,                                 /* 窗口初始化大小 */
		"height": 640,
		"min-width":400,
		"min-height":640,
		"max-width":400,
		"max-height":640,
		"as_desktop" : false,
		"resizable" : false,                           /*是否允许窗口改变大小*/
		"always-on-top" : false,
		"show_in_taskbar":true,						/*任务栏是否显示应用程序图标*/
		"fullscreen" : false,
		"position": "center",
		"frame": false                                 /* 是否显示外窗体，如最大化、最小化、关闭按钮 */
	},
	"user-agent": "%name %ver %nwver %webkit_ver %osinfo" /* 可自定义APP的UA */
}

相信使用node-webkit的博友基本都知道，这个是nw不可缺少的主要部分，其中参数"main"也可以写成“main”:"http://localhost:8080/test.html",此链接可以是本地的web服务（非上图的目录中的部分）


今天研究nw的系统托盘（tray），网上找了很多资料例子，测试了好长时间才有点起色，独乐乐不如众乐乐，所以拿出来分享下，给有需要的博友参考下，避免走弯路

在github中（https://github.com/nwjs/nw.js/wiki/Tray）原文这样：

// Load native UI library
var gui = require('nw.gui');

// Create a tray icon
var tray = new gui.Tray({ title: 'Tray', icon: 'img/icon.png' });

// Give it a menu
var menu = new gui.Menu();
menu.append(new gui.MenuItem({ type: 'checkbox', label: 'box1' }));
tray.menu = menu;

// Remove the tray
tray.remove();
tray = null;
贴到我自己的项目中显示不了，未能起效果，后又到 https://github.com/nwjs/nw.js/wiki/Menu 参考了一下代码 

// Load native UI library
var gui = require('nw.gui');

// Create an empty menu
var menu = new gui.Menu();

// Add some items
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));

// Remove one item
menu.removeAt(1);

// Popup as context menu
menu.popup(10, 10);

// Iterate menu's items
for (var i = 0; i < menu.items.length; ++i) {
  console.log(menu.items[i]);
}

综合两段代码，改写成以下可以使用系统托盘的代码：

<script>
        var isShowWindow = true;
        // Load native UI library
        var gui = require('nw.gui');
        var win = gui.Window.get();
        var tray = new gui.Tray({ title: '玄魂的软件', icon: 'images/logo.png' });
        tray.tooltip = '点此打开';
        //添加一个菜单
        var menu = new gui.Menu();
        menu.append(new gui.MenuItem({ type: 'checkbox', label: '选择我' }));
        //menu.append(new gui.MenuItem({ label: '退出' }));
        // Add some items
        menu.append(new gui.MenuItem({ type: 'separator' }));
        menu.append(new gui.MenuItem({ label: 'Item B' }));
        menu.append(new gui.MenuItem({ label: 'Item C' }));
        menu.append(new gui.MenuItem({
            label: 'Quit',
            click: function() {
                //gui.App.quit();;
                gui.Window.get().close();
            }
        }));
        // Remove one item
        //menu.removeAt(1); 
        // Popup as context menu 页面菜单 将其注释掉，进入页面不显示
        //menu.popup(10, 10);

        // Iterate menu's items
        for (var i = 0; i < menu.items.length; ++i) {
            console.log(menu.items[i]);
            
        }
        
        //托盘菜单点击事件
        menu.items[2].click = function() {
            gui.Window.get().close(); //根据上面的列出的托盘菜单第三个即Item C点击事件是程序关闭
          };

        tray.menu = menu;
        //click事件
        tray.on('click',
            function()
            {
                if(isShowWindow)
                {
                    win.hide();
                    isShowWindow = false;
                }
                else
                {
                    win.show();
                    isShowWindow = true;
                }
            }
        );
    </script>

需要注意的是如下图

圈1和圈2 的位置有先后问题，如果将2中的“ItemB”放到1之上那么显示的结果就是ItemB不能出现，当时想写一个托盘中程序退出的点击事件，将它放在了1的上面，然后就很郁闷地调了很长时间才发现这个问题，所特别说明下，给大家提个醒。


判罚之央
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nwjs(node-webkit)桌面app自定义窗体事件、nwjs托盘tray的实现
Lockey23的博客
08-06 8781
nwjs(node-webkit)开发 nwjs(node-webkit)自定义窗体事件 nwjs(node-webkit)托盘tray的实现 node
node-webkit项目最小化到托盘（右下角）
h5css3_linhuai的博客
02-20 2634
var isShowWindow = true; var gui = require('nw.gui'); var win = gui.Window.get(); var tray = new gui.Tray({ title:'My Application', icon:'icon.png'
node-webkit,nwjs 系统托盘【Tray】实践
weixin_30430169的博客
04-16 429
参照自：https://www.cnblogs.com/xuanhun/p/3678943.html Tray包含title、tooltip、icon、menu、alticon五个属性。 title属性只在mac系统下有效，会和icon图标一起显示在状态栏。 tooltip是当鼠标移动到tray上方时显示的提示语，在所有平台下都有效。 icon是tray显示在托盘中的图标。 menu是托...
node-webkit教程(9)native api 之Tray(托盘)
anlun的专栏
11-17 1567
node-webkit教程(9)native api 之Tray(托盘)  04/21/2014     玄魂     0    1019 从本篇文章开始，为您介绍Platform Services些列的API，本系列由以下类别： · App – 每个应用运行时全局api · Clipboard – 剪贴板 · Tray – 状态栏图标，消息通知 · File dialogs-文件选择
falafel:一个Node.js框架，使在tray.io上构建连接器变得非常简单
04-30
沙拉三明治 一个Node.js框架，使构建连接器变得异常容易。 建立在顶部，允许基于声明式操作的方法。 Falafel使用基于JavaScript的架构作为connectors.json的超集，但是与connectors.json不同，该架构还直接影响操作的运行。 例如，使用required使得在connector.json以及操作级别中都required一个字段。 目录： 破坏 要求 回复 动态输出架构 生成connector.json 实用程序 原始HTTP请求 测试连接器 入门 使用Yeoman生成器创建连接器，在出现提示时输入设置： yo trayio-nodejs-connector 接下来，以开发模式启动服务器（将自动生成connectors.json ）： NODE_ENV=development node main.js 项目结构 Falafel要求您遵循严格
js---javascript常用对象（Array）
weixin_46218101的博客
10-31 276
前端入门笔记之js（10） Array （数组）对象用于在单个的变量中存储多个值。 创建 Array 对象的4种语法： var arr1=new Array(); var arr2=new Array(size); var arr3=new Array(element0, element1, …, elementn); var arr4=[“ndjsn”,“ndi”,“dmciw9”]; var arr=new Array(3);//第一种，第二种类似就不过多阐述 arr[0]=“123”; arr[1]=
node-tray:用于在 OSX 上创建简单系统托盘应用程序的节点库
06-24
托盘 用于在 OSX 中创建简单系统托盘应用程序的节点库 目前仅在节点 0.10.x 上工作。 当NodObjC更新时，将支持 0.12.x 和 io.js。 ＃＃安装 npm install native-app tray --save ＃＃用法 tray依赖于native-app 。 您必须调用createApp并将app实例传递给createTray 。 var createApp = require ( 'native-app' ) var createTray = require ( 'tray' ) createApp ( function ( err , app ) { createTray ( app , function ( err , tray ) { tray . specify ( { title : 'Hello, world!'
nwjs node-webkit 桌面app自定义窗体事件 nwjs托盘tray的实现
qq_43747700的博客
01-11 707
nwjs node-webkit 桌面app自定义窗体事件 nwjs托盘tray的实现
node-webkit
09-23
Node-WebKit提供了一套本地API，允许Web应用访问操作系统级别的功能，如对话框（dialog）、托盘（tray）、剪贴板（clipboard）、桌面通知（notifications）等。这使得开发者可以构建具有原生外观和行为的应用程序，...
Hardcode-Tray：修复Linux中的硬编码托盘图标
02-03
修复Linux中的硬编码托盘图标 该脚本将自动检测您的默认主题，正确的图标大小，硬编码的应用程序，每个指示器的正确图标并进行修复。 所有这些都可以还原为原始图标。 主题 以下是支持Hardcode-Tray的主题列表： ...
tray-item-rs:多平台托盘指示器
05-03
多平台托盘指示器 请参阅因为当前缺少文档。 托盘指示器使用Linux上的gresources中的图标和Windows上的.rc -files中的图标。 这些资源必须打包成最终的二进制文件... 有关操作方法，请参见macos.rs示例。 去做： 文件
nw-tray-example:NW.js中的示例托盘应用程序
05-25
NW.js Tray应用程序示例这是一个示例项目，显示了如何使用NW.js设置托盘“仅”应用程序。 我将“ only”用引号引起来，因为可以显示一个可选的窗口（示例中已经设置了该窗口）。 尽管默认情况下该窗口从不可见，但该...
node-typescript-express-starter:入门服务器使用TypeScript表达Node.js
05-14
:outbox_tray: 提交 :squinting_face_with_tongue: 嘲弄 :memo: 基本要求 Node.js v10.15.3或更高版本（下载） NPM v6.4.1或更高版本 打字稿 模拟Json服务器 :hammer_and_wrench: 安装依赖项 满足基本要求后，...
JavaScript 数组方法大全
热门推荐
诗渊的博客
07-04 1万+
本文对JavaScript中数组方法进行了汇总，首先介绍了数组的创建等基本概念，然后详细介绍了数组各个方法的功能以及使用示例。
nw.js node-webkit系列（22）.nw执行过程及如何获取.nw真实路径
@黄小泽的个人博客
05-20 8969
本章节将以实际应用为例子，介绍.nw应用的运行过程及如何获取.nw应用的相关路径，如何获取其关联子.nw应用的绝对路径。 .nw应用的执行过程 当我们把.nw应用拖进nw.exe或者将两者打包成一个app.exe执行的时候，我们的应用文件是怎么执行打开的呢？ 现在已博主所用运行环境为例：电脑系统：win8.1；nw版本：0.12；测试应用：app.nw。 当我们按上述操作运行app.nw时
node-webkit学习(4)Native UI API 之window
anlun的专栏
11-17 1605
node-webkit学习(4)Native UI API 之window 文/玄魂 目录 node-webkit学习(4)Native UI API 之window 前言 4.1  window api 概述 4.2 获取和创建窗口 4.3 window对象属性和方法 4.3.1  Window.window 4.3.2  Window.x/Window.y 4.
Webkit内核探究——Webkit CSS实现
森明帮大于黑虎帮的博客
07-10 1041
CSS在Webkit中的实现属于相对独立的一个模块，注意这里说的是相对。CSS在Webkit中的作用自然是不言而喻的，在Web早期，文档的结构和样式还未分离的那个时代，HTML担负了文档的结构和样式这两个双重任 务，即HTML既负责文档的结构，同时文档的样式也通过HTML中通过标签的属性来指定。可想而知，在那个时候HMTL页面的开发和使用比起现在而言是多 么的不便。
win10安装ti-tray-menu.exe
最新发布
09-06
我们可以使用以下步骤来安装ti-tray-menu.exe在Win10上： 1. 首先，确保你已经下载了ti-tray-menu.exe文件。你可以从官方网站或信任的下载资源中获取这个文件。 2. 找到下载好的ti-tray-menu.exe文件的位置。通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值