Home-theater-designers
Electron umożliwia tworzenie aplikacji komputerowych dla systemów Windows, Mac i Linux. Gdy tworzysz aplikację za pomocą Electron, możesz wyświetlić podgląd i uruchomić aplikację w oknie aplikacji komputerowej.
Możesz użyć Electrona, aby skonfigurować aplikację Angular do uruchamiania w oknie pulpitu, zamiast w zwykłej przeglądarce internetowej. Możesz to zrobić za pomocą pliku JavaScript w samej aplikacji.
Po skonfigurowaniu Electrona możesz kontynuować rozwój tak, jak w zwykłej aplikacji Angular. Główne części aplikacji nadal będą miały tę samą standardową strukturę Angular.
Jak zainstalować Electron jako część swojej aplikacji?
Aby używać Electron, musisz pobrać i zainstalować node.js, a następnie użyć npm install, aby dodać Electron do swojej aplikacji.
- Ściągnij i zainstaluj node.js . Możesz potwierdzić, że zainstalowałeś go poprawnie, sprawdzając wersję:
Węzeł zawiera również npm, menedżer pakietów JavaScript . Możesz potwierdzić, że masz zainstalowany npm, sprawdzając wersję npm:node -vnpm -v - Utwórz nową aplikację Angular za pomocą nowych Komenda. Spowoduje to utworzenie folderu zawierającego wszystkie niezbędne pliki wymagane do projektu Angular do pracy.
ng new electron-app - W folderze głównym aplikacji użyj npm zainstalować Electron.
npm install --save-dev electron - Spowoduje to utworzenie nowego folderu dla Electron w folderze node_modules aplikacji.
- Możesz także zainstalować Electron globalnie na swoim komputerze.
npm install -g electron
Struktura plików aplikacji Angular Electron
Electron będzie wymagał głównego pliku JavaScript do tworzenia i zarządzania oknem pulpitu. W tym oknie zostanie wyświetlona zawartość Twojej aplikacji. Plik JavaScript będzie również zawierał inne zdarzenia, które mogą wystąpić, na przykład zamknięcie okna przez użytkownika.
przenieś zainstalowane programy na inny dysk Windows 10
W czasie wykonywania wyświetlana zawartość będzie pochodzić z pliku index.html. Domyślnie można znaleźć plik index.html wewnątrz pliku src folder, a w czasie wykonywania automatycznie tworzona jest jego zbudowana kopia wewnątrz odległość teczka.
Plik index.html zwykle wygląda tak:
ile trzeba mieć lat, aby otworzyć konto PayPal?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html> Wewnątrz tagu body znajduje się tag
Jak używać Electrona do otwierania aplikacji kątowej w oknie pulpitu?
Utwórz plik main.js i skonfiguruj go tak, aby otwierał zawartość aplikacji w oknie pulpitu.
- Utwórz plik w katalogu głównym projektu o nazwie main.js . W tym pliku zainicjuj Electron, aby można było go użyć do utworzenia okna aplikacji.
const { app, BrowserWindow } = require('electron'); - Utwórz nowe okno pulpitu o określonej szerokości i wysokości. Załaduj plik indeksu jako zawartość do wyświetlenia w oknie. Upewnij się, że ścieżka do pliku indeksu jest zgodna z nazwą Twojej aplikacji. Jeśli na przykład nazwałeś swoją aplikację „electron-app”, ścieżka będzie miała postać „dist/electron-app/index.html”.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - Gdy aplikacja jest gotowa, wywołaj funkcję createWindow(). Spowoduje to utworzenie okna aplikacji dla Twojej aplikacji.
app.whenReady().then(() => {
createWindow()
}) - w src/index.html plik, w baza zmień atrybut href na './'.
<base href="./"> - W pakiet.json , dodać Główny i dołącz plik main.js jako wartość. Będzie to punkt wejścia dla aplikacji, aby aplikacja uruchamiała plik main.js podczas uruchamiania aplikacji.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - w .browserslistrc pliku, zmodyfikuj listę, aby usunąć iOS safari w wersjach 15.2-15.3. Zapobiegnie to wyświetlaniu błędów zgodności w konsoli podczas kompilacji.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 - Usuń domyślną zawartość w src/app/app.component.html plik. Zastąp go nową zawartością.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Dodaj stylizację do treści w src/app/app.component.css file.FDE9CAEBA24E71D05A2C58FB723378D2E9FACE
- Dodaj ogólną stylizację do src/style.css plik do usunięcia domyślnych marginesów i dopełnień.
html {
margin: 0;
padding: 0;
}
Jak uruchomić aplikację elektronową
Aby uruchomić aplikację w oknie, skonfiguruj polecenie w tablicy scripts pliku package.json. Następnie uruchom aplikację za pomocą polecenia w terminalu.
- W pakiet.json , wewnątrz tablicy scripts dodaj polecenie, aby zbudować aplikację Angular i uruchomić Electron. Upewnij się, że po poprzednim wpisie w tablicy Scripts został dodany przecinek.
"scripts": {
...
"electron": "ng build && electron ."
}, - Aby uruchomić nową aplikację Angular w oknie pulpitu, uruchom następujące polecenie w wierszu poleceń w folderze głównym projektu:
npm run electron - Poczekaj, aż aplikacja się skompiluje. Po zakończeniu zamiast otwierania aplikacji Angular w przeglądarce internetowej otworzy się okno pulpitu. W oknie pulpitu zostanie wyświetlona zawartość Twojej aplikacji Angular.
- Jeśli nadal chcesz wyświetlać swoją aplikację w przeglądarce internetowej, nadal możesz uruchomić polecenie ng serve.
ng serve - Jeśli używasz służby polecenie, zawartość Twojej aplikacji będzie nadal wyświetlana w przeglądarce internetowej pod adresem Lokalny Gospodarz:4200.
Tworzenie aplikacji desktopowych za pomocą Electron
Możesz używać Electrona do tworzenia aplikacji komputerowych w systemach Windows, Mac i Linux. Domyślnie możesz przetestować aplikację Angular za pomocą przeglądarki internetowej za pomocą polecenia ng serve. Możesz skonfigurować aplikację Angular tak, aby otwierała się również w oknie pulpitu zamiast w przeglądarce internetowej.
Możesz to zrobić za pomocą pliku JavaScript. Będziesz także musiał skonfigurować pliki index.html i package.json. Cała aplikacja będzie nadal miała tę samą strukturę, co zwykła aplikacja Angular.
Jeśli chcesz dowiedzieć się więcej o tworzeniu aplikacji klasycznych, możesz również zapoznać się z aplikacjami Windows Forms. Aplikacje Windows Forms umożliwiają klikanie i przeciąganie elementów interfejsu użytkownika na kanwę, jednocześnie dodając dowolną logikę kodowania do plików C#.