ノードのWebKit、nwjsシステムトレイ[トレイ]プラクティス

自己を参照します。https：//www.cnblogs.com/xuanhun/p/3678943.html

トレイは、タイトル、ツールチップ、アイコン、メニュー、含まれてい alticon 5つのプロパティを。

title属性は、Macのシステムでは有効で、アイコンが一緒にステータスバーアイコンで表示されます。

ツールチップ上の時にプロンプトが表示され、マウスがトレイに移動したときに、すべてのプラットフォーム上で有効です。

トレイアイコントレイアイコンが表示されています。

メニューのメニューは、トレイ、gui.Menuオブジェクト（：基準となるメニューのノードのWebKitチュートリアル6native-UI-API-メニュー）。

Macのみの作業は、configureトランジションエフェクトアイコンアイコンでalticon。

nwjs次のようにファイル

どの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>

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

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

大功告成！！！

ノードのWebKit、nwjsシステムトレイ[トレイ]プラクティス

おすすめ