Pembangunan Aplikasi Desktop Electron · Pelajaran

Aplikasi Dulang & Lencana

Cipta aplikasi yang berjalan dalam dulang sistem atau dok, menyediakan akses pantas dan memaparkan lencana untuk pemberitahuan yang belum dibaca.

Pelajaran 2 daripada 411 langkah

Aplikasi Dulang & Lencana ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Pengenalan kepada Aplikasi Dulang & Dok

Selamat datang! Dalam pelajaran ini, anda akan belajar cara menjadikan aplikasi Electron anda berada dalam dulang sistem atau dok macOS. Kedua-duanya sesuai untuk aplikasi yang berjalan di latar belakang atau memerlukan capaian pantas.

Dulang sistem (juga dikenali sebagai kawasan pemberitahuan) biasanya terdapat berhampiran jam pada Windows dan Linux. Pada macOS, aplikasi biasanya mempunyai ikon dalam dok atau bar menu di bahagian atas.

Mengapa Menggunakan Ciri Dulang/Dok?

Mengintegrasikan aplikasi dengan dulang sistem atau dok memberikan beberapa manfaat kepada aplikasi Electron anda:

  • Capaian Pantas: Pengguna boleh berinteraksi dengan aplikasi anda tanpa membuka tetingkap utamanya.
  • Tugas Latar Belakang: Sesuai untuk aplikasi yang berjalan berterusan, seperti klien sembang atau alat utiliti.
  • Kemas Kini Status: Paparkan penunjuk status ringkas atau jumlah pemberitahuan yang belum dibaca.
  • Kecekapan Sumber: Membolehkan tetingkap utama disembunyikan bagi mengurangkan kesesakan pada skrin.

Mencipta Ikon Dulang Asas

Modul Tray Electron membolehkan anda menambah ikon ke kawasan pemberitahuan sistem. Anda memerlukan fail imej untuk ikon anda.

Begini cara memulakan ikon dulang asas:

const { app, Tray } = require('electron');
const path = require('path');

let tray = null;
app.whenReady().then(() => {
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My First Electron Tray App');
});

Ikon Dulang dalam Tindakan

Cuba jalankan contoh ini. Ingat untuk meletakkan fail icon.png dalam direktori yang sama dengan main.js anda. Selepas dilancarkan, cari ikon aplikasi anda dalam dulang sistem (Windows/Linux) atau bar menu (macOS).

const { app, Tray } = require('electron');
const path = require('path');

let tray = null;

app.whenReady().then(() => {
  // IMPORTANT: For this code to run, place an 'icon.png' file
  // in the same directory as your main.js file.
  const iconPath = path.join(__dirname, 'icon.png');
  tray = new Tray(iconPath);
  tray.setToolTip('My Simple Tray App');
  console.log('Tray icon created. Check your system tray/dock!');
});

app.on('window-all-closed', () => {
  // For a tray app, you might want it to stay running even if windows close.
  // This example quits if no windows are open and not on macOS.
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('before-quit', () => {
  if (tray) tray.destroy(); // Clean up tray icon before quitting
});

Berinteraksi dengan Ikon Dulang

Ikon dulang statik tidak begitu berguna! Anda boleh menjadikannya interaktif dengan mendengar peristiwa seperti klik.

Tindakan biasa termasuk menunjukkan/menyembunyikan tetingkap utama atau membuka menu konteks.

Anda boleh menggunakan tray.on('click', () => { /* action */ }); untuk mengendalikan klik kiri.

Menambah Menu Konteks

Biasanya, pengguna menjangkakan klik kanan pada ikon dulang akan membuka menu dengan beberapa pilihan. Modul Menu Electron amat sesuai untuk tujuan ini.

Anda menentukan templat menu, kemudian melampirkannya pada ikon dulang menggunakan tray.setContextMenu().

const { Menu } = require('electron');

const contextMenu = Menu.buildFromTemplate([
  { label: 'Option One', type: 'normal', click: () => console.log('Option One clicked!') },
  { label: 'Option Two', type: 'normal', click: () => console.log('Option Two clicked!') },
  { type: 'separator' }, // A visual separator
  { label: 'Quit', role: 'quit' } // Standard quit option
]);

tray.setContextMenu(contextMenu);

Menu Dulang dalam Tindakan

Contoh ini menggabungkan ikon dulang dengan menu konteks. Klik kanan ikon dulang untuk melihat pilihan bagi menunjukkan, menyembunyikan atau keluar daripada aplikasi. Klik kiri akan menogol keterlihatan tetingkap.

Ingat untuk meletakkan fail icon.png dalam direktori yang sama.

const { app, BrowserWindow, Tray, Menu } = require('electron');
const path = require('path');

let mainWindow;
let tray;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    show: false, // Start hidden
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // A very simple HTML content for the window
  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Hello from Electron!</h1>
    <p>This is a hidden window. Click the tray icon or use its menu.</p>
    <button onclick="window.close()">Close Window</button>
  `);
}

app.whenReady().then(() => {
  createWindow();

  const iconPath = path.join(__dirname, 'icon.png'); // Place 'icon.png' here
  tray = new Tray(iconPath);
  tray.setToolTip('Electron Tray App with Menu');

  const contextMenu = Menu.buildFromTemplate([
    { label: 'Show Window', click: () => mainWindow.show() },
    { label: 'Hide Window', click: () => mainWindow.hide() },
    { type: 'separator' },
    { label: 'Quit', click: () => app.quit() }
  ]);
  tray.setContextMenu(contextMenu);

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });

  // Ensure app doesn't quit when window is closed
  mainWindow.on('close', (event) => {
    if (!app.isQuitting) { // Only hide if not explicitly quitting
      event.preventDefault();
      mainWindow.hide();
    }
  });

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  // If not macOS, and no tray icon, then quit
  if (process.platform !== 'darwin' && !tray) {
    app.quit();
  }
});

app.on('before-quit', () => {
  app.isQuitting = true; // Set a flag
  if (tray) tray.destroy();
});

Lencana Dok (Khusus macOS)

Pada macOS, aplikasi boleh memaparkan 'lencana' pada ikon doknya. Biasanya, lencana digunakan untuk menunjukkan jumlah item atau pemberitahuan yang belum dibaca.

Electron menyediakan kaedah app.setBadgeCount(count) untuk tujuan ini. Tetapkan count kepada 0 untuk mengosongkan lencana. Ciri ini khusus untuk macOS.

const { app } = require('electron');

// To set a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(5);
}

// To clear a badge:
if (process.platform === 'darwin') {
  app.setBadgeCount(0);
}

Lencana Dok dalam Tindakan

Contoh ini menunjukkan cara menetapkan dan mengosongkan lencana dok. Jalankan aplikasi ini pada macOS dan perhatikan ikon doknya. Lencana akan ditetapkan selepas 3 saat, kemudian dikosongkan selepas 8 saat.

Ciri ini tidak akan berfungsi pada Windows atau Linux.

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL(`data:text/html;charset=utf-8,
    <h1>Electron Dock Badge Demo</h1>
    <p>Check your macOS dock icon for a badge!</p>
    <p>The badge will appear shortly after launch.</p>
  `);
}

app.whenReady().then(() => {
  createWindow();

  if (process.platform === 'darwin') {
    // Set a badge count after a short delay
    setTimeout(() => {
      app.setBadgeCount(5);
      console.log('Dock badge set to 5. Look at your macOS dock icon!');
    }, 3000); // 3 seconds delay

    // Clear the badge after another delay
    setTimeout(() => {
      app.setBadgeCount(0);
      console.log('Dock badge cleared. Icon should be normal.');
    }, 8000); // 8 seconds total delay
  } else {
    console.log('Dock badges are a macOS-specific feature and will not appear on this OS.');
  }

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Semakan Pantas: Ikon Dulang

Anda telah mempelajari tentang penciptaan ikon dulang dan penetapan lencana dok. Mari buat ulang kaji ringkas!

Imbas Kembali: Dulang & Lencana

Syabas! Anda telah belajar cara mengintegrasikan aplikasi Electron dengan lebih mendalam bersama OS asli:

  • Modul Tray membolehkan anda menambah ikon pada dulang sistem atau bar menu macOS.
  • Anda boleh melampirkan Menu pada ikon dulang untuk menyediakan pilihan klik kanan.
  • Pada macOS, app.setBadgeCount() membolehkan anda memaparkan lencana pemberitahuan pada ikon dok.

Ciri-ciri ini meningkatkan pengalaman pengguna dengan menyediakan capaian pantas dan kemas kini status.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
12
Pelajaran
47

Soalan Lazim

Adakah pelajaran “Aplikasi Dulang & Lencana” percuma?

Ya — teks penuh “Aplikasi Dulang & Lencana” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Aplikasi Dulang & Lencana”?

Cipta aplikasi yang berjalan dalam dulang sistem atau dok, menyediakan akses pantas dan memaparkan lencana untuk pemberitahuan yang belum dibaca. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Aplikasi Dulang & Lencana” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Bekerja dengan Modul Natif
  2. Aplikasi Dulang & Lencana
  3. Tangkapan Skrin dan Media
  4. Pemantauan Kuasa dan Perkakasan
← Kembali ke Pembangunan Aplikasi Desktop Electron