最近公司开发桌面应用程序,要求使用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的上面,然后就很郁闷地调了很长时间才发现这个问题,所特别说明下,给大家提个醒。