systemTrayにアプリelectronjsを表示する方法-jsチュートリアル-php.cn

systemTrayにアプリelectronjsを表示する方法

WBOY

リリース： 2024-07-18 21:34:53

オリジナル

1071 人が閲覧しました

how to show the app electronjs in the systemTray

導入

Electron JS は、JavaScript、HTML、CSS などの Web テクノロジーを使用してデスクトップアプリケーションを構築するための一般的なフレームワークです。デスクトップアプリケーションの重要な機能の 1 つは、デスクトップアプリケーションをシステムトレイと統合できることで、ユーザーは主要な機能や設定に簡単にアクセスできます。この記事では、Electron JS アプリケーションの作成とシステムトレイとの統合について説明します。

システムトレイにアプリを表示する

アプリケーションをシステムトレイに表示するには、Electron から Tray クラスのインスタンスを作成する必要があります。このインスタンスは、システムトレイ内のアプリをアイコンで表します。

次の行を main.js ファイルに追加します。

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

ログイン後にコピー

アイコンのカスタマイズ

トレイアイコンを変更するには、トレイコンストラクターのパスを更新します。

tray = new Tray('path/to/new_icon.png');

ログイン後にコピー

トレイアイコンとして使用する有効な画像ファイルをパスが指していることを確認してください。

表示、非表示、および終了ボタンの追加

システムトレイメニューの機能を強化するために、アプリケーションの表示、非表示、終了のオプションを追加できます。 main.js ファイルを次のように変更します:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

ログイン後にコピー

説明

アプリボタンを表示:

   {
     label: 'Show App',
     click: () => {
       mainWindow.show();
     }
   }

ログイン後にコピー

このメニュー項目をクリックすると、アプリケーションのウィンドウが再び表示されます。

アプリボタンを非表示:

   {
     label: 'Hide App',
     click: () => {
       mainWindow.hide();
     }
   }

ログイン後にコピー

このメニュー項目は、アプリケーションをシステムトレイに最小化し、タスクバーから非表示にします。

終了ボタン:

   {
     label: 'Exit',
     click: () => {
       app.quit();
     }
   }

ログイン後にコピー

このメニュー項目を選択すると、アプリケーションが終了します。

完全なコンテキストメニューの例

設定ウィンドウを開いたり、アプリケーション情報を表示したりするなど、オプションを追加してコンテキストメニューをさらにカスタマイズできます。

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Settings',
      click: () => {
        // Open a settings window
      }
    },
    {
      label: 'About',
      click: () => {
        // Show about information
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

ログイン後にコピー

結論

これらの手順に従うことで、システムトレイとシームレスに統合する Electron JS を使用したデスクトップアプリケーションを作成できます。この統合により、システムトレイから直接アプリの重要な機能に簡単にアクセスできるようになり、ユーザーエクスペリエンスが向上します。アプリケーションの表示、非表示、終了のいずれの場合でも、システムトレイはユーザーがアプリを操作するための便利な方法を提供します。

以上がsystemTrayにアプリelectronjsを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。