node-webkit, nwjs system tray [Tray] practice

Referring to self: https: //www.cnblogs.com/xuanhun/p/3678943.html

Tray contains the title, tooltip, icon, menu, alticon five properties.

The title attribute is valid only in the mac system, and the icon will be displayed in the status bar icons together.

tooltip when the mouse is moved to the tray when the prompt appears above, are valid on all platforms.

tray icon in the tray icon is displayed.

menu in the menu is a tray, a gui.Menu object (Reference: Node-WebKit tutorial 6native-ui-api- menu of menu ).

alticon only in mac work, configure transition effect icon icon.

nwjs file as follows

Which package.nw catalog file as follows:

img file is put inside icon.png

No time to explain, the code

package.json

{
  "name": "tray-demo",
  "main": "tray.html",
  "nodejs":true,
   "window": {
   "title": "trayDemo",
   "toolbar": true, 
   "width": 800, 
   "height": 600,
   "resizable":true,
   "show_in_taskbar":true,
   "frame":true,
   "kiosk":false,
   "icon": "./img/icon.png"
  },

  "webkit":{
    "plugin":true
  }
}

tray.html

<html>
<head>
    <title>Feynman工具</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
    <h1>Feynman工具 Tray 测试</h1>
    <script>
        // Load native UI library
        var isShowWindow = true;
        // Load native UI library
        var gui = require('nw.gui');
        var win = gui.Window.get();
        var tray = new gui.Tray({ title: 'Feynman工具', icon: './img/icon.png' });
        tray.tooltip = 'Feynman工具';
        //添加一个菜单
        var menu = new gui.Menu();
        menu.append(new gui.MenuItem({ type: 'normal', label: '退出',click: function(){
            if(confirm("确定退出Feynman工具吗？")){
                win.close(true);
            }
        } }));
        tray.menu = menu;
        //click 托盘图标事件
        tray.on('click',
            function()
            {
                if(isShowWindow)
                {
                    win.hide();
                    isShowWindow = false;
                }
                else
                {
                    win.show();
                    isShowWindow = true;
                }
            }
        );
        win.on('close', function () {
          win.hide();
        });
    </script> 
</body>
</html>

注意icon.png最好是128x128png格式的图片，否则可能会显示不出来。

最后启动nw.exe，看看效果

大功告成！！！

node-webkit, nwjs system tray [Tray] practice

Guess you like