Menu Natif & Menu Konteks
Laksanakan menu aplikasi, menu konteks dan menu dulang tersuai untuk menyediakan navigasi serta pilihan yang biasa kepada pengguna.
Menu Natif & Menu Konteks ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 1 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.
Menu Natif dalam Electron
Electron membolehkan anda membina aplikasi desktop menggunakan teknologi web. Namun, aplikasi desktop juga memerlukan ciri natif seperti menu!
Menu natif menawarkan pengalaman yang biasa kepada pengguna dan disepadukan dengan lancar ke dalam sistem pengendalian mereka. Modul Menu Electron membolehkan anda menciptanya.
- Menu Aplikasi: Bar menu utama (Fail, Edit, Paparan).
- Menu Konteks: Menu klik kanan yang khusus untuk sesuatu elemen.
- Menu Dulang: Menu untuk ikon dalam dulang sistem atau dok.
Membina Bar Menu Utama
Menu Aplikasi ialah bar menu utama di bahagian atas tetingkap aplikasi anda (Windows/Linux) atau di bahagian atas skrin (macOS).
Menu ini biasanya mengandungi pilihan standard seperti "Fail", "Edit", "Paparan" dan "Bantuan". Menu ini menjadikan aplikasi anda terasa natif serta menyediakan navigasi penting.
Anda mentakrifkan strukturnya menggunakan tatasusunan objek JavaScript yang dipanggil templat menu.
Kod: Menu Aplikasi Asas
Mari cipta menu aplikasi yang minimum. Coretan kod ini dimasukkan ke dalam fail main.js aplikasi Electron anda.
Coretan ini mentakrifkan menu "Fail" dengan pilihan "Keluar" yang menutup aplikasi. (Nota: nodeIntegration: true, contextIsolation: false digunakan di sini demi kesederhanaan dalam contoh, tetapi biasanya memerlukan konfigurasi yang lebih selamat untuk aplikasi produksi.)
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html'); // Ensure you have an index.html file
const template = [
{
label: 'File',
submenu: [
{
label: 'Exit',
accelerator: 'CmdOrCtrl+Q',
click() { app.quit(); }
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Item dan Peranan Menu Lanjutan
Item menu boleh mempunyai peranan khas yang menyediakan fungsi standard (seperti 'salin', 'tampal' dan 'keluar') serta memastikan kelakuan khusus platform.
Anda juga boleh mencipta menu bertingkat (submenu) untuk menyusun pilihan dengan lebih baik. Pintasan papan kekunci boleh ditambahkan untuk akses pantas.
role: 'quit': Menutup aplikasi.role: 'separator': Menambahkan garisan pemisah.accelerator: 'CmdOrCtrl+Z': Mentakrifkan pintasan papan kekunci.
Kod: Menu Aplikasi Lengkap
Mari tingkatkan menu aplikasi kita. Kita akan menambahkan menu "Edit" dengan peranan standard dan menu "Bantuan" dengan item tersuai.
Perhatikan cara peranan memudahkan tindakan biasa dan submenu memastikan menu utama kekal kemas.
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
const template = [
{
label: 'File',
submenu: [
{ label: 'New', accelerator: 'CmdOrCtrl+N' },
{ type: 'separator' },
{ label: 'Exit', role: 'quit' }
]
},
{
label: 'Edit',
submenu: [
{ label: 'Undo', role: 'undo' },
{ label: 'Redo', role: 'redo' },
{ type: 'separator' },
{ label: 'Cut', role: 'cut' },
{ label: 'Copy', role: 'copy' },
{ label: 'Paste', role: 'paste' }
]
},
{
label: 'Help',
submenu: [
{ label: 'About App', click() { console.log('About clicked!'); } }
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Menu Konteks Dinamik
Menu konteks ialah menu "klik kanan" yang muncul apabila anda berinteraksi dengan elemen atau kawasan tertentu dalam aplikasi.
Tidak seperti menu aplikasi statik, menu konteks selalunya dinamik dan berubah berdasarkan perkara yang anda klik. Menu ini dibina menggunakan modul Menu yang sama.
Menu ini biasanya dicipta dalam proses utama dan kemudiannya dipaparkan (dimunculkan) daripada proses pemapar melalui Komunikasi Antara Proses (IPC).
Kod: Mencipta Menu Konteks
Berikut ialah cara untuk mentakrifkan menu konteks yang ringkas. Dalam contoh ini, kami akan menunjukkan menu itu muncul daripada proses utama selepas suatu kelewatan untuk memudahkan penerangan. Dalam aplikasi sebenar, menu ini biasanya dicetuskan oleh peristiwa klik kanan dalam proses pemapar, yang berkomunikasi dengan proses utama.
Kaedah popup() memaparkan menu tersebut.
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
const contextMenuTemplate = [
{ label: 'Inspect Element', click() { mainWindow.webContents.openDevTools(); } },
{ type: 'separator' },
{ label: 'Reload Page', role: 'reload' }
];
const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
// For demonstration: show context menu after a delay
setTimeout(() => {
contextMenu.popup({ window: mainWindow });
console.log('Context menu popped up!');
}, 3000);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Menu Dulang Sistem dan Dok
Ikon dulang (juga dikenali sebagai ikon bar status pada macOS atau ikon dulang sistem pada Windows/Linux) membolehkan aplikasi anda berjalan di latar belakang dan menyediakan akses pantas kepada tindakan biasa.
Modul Tray dalam Electron membolehkan anda mencipta ikon ini dan melampirkan menu dulang padanya, yang muncul apabila pengguna berinteraksi dengan ikon tersebut (contohnya, klik kanan).
Kod: Menu Dulang Asas
Contoh ini menunjukkan cara mencipta ikon dulang ringkas dengan menu konteks. Pastikan anda menyediakan fail ikon kecil (contohnya, icon.png) dalam akar projek anda.
Ikon dulang akan muncul dalam kawasan pemberitahuan sistem atau dok anda. Mengklik ikon dulang akan menukar keterlihatan tetingkap utama.
const { app, BrowserWindow, Menu, Tray } = require('electron');
const path = require('path');
let mainWindow;
let tray;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
show: false, // Start hidden for tray app
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(() => {
createWindow();
// Path to your icon file (e.g., in the same directory as main.js)
const iconPath = path.join(__dirname, 'icon.png');
tray = new Tray(iconPath);
const contextMenu = Menu.buildFromTemplate([
{ label: 'Open App', click: () => { mainWindow.show(); } },
{ label: 'Toggle DevTools', click: () => { mainWindow.webContents.toggleDevTools(); } },
{ type: 'separator' },
{ label: 'Quit', click: () => { app.quit(); } }
]);
tray.setToolTip('My Electron Tray App');
tray.setContextMenu(contextMenu);
tray.on('click', () => {
mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
});
});
app.on('before-quit', () => {
// Clean up tray icon before quitting to prevent memory leaks
if (tray) tray.destroy();
});
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the dock icon is clicked
if (mainWindow === null) createWindow();
});
// For apps with tray icons, you might not want to quit when all windows are closed
// app.on('window-all-closed', () => {
// if (process.platform !== 'darwin') app.quit();
// });Semakan Jenis Menu
Anda telah mempelajari pelbagai jenis menu natif dalam Electron.
Antara pernyataan berikut tentang menu Electron, yang manakah TRUE?
Menu: Kesimpulan Utama
Tahniah! Anda telah mempelajari cara mengintegrasikan menu natif ke dalam aplikasi Electron anda.
- Gunakan modul
Menuuntuk mencipta menu aplikasi, menu konteks dan menu dulang. - Takrifkan struktur menu menggunakan templat menu (tatasusunan objek).
- Manfaatkan peranan item menu untuk kefungsian standard dan keseragaman merentas platform.
- Menu aplikasi digunakan untuk bar tetingkap utama, menu konteks untuk pilihan klik kanan yang dinamik, dan menu dulang untuk ikon dulang sistem/dok.
- Sentiasa gunakan
Menu.buildFromTemplate()danMenu.setApplicationMenu()untuk menu aplikasi utama.
Ciri natif ini meningkatkan pengalaman pengguna aplikasi desktop anda dengan ketara!
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 “Menu Natif & Menu Konteks” percuma?
Ya — teks penuh “Menu Natif & Menu Konteks” 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 “Menu Natif & Menu Konteks”?
Laksanakan menu aplikasi, menu konteks dan menu dulang tersuai untuk menyediakan navigasi serta pilihan yang biasa kepada pengguna. 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 1 daripada 4.
Berapa lamakah pelajaran “Menu Natif & Menu Konteks” 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
- Menu Natif & Menu Konteks
- Dialog dan Pemberitahuan
- Integrasi Shell
- Pintasan Global dan Akses Papan Klip