Electron-työpöytäsovellusten kehitys · Oppitunti

Useiden ikkunoiden hallinta

Opettele luomaan, koordinoimaan ja viestimään useiden BrowserWindow-instanssien välillä. Tämä keskeinen taito rakentuu suoraan pääprosessin ja IPC:n perusteiden päälle.

Oppitunti 4/413 vaihetta

Useiden ikkunoiden hallinta on ilmainen Electron-työpöytäsovellusten kehitys-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Electron-työpöytäsovellusten kehitys-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Yhden ikkunan tuolla puolen

Oikeat työpöytäsovellukset tarvitsevat usein useita ikkunoita: pääeditorin, asetuspaneelin ja esikatselun. Pääprosessi omistaa ja seuraa niitä kaikkia.

Ikkunan luominen

Jokainen ikkuna on pääprosessissa luotu BrowserWindow-instanssi.

const { BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({ width: 600, height: 400 });
  win.loadFile('index.html');
  return win;
}

Viitteiden säilyttäminen

Jos ette säilytä viitettä, roskienkeruu voi poistaa ikkunan muistista. Tallentakaa ikkunat muuttujaan tai taulukkoon.

let windows = [];
function track(win) {
  windows.push(win);
  win.on('closed', () => {
    windows = windows.filter(w => w !== win);
  });
}

Isäntä- ja lapsi-ikkunat

Voitte määrittää yhden ikkunan toisen ikkunan isäntäikkunaksi. Lapsi-ikkunat liikkuvat isäntäikkunan mukana ja voivat olla modaalisia.

new BrowserWindow({
  parent: mainWindow,
  modal: true,
  width: 300,
  height: 200
});

Ikkunoiden välinen viestintä

Ikkunat eivät jaa muistia. Ne viestivät pääprosessin kautta käyttäen IPC:tä välittäjänä.

ipcMain.on('to-other', (e, msg) => {
  otherWindow.webContents.send('from-main', msg);
});

Ikkunoiden tunnistaminen

Jokaisella ikkunalla on yksilöllinen id. Sen avulla voitte kohdistaa viestin tiettyyn ikkunaan, kun välitätte viestejä.

function findWindow(id, list) {
  return list.find(w => w.id === id);
}
console.log(findWindow(2, [{ id: 1 }, { id: 2 }]));

Ikkunoiden hallittu näyttäminen

Vältä valkoista välähdystä luomalla ikkunat piilotettuina ja näyttämällä ne, kun ne ovat valmiita.

const win = new BrowserWindow({ show: false });
win.once('ready-to-show', () => win.show());

Kohdistuksen hallinta

Käytä focus()-metodia ja blur-tapahtumaa selvittääksesi, minkä ikkunan kanssa käyttäjä työskentelee. Tämä on hyödyllistä esimerkiksi tallennuskehotteissa.

Sulkeminen ja siivous

Kuuntele close-tapahtumaa tallentamattomista muutoksista ilmoittamista varten ja closed-tapahtumaa viittausten vapauttamista varten.

win.on('close', (e) => {
  if (hasUnsaved) {
    e.preventDefault();
  }
});

Yhden instanssin lukitus

Käytä app.requestSingleInstanceLock()-metodia kohdistaaksesi olemassa olevaan ikkunaan sen sijaan, että avaisit kaksoiskappaleita.

Tilan koordinointi

Keskitä jaettu tila pääprosessiin, jotta jokainen ikkuna lukee tiedot yhdestä totuuden lähteestä eikä tila pääse eriytymään.

Pikatarkistus

Testaa tietosi ikkunoiden hallinnasta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit luomaan ja seuraamaan useita BrowserWindow-instansseja, hallitsemaan isäntä- ja lapsisuhteita, välittämään viestejä pääprosessin kautta sekä siivoamaan viittaukset asianmukaisesti.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 47

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Useiden ikkunoiden hallinta” ilmainen?

Kyllä – oppitunnin ”Useiden ikkunoiden hallinta” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Electron-työpöytäsovellusten kehitys-kurssin, päivitä CoddyKit PROhon. Electron-työpöytäsovellusten kehitys-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Useiden ikkunoiden hallinta”?

Opettele luomaan, koordinoimaan ja viestimään useiden BrowserWindow-instanssien välillä. Tämä keskeinen taito rakentuu suoraan pääprosessin ja IPC:n perusteiden päälle. Harjoittelet Electron-työpöytäsovellusten kehitys-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Electron-työpöytäsovellusten kehitys-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Electron-työpöytäsovellusten kehitys-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Useiden ikkunoiden hallinta”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Electron-työpöytäsovellusten kehitys-oppitunnilla?

Kyllä. Jokainen Electron-työpöytäsovellusten kehitys-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Electron-työpöytäsovellusten kehitys