node-webkit,nwjs 系統托盤【Tray】實踐

時間 2019-11-13

標籤 node webkit nwjs 系統托盤 Tray 實踐简体版

原文原文鏈接

參照自：https://www.cnblogs.com/xuanhun/p/3678943.htmlhtml

Tray包含title、tooltip、icon、menu、alticon五個屬性。node

title屬性只在mac系統下有效，會和icon圖標一塊兒顯示在狀態欄。ios

tooltip是當鼠標移動到tray上方時顯示的提示語，在全部平臺下都有效。web

icon是tray顯示在托盤中的圖標。json

menu是托盤中的菜單，是一個 gui.Menu對象（參考：node-webkit教程6native-ui-api-之menu菜單）。api

alticon只有在mac下起做用，配置切換效果icon圖標。app

nwjs文件以下ide

其中package.nw目錄文件以下：工具

img文件裏面放的是icon.png測試

來不及解釋了，上碼

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>