nwjs(node-webkit)桌面app自定义窗体事件、nwjs托盘tray的实现

自定义窗体按钮及事件绑定

假设我们在配置app的时候去掉了默认的窗体外框及事件并且打算自己定制，那么我们首先要在应用页面通过html布局各个窗体按钮，假设我们通过以下的代码自定义了窗体最小化、最大化、后台运行按钮

<div class="windowHandle">    <ul class="nav navbar-nav pull-right">        <li id="min-btn"><a href="javascript:void(0)"><span class="glyphicon glyphicon-minus-sign"></span></a></li>        <li id="max-btn"> <a href="javascript:void(0)"><span class="glyphicon glyphicon-plus-sign"></span></a></li>        <li id="close-btn"> <a href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a></li>      </u></div>

然后我们定义了相关按钮的点击事件：

#使应用最小化到托盘function backgroudApp(gui){    win.hide();}#使应用最小化到任务栏function minimizeApp(gui){    win.on('minimize', function () {       win.removeAllListeners('minimize');       });    win.minimize();}#最大化应用function expendApp(gui){    win.on('maximize', function () {        win.removeAllListeners('maximize');         });    win.maximize();}#toggle窗体最小化和最大化function unexpendApp(gui){    win.on('restore', function () {            win.removeAllListeners('restore');              });    win.restore();}

接下来我们需要在应用初始化时为自定义按钮绑定上述事件 (通过jQuery绑定)

#首先加载gui模块并且获得窗体组件var gui = require('nw.gui');var win = gui.Window.get();#定义立即执行的匿名函数(function(){    #窗体展现    win.show();    #托盘事件    showTray(gui);    var ismaxmize = true;    #通过函数表达式定义函数    var windowEvent = function() {        #为关闭按钮绑定事件        $("#close-btn").click(function() {            closeApp();        });        #为最小化按钮绑定事件        $("#min-btn").click(function() {            minimizeApp(gui);        });        #最大化按钮的事件绑定以及toggle绑定        $("#max-btn").click(function() {            if (ismaxmize) {                expendApp(gui);                ismaxmize = false;            } else {                unexpendApp(gui);                ismaxmize = true;            }        });    }    windowEvent();    #函数调用    })

应用的托盘事件以及托盘操作设置

function showTray(gui){    #获取应用目录     dirname = require('./util').dirname;     #获取托盘图片位置     var path_ = pathModule.join(dirname, 'images/halo.png');     #创建托盘     tray = new gui.Tray({title: 'halo', icon:path_ });     tray.tooltip = 'halo';     //添加一个菜单         var menu = new gui.Menu();     menu.append(new gui.MenuItem({label: ' 退     出', icon:path_,}));     tray.menu = menu;      #托盘点击事件     tray.on('click', function() {         win.show();     });     win.on('close', function (event) {     });     tray.menu.items[0].click = function() {        win.hide();        #在这一部分可以添加应用的终结执行命令        tray.remove();        tray = null;        win.removeAllListeners('close');        gui.App.quit();         this.close(true);     };  }