Seni Bina Berbilang Tetingkap
Reka bentuk dan laksanakan aplikasi Electron berbilang tetingkap yang kompleks dengan mengurus komunikasi antara tetingkap dan keadaan dengan berkesan.
Seni Bina Berbilang Tetingkap 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.
Mengapa Berbilang Tetingkap?
Aplikasi Electron sering mendapat manfaat daripada penggunaan berbilang tetingkap. Bayangkan aplikasi sembang: anda mungkin mempunyai senarai kenalan utama dan tetingkap berasingan untuk setiap perbualan yang aktif.
- Aliran Kerja Berasingan: Asingkan tugasan ke dalam tetingkap khusus.
- Keutamaan Pengguna: Tetingkap tetapan yang berasingan daripada aplikasi utama.
- Alat Tambahan: Pemapar, pemeriksa atau panel sisi khusus.
- Pengalaman Pengguna Dipertingkatkan: Menyediakan fleksibiliti dan susunan untuk aplikasi yang kompleks.
Mencipta Tetingkap Baharu
Mencipta tetingkap tambahan dalam Electron adalah serupa dengan mencipta tetingkap utama pada mulanya. Anda hanya perlu mencipta satu lagi BrowserWindow dalam proses utama.
Berikut ialah cara anda boleh mencipta tetingkap kedua yang memuatkan fail HTML yang berbeza.
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
let secondWindow;
function createMainWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
mainWindow.loadFile('index.html');
}
function createSecondWindow() {
secondWindow = new BrowserWindow({
width: 400,
height: 300,
parent: mainWindow, // Optional: make it a child window
modal: false, // Optional: for modal behavior
show: false, // Don't show immediately
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload_second.js')
}
});
secondWindow.loadFile('second.html');
secondWindow.once('ready-to-show', () => {
secondWindow.show();
});
}
app.whenReady().then(() => {
createMainWindow();
createSecondWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createMainWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});Kandungan untuk Berbilang Tetingkap
Setiap tika BrowserWindow memuatkan kandungannya sendiri, biasanya berupa fail HTML. Ini membolehkan anda mereka bentuk antara muka pengguna yang sepenuhnya berasingan untuk bahagian aplikasi yang berlainan.
Untuk contoh terdahulu, anda memerlukan:
index.html: Antara muka tetingkap utama.second.html: Antara muka khusus tetingkap kedua.- Skrip pemapar dan pramuat yang sepadan untuk setiap tetingkap, jika diperlukan.
Mengurus Rujukan Tetingkap
Apabila bekerja dengan berbilang tetingkap, adalah penting untuk menjejaki rujukannya. Anda boleh menyimpannya dalam tatasusunan atau peta supaya anda boleh berinteraksi dengan tetingkap tertentu kemudian.
Ini membantu anda menghantar mesej yang disasarkan, menutup tetingkap tertentu atau mengurus keadaannya.
const { app, BrowserWindow } = require('electron');
const path = require('path');
let allWindows = []; // Array to hold references to all windows
function createNewWindow(htmlFile, width, height) {
let newWindow = new BrowserWindow({
width: width,
height: height,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js') // Can be different per window
}
});
newWindow.loadFile(htmlFile);
allWindows.push(newWindow); // Add to our list
// Remove from list when closed
newWindow.on('closed', () => {
allWindows = allWindows.filter(win => win !== newWindow);
});
return newWindow;
}
app.whenReady().then(() => {
createNewWindow('index.html', 800, 600); // Create main window
createNewWindow('second.html', 400, 300); // Create a second window
// Example: Accessing windows later
// allWindows[0].setTitle('Main App');
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});IPC daripada Utama kepada Pemapar Tertentu
Proses utama boleh menghantar mesej kepada proses pemapar tertentu menggunakan kaedah webContents.send() bagi tika tetingkap tersebut.
Ini penting untuk mengemas kini unsur UI, menghantar data atau mencetuskan tindakan dalam tetingkap tertentu.
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let mainWindow;
let settingsWindow;
function createWindows() {
mainWindow = new BrowserWindow({
width: 800, height: 600,
webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true }
});
mainWindow.loadFile('index.html');
settingsWindow = new BrowserWindow({
width: 400, height: 300, show: false,
webPreferences: { preload: path.join(__dirname, 'preload_settings.js'), contextIsolation: true }
});
settingsWindow.loadFile('settings.html');
}
app.whenReady().then(createWindows);
// Main process sends message to settings window
ipcMain.on('open-settings', () => {
if (settingsWindow) {
settingsWindow.show();
settingsWindow.webContents.send('settings-opened', 'Welcome to settings!');
}
});
// --- Renderer (preload_settings.js) for settings.html ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
// onSettingsOpened: (callback) => ipcRenderer.on('settings-opened', (event, message) => callback(message))
// });
// --- Renderer (settings.html script) ---
// window.electronAPI.onSettingsOpened((msg) => {
// document.getElementById('message').innerText = msg;
// });Pemapar kepada Utama (Mengenal Pasti Penghantar)
Apabila proses pemapar menghantar mesej kepada proses utama melalui ipcRenderer.send(), proses utama menerima objek event.
Objek event ini mengandungi maklumat tentang penghantar, termasuk event.senderFrame atau event.sender (iaitu objek WebContents bagi tetingkap yang menghantar mesej). Ini membolehkan proses utama mengenal pasti tetingkap yang menghantar mesej tersebut.
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let windows = {}; // Store windows by an ID or name
function createWindows() {
const mainWin = new BrowserWindow({
width: 800, height: 600, title: 'Main',
webPreferences: { preload: path.join(__dirname, 'preload_main.js'), contextIsolation: true }
});
mainWin.loadFile('main.html');
windows['main'] = mainWin;
const toolWin = new BrowserWindow({
width: 400, height: 300, title: 'Tool',
webPreferences: { preload: path.join(__dirname, 'preload_tool.js'), contextIsolation: true }
});
toolWin.loadFile('tool.html');
windows['tool'] = toolWin;
}
app.whenReady().then(createWindows);
ipcMain.on('renderer-message', (event, data) => {
const senderWindow = BrowserWindow.fromWebContents(event.sender);
const senderId = Object.keys(windows).find(key => windows[key] === senderWindow);
console.log(`Message from ${senderId || 'Unknown'}: ${data}`);
senderWindow.webContents.send('main-reply', `Received from ${senderId}!`);
});
// --- preload_main.js / preload_tool.js (simplified) ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
// sendMessage: (data) => ipcRenderer.send('renderer-message', data),
// onMainReply: (callback) => ipcRenderer.on('main-reply', (event, msg) => callback(msg))
// });
// --- main.html / tool.html script ---
// window.electronAPI.sendMessage('Hello from my window!');Komunikasi Pemapar kepada Pemapar
Proses pemapar tidak boleh berkomunikasi secara langsung antara satu sama lain. Semua komunikasi antara proses (IPC) mesti dikendalikan melalui proses utama.
Ini bermakna mesej daripada satu pemapar akan pergi ke proses utama, yang kemudiannya menyampaikannya kepada proses pemapar sasaran. Pendekatan ini memusatkan komunikasi dan meningkatkan keselamatan.
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let windowA, windowB;
function createWindows() {
windowA = new BrowserWindow({
width: 600, height: 400, title: 'Window A',
webPreferences: { preload: path.join(__dirname, 'preload_a.js'), contextIsolation: true }
});
windowA.loadFile('window_a.html');
windowB = new BrowserWindow({
width: 600, height: 400, title: 'Window B',
webPreferences: { preload: path.join(__dirname, 'preload_b.js'), contextIsolation: true }
});
windowB.loadFile('window_b.html');
}
app.whenReady().then(createWindows);
// Renderer A sends to Main, Main relays to Renderer B
ipcMain.on('message-from-a', (event, message) => {
console.log('Main received from A:', message);
if (windowB) {
windowB.webContents.send('message-to-b', `Relayed from A: ${message}`);
}
});
// Renderer B sends to Main, Main relays to Renderer A
ipcMain.on('message-from-b', (event, message) => {
console.log('Main received from B:', message);
if (windowA) {
windowA.webContents.send('message-to-a', `Relayed from B: ${message}`);
}
});
// --- preload_a.js (example) ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
// sendToB: (msg) => ipcRenderer.send('message-from-a', msg),
// onMessageFromB: (callback) => ipcRenderer.on('message-to-a', (event, msg) => callback(msg))
// });
// --- window_a.html script ---
// window.electronAPI.sendToB('Hello from Window A!');Mengurus Keadaan Dikongsi
Apabila anda mempunyai berbilang tetingkap, tetingkap tersebut sering perlu mengakses atau berkongsi data yang sama. Berikut ialah strategi yang biasa digunakan:
- Proses Utama sebagai Sumber Kebenaran: Simpan data yang dikongsi dalam proses utama dan gunakan IPC untuk memintanya atau mengemas kininya daripada pemapar.
- Electron Store: Penyelesaian mudah merentas platform untuk mengekalkan tetapan pengguna dan keadaan aplikasi.
- IPC untuk Penyegerakan Data: Pemapar memaklumkan proses utama tentang perubahan, kemudian proses utama menyiarkan kemas kini kepada pemapar lain yang terjejas.
- Objek Global (Berhati-hati!): Dalam sesetengah keadaan mudah, objek JavaScript global dalam proses utama boleh menyimpan keadaan yang dikongsi, tetapi pendekatan ini boleh menjadi sukar diurus dalam aplikasi yang kompleks.
Amalan Terbaik Berbilang Tetingkap
Mereka bentuk aplikasi berbilang tetingkap memerlukan pertimbangan yang teliti:
- Penggunaan Memori: Setiap
BrowserWindowialah tika Chromium yang berasingan dan menggunakan memori. Kurangkan tetingkap yang tidak diperlukan. - Pengurusan Kitar Hayat: Tentukan sama ada penutupan tetingkap anak patut menjejaskan induknya atau aplikasi utama.
- Pengalaman Pengguna: Sediakan navigasi yang jelas antara tetingkap. Pertimbangkan kedudukan tetingkap dan ingat keutamaan pengguna.
- Pengendalian Ralat: Laksanakan pengendalian ralat yang kukuh untuk IPC dan peristiwa tetingkap bagi mengelakkan ranap.
- Pengasingan Konteks: Sentiasa dayakan
contextIsolationdan gunakan skrip pramuat untuk pendedahan API yang selamat, terutamanya apabila menggunakan berbilang tetingkap.
Semakan IPC Berbilang Tetingkap
Anda mempunyai dua proses pemapar, Pemapar A dan Pemapar B. Pemapar A perlu menghantar mesej kepada Pemapar B. Bagaimanakah komunikasi ini patut distrukturkan dalam Electron?
Imbas Kembali: Seni Bina Berbilang Tetingkap
Tahniah! Anda telah mempelajari cara mereka bentuk dan melaksanakan aplikasi Electron berbilang tetingkap.
Kita telah membincangkan penciptaan berbilang tika BrowserWindow, pengurusan rujukannya dan pelaksanaan komunikasi selamat antara tetingkap melalui proses utama. Anda juga meneroka strategi untuk keadaan yang dikongsi serta amalan terbaik bagi membina pengalaman desktop yang kompleks dan menggunakan berbilang tetingkap.
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 “Seni Bina Berbilang Tetingkap” percuma?
Ya — teks penuh “Seni Bina Berbilang Tetingkap” 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 “Seni Bina Berbilang Tetingkap”?
Reka bentuk dan laksanakan aplikasi Electron berbilang tetingkap yang kompleks dengan mengurus komunikasi antara tetingkap dan keadaan dengan berkesan. 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 “Seni Bina Berbilang Tetingkap” 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
- Seni Bina Berbilang Tetingkap
- Proses Latar Belakang dan Pekerja
- Mengintegrasikan dengan Perkhidmatan Awan
- Mengemas Kini Aplikasi Electron Anda Secara Automatik