Integrering med skalet
Lär Er att öppna externa länkar, filer och kataloger med operativsystemets standardprogram via Electrons `shell`-modul.
Integrering med skalet är en gratis lektion i Utveckling av skrivbordsappar med Electron på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Utveckling av skrivbordsappar med Electron, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.
Introduktion till shell-integrering
Välkommen till shell-integrering! I Electron kan Ert skrivbordsprogram interagera med användarens operativsystem (OS) på kraftfulla sätt.
Det innebär att Ni kan öppna externa länkar och filer eller visa objekt i operativsystemets filhanterare, precis som inbyggda program gör.
Möt modulen `shell`
Electron tillhandahåller den inbyggda modulen shell för att göra dessa interaktioner med operativsystemet enkla och säkra. Den är tillgänglig i både huvud- och renderingsprocessen.
Modulen shell låter Er överlåta uppgifter som att öppna URL:er eller filer till operativsystemets standardprogram.
Öppna externa URL:er
Det vanligaste användningsområdet är att öppna webblänkar i användarens standardwebbläsare. Det gör Ni med shell.openExternal(url).
Detta är viktigt för säkerheten: i stället för att rendera externt webbinnehåll i appen överlåter Ni det till en betrodd webbläsare.
Kod: Öppna en extern länk
Så här öppnar Ni en extern URL. Den här koden placeras vanligtvis i main.js eller anropas från ett preload-skript om den utlöses av renderingsprocessen.
Prova att köra det här exemplet:
const { app, shell } = require('electron');
app.whenReady().then(() => {
// In a real app, this would be triggered by a user action.
// For this demo, it opens when the app is ready.
shell.openExternal('https://www.electronjs.org/docs')
.then(() => console.log('Opened Electron docs!'))
.catch(err => console.error('Failed to open URL:', err));
// A real Electron app would also create a BrowserWindow here.
});Öppna lokala filer och mappar
Behöver Ni öppna ett dokument, en bild eller kanske en katalog från appen? Använd shell.openPath(path).
Den här funktionen försöker öppna den angivna filen eller katalogen med operativsystemets standardprogram för filtypen.
Kod: Öppna en lokal fil
Det här exemplet skapar en enkel textfil och öppnar den sedan med operativsystemets standardtextredigerare.
Prova att köra det här exemplet:
const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');
app.whenReady().then(() => {
const userDataPath = app.getPath('userData');
const filePath = path.join(userDataPath, 'my-document.txt');
// Create a dummy file for demonstration
fs.writeFileSync(filePath, 'Hello from CoddyKit! This is your document.');
shell.openPath(filePath)
.then(() => console.log(`Opened: ${filePath}`))
.catch(err => console.error(`Failed to open path: ${err}`));
});Visa objekt i Explorer/Finder
Ibland vill Ni inte öppna en fil, utan bara visa var den finns. shell.showItemInFolder(fullPath) gör just det.
Funktionen visar den angivna filen i operativsystemets filhanterare (till exempel File Explorer i Windows eller Finder i macOS) och kan även markera den.
Kod: Visa ett objekt i en mapp
Vi skapar en till fil och visar sedan dess plats för användaren.
Prova att köra det här exemplet:
const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');
app.whenReady().then(() => {
const desktopPath = app.getPath('desktop');
const fileToShowPath = path.join(desktopPath, 'coddykit_demo_file.txt');
// Create a dummy file on the desktop
fs.writeFileSync(fileToShowPath, 'Find me!');
shell.showItemInFolder(fileToShowPath);
console.log(`Showing item in folder: ${fileToShowPath}`);
});Säkerhet och bästa praxis
När Ni använder metoder i shell, särskilt med indata från användaren, ska Ni alltid tänka på säkerheten:
- Validera URL:er: Kontrollera att URL:en är säker och avsedd innan Ni anropar
openExternal(). - Isolering av kontext: Använd ett preload-skript i renderingsprocessen för att på ett säkert sätt endast exponera nödvändiga funktioner i
shell. - Felhantering: Lägg alltid till
.catch()för Promise-baserade metoder somopenExternalochopenPath.
Snabbkontroll av shell
Vilken metod i modulen shell använder Ni för att öppna en webblänk i användarens standardwebbläsare?
Sammanfattning: Shell-integrering
Bra jobbat! Ni har lärt Er hur Electrons modul shell hjälper appen att interagera med det inbyggda operativsystemet:
shell.openExternal()för webblänkar.shell.openPath()för lokala filer och mappar.shell.showItemInFolder()för att visa objekt i filhanteraren.
Dessa metoder ger Er ett smidigt och säkert sätt att utöka appens funktionalitet till den inbyggda miljön.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 47
Vanliga frågor
Är lektionen ”Integrering med skalet” gratis?
Ja – hela texten till ”Integrering med skalet” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Utveckling av skrivbordsappar med Electron, kan Ni uppgradera till CoddyKit PRO. Kursen i Utveckling av skrivbordsappar med Electron innehåller totalt 4 lektioner.
Vad lär jag mig i ”Integrering med skalet”?
Lär Er att öppna externa länkar, filer och kataloger med operativsystemets standardprogram via Electrons `shell`-modul. Ni övar på Utveckling av skrivbordsappar med Electron med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Utveckling av skrivbordsappar med Electron?
Du behöver inga förkunskaper. Utbildningen i Utveckling av skrivbordsappar med Electron på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Integrering med skalet”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Utveckling av skrivbordsappar med Electron-lektionen?
Ja. Varje Utveckling av skrivbordsappar med Electron-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Inbyggda menyer och snabbmenyer
- Dialogrutor och aviseringar
- Integrering med skalet
- Globala kortkommandon och åtkomst till urklipp