bagaimana untuk menunjukkan electronjs aplikasi dalam systemTray

pengenalan

Electron JS ialah rangka kerja popular untuk membina aplikasi desktop menggunakan teknologi web seperti JavaScript, HTML dan CSS. Salah satu ciri penting aplikasi desktop ialah keupayaan untuk mengintegrasikannya dengan dulang sistem, membolehkan pengguna mengakses fungsi dan tetapan utama dengan mudah. Artikel ini akan membimbing anda membuat aplikasi Electron JS dan menyepadukannya dengan dulang sistem.

Tunjukkan Apl dalam Dulang Sistem

Untuk memaparkan aplikasi anda dalam dulang sistem, anda perlu mencipta contoh kelas Dulang daripada Electron. Kejadian ini akan mewakili apl dalam dulang sistem dengan ikon.

Tambah baris berikut pada fail 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);
}

Menyesuaikan Ikon

Untuk menukar ikon dulang, kemas kini laluan dalam pembina Dulang:

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

Pastikan laluan menghala ke fail imej yang sah yang anda mahu gunakan sebagai ikon dulang anda.

Menambah Butang Tunjukkan, Sembunyikan dan Keluar

Untuk meningkatkan kefungsian menu dulang sistem anda, anda boleh menambah pilihan untuk menunjukkan, menyembunyikan dan keluar dari aplikasi. Ubah suai fail main.js seperti berikut:

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);
}

Penjelasan

1. Tunjukkan Butang Apl:

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

Item menu ini akan memaparkan semula tetingkap aplikasi apabila diklik.

1. Sembunyikan Butang Apl:

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

Item menu ini akan meminimumkan aplikasi ke dulang sistem, menyembunyikannya daripada bar tugas.

1. Butang Keluar:

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

Item menu ini akan menutup aplikasi apabila dipilih.

Contoh Menu Konteks Lengkap

Anda boleh menyesuaikan lagi menu konteks dengan menambahkan lebih banyak pilihan, seperti membuka tetingkap tetapan atau memaparkan maklumat aplikasi.

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);
}

Kesimpulan

Dengan mengikuti langkah ini, anda boleh mencipta aplikasi desktop dengan Electron JS yang berintegrasi dengan lancar dengan dulang sistem. Penyepaduan ini meningkatkan pengalaman pengguna dengan menyediakan akses mudah kepada fungsi apl penting secara terus daripada dulang sistem. Sama ada menunjukkan, menyembunyikan atau keluar dari aplikasi, dulang sistem menawarkan cara yang mudah untuk pengguna berinteraksi dengan apl anda.

Atas ialah kandungan terperinci bagaimana untuk menunjukkan electronjs aplikasi dalam systemTray. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!