systemTray에 앱 electronicjs를 표시하는 방법

소개

Electron JS는 JavaScript, HTML, CSS와 같은 웹 기술을 사용하여 데스크톱 애플리케이션을 구축하는 데 널리 사용되는 프레임워크입니다. 데스크탑 애플리케이션의 중요한 기능 중 하나는 시스템 트레이와 통합하여 사용자가 주요 기능과 설정에 쉽게 액세스할 수 있다는 것입니다. 이 글은 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);
}

설명

1. 앱 버튼 표시:

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

이 메뉴 항목을 클릭하면 애플리케이션 창을 다시 표시합니다.

1. 앱 버튼 숨기기:

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

이 메뉴 항목은 애플리케이션을 시스템 트레이로 최소화하여 작업 표시줄에서 숨깁니다.

1. 종료 버튼:

   {
     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에 앱 electronicjs를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!