Το Electron σάς επιτρέπει να δημιουργείτε εφαρμογές επιφάνειας εργασίας για Windows, Mac και Linux. Όταν δημιουργείτε μια εφαρμογή χρησιμοποιώντας το Electron, μπορείτε να κάνετε προεπισκόπηση και να εκτελέσετε την εφαρμογή μέσω ενός παραθύρου εφαρμογής επιτραπέζιου υπολογιστή.

Μπορείτε να χρησιμοποιήσετε το Electron για να διαμορφώσετε μια εφαρμογή Angular ώστε να εκκινείται σε παράθυρο επιφάνειας εργασίας, αντί για το συνηθισμένο πρόγραμμα περιήγησης ιστού. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας ένα αρχείο JavaScript μέσα στην ίδια την εφαρμογή.

Μόλις διαμορφώσετε το Electron, μπορείτε να συνεχίσετε την ανάπτυξη όπως θα κάνατε σε μια κανονική εφαρμογή Angular. Τα κύρια μέρη της εφαρμογής θα εξακολουθούν να ακολουθούν την ίδια τυπική γωνιακή δομή.

Πώς να εγκαταστήσετε το Electron ως μέρος της εφαρμογής σας

Για να χρησιμοποιήσετε το Electron, πρέπει να κάνετε λήψη και εγκατάσταση του node.js και να χρησιμοποιήσετε το npm install για να προσθέσετε το Electron στην εφαρμογή σας.

  1. Λήψη και εγκατάσταση
    instagram viewer
    node.js. Μπορείτε να επιβεβαιώσετε ότι το έχετε εγκαταστήσει σωστά ελέγχοντας την έκδοση:
    κόμβος -v
    Ο κόμβος περιλαμβάνει επίσης npm, ο διαχειριστής πακέτων JavaScript. Μπορείτε να επιβεβαιώσετε ότι έχετε εγκαταστήσει το npm ελέγχοντας την έκδοση npm:
    npm -v
  2. Δημιουργήστε μια νέα εφαρμογή Angular χρησιμοποιώντας το καινούργιο εντολή. Αυτό θα δημιουργήσει έναν φάκελο που περιέχει όλα τα απαραίτητα αρχεία που απαιτούνται για ένα έργο Angular για να δουλέψω.
    ng νέος ηλεκτρονική εφαρμογή
  3. Στον ριζικό φάκελο της εφαρμογής σας, χρησιμοποιήστε npm για να εγκαταστήσετε το Electron.
    npm εγκαθιστώ--save-dev electron
  4. Αυτό θα δημιουργήσει έναν νέο φάκελο για το Electron στο φάκελο node_modules της εφαρμογής.
  5. Μπορείτε επίσης να εγκαταστήσετε το Electron παγκοσμίως στον υπολογιστή σας.
    npm εγκαθιστώ -g ηλεκτρόνιο

Η δομή του αρχείου της εφαρμογής γωνιακών ηλεκτρονίων

Το Electron θα απαιτήσει ένα κύριο αρχείο JavaScript για τη δημιουργία και τη διαχείριση του παραθύρου της επιφάνειας εργασίας. Αυτό το παράθυρο θα εμφανίσει τα περιεχόμενα της εφαρμογής σας μέσα σε αυτό. Το αρχείο JavaScript θα περιέχει επίσης άλλα συμβάντα που μπορεί να προκύψουν, όπως εάν ο χρήστης κλείσει το παράθυρο.

Κατά το χρόνο εκτέλεσης, το περιεχόμενο που εμφανίζεται θα προέρχεται από το αρχείο index.html. Από προεπιλογή, μπορείτε να βρείτε το αρχείο index.html μέσα στο src φάκελο και κατά το χρόνο εκτέλεσης δημιουργείται αυτόματα ένα ενσωματωμένο αντίγραφό του μέσα στο απόσταση ντοσιέ.

Το αρχείο index.html συνήθως μοιάζει με αυτό:

<!doctype html>
<html lang="en">
<κεφάλι>
<meta charset="utf-8">
<τίτλος> ElectronApp </title>
<βάση href="./">
<μετα όνομα="θέαση" περιεχόμενο="πλάτος=πλάτος συσκευής, αρχική κλίμακα=1">
<σύνδεσμος rel="εικόνισμα" τύπος="εικόνα/εικονίδιο x" href="favicon.ico">
</head>
<σώμα>
<app-root></app-root>
</body>
</html>

Μέσα στην ετικέτα σώματος υπάρχει ένα ετικέτα. Αυτό θα εμφανίσει το κύριο στοιχείο εφαρμογής για την εφαρμογή Angular. Μπορείτε να βρείτε το κύριο στοιχείο της εφαρμογής στο src/app ντοσιέ.

Πώς να χρησιμοποιήσετε το Electron για να ανοίξετε μια γωνιακή εφαρμογή σε ένα παράθυρο επιφάνειας εργασίας

Δημιουργήστε το αρχείο main.js και διαμορφώστε το ώστε να ανοίγει το περιεχόμενο της εφαρμογής μέσα σε ένα παράθυρο επιφάνειας εργασίας.

  1. Δημιουργήστε ένα αρχείο στη ρίζα του έργου σας με το όνομα main.js. Σε αυτό το αρχείο, αρχικοποιήστε το Electron ώστε να μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε το παράθυρο της εφαρμογής.
    συνθ { app, BrowserWindow } = απαιτώ('ηλεκτρόνιο');
  2. Δημιουργήστε ένα νέο παράθυρο επιφάνειας εργασίας συγκεκριμένου πλάτους και ύψους. Φορτώστε το αρχείο ευρετηρίου ως περιεχόμενο που θα εμφανιστεί στο παράθυρο. Βεβαιωθείτε ότι η διαδρομή προς το αρχείο ευρετηρίου ταιριάζει με το όνομα της εφαρμογής σας. Για παράδειγμα, εάν ονομάσατε την εφαρμογή σας "electron-app", η διαδρομή θα είναι "dist/electron-app/index.html".
    λειτουργίαδημιουργία παραθύρου() {
     νίκη = νέος Παράθυρο προγράμματος περιήγησης ({πλάτος: 800, ύψος: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Όταν η εφαρμογή είναι έτοιμη, καλέστε τη συνάρτηση createWindow(). Αυτό θα δημιουργήσει το παράθυρο της εφαρμογής για την εφαρμογή σας.
    app.whenReady().then(() => {
     createWindow()
    })
  4. Στο src/index.html αρχείο, στο βάση ετικέτα, αλλάξτε το χαρακτηριστικό href σε "./".
    <βάση href="./">
  5. Σε πακέτο.json, πρόσθεσε ένα κύριος πεδίο και συμπεριλάβετε το αρχείο main.js ως τιμή. Αυτό θα είναι το σημείο εισόδου για την εφαρμογή, έτσι ώστε η εφαρμογή να εκτελεί το αρχείο main.js καθώς εκκινεί την εφαρμογή.
    {
    "όνομα": "ηλεκτρονική εφαρμογή",
    "εκδοχή": "0.0.0",
    "κύριος": "main.js",
     ...
    }
  6. Στο .browserslistrc αρχείο, τροποποιήστε τη λίστα για να καταργήσετε τις εκδόσεις 15.2-15.3 του iOS safari. Αυτό θα αποτρέψει την εμφάνιση σφαλμάτων συμβατότητας στην κονσόλα κατά τη μεταγλώττιση.
    τελευταία 1 έκδοση Chrome
    τελευταία 1 έκδοση Firefox
    τελευταίες 2 κύριες εκδόσεις Edge
    τελευταίες 2 κύριες εκδόσεις Safari
    τελευταίες 2 κύριες εκδόσεις iOS
    Firefox ESR
    δενios_saf 15.2-15.3
    δενσαφάρι 15.2-15.3
  7. Διαγράψτε το προεπιλεγμένο περιεχόμενο στο src/app/app.component.html αρχείο. Αντικαταστήστε το με κάποιο νέο περιεχόμενο.
    <div class="περιεχόμενο">
    <div class="κάρτα">
    <h2> Σπίτι </h2>
    <Π>
     Καλώς ήρθατε στην εφαρμογή Angular Electron μου!
    </Π>
    </div>
    </div>
  8. Προσθέστε κάποιο στυλ για το περιεχόμενο στο src/app/app.component.css αρχείο.
    .περιεχόμενο {
     Ύψος γραμμής: 2 εκ.
    μέγεθος γραμματοσειράς: 1.2em;
     περιθώριο: 48 px 10%;
     γραμματοσειρά-οικογένεια: Arial, sans-serif
    }
    .κάρτα {
    κουτί-σκιά: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     πλάτος: 85%;
     padding: 16px 48px;
     περιθώριο: 24px 0px;
     χρώμα φόντου: whitesmoke;
     γραμματοσειρά-οικογένεια: sans-serif;
    }
  9. Προσθέστε λίγο γενικό στυλ στο src/styles.css αρχείο για να αφαιρέσετε τα προεπιλεγμένα περιθώρια και τα paddings.
    html {
     περιθώριο: 0;
     γέμιση: 0;
    }

Πώς να εκτελέσετε μια εφαρμογή ηλεκτρονίων

Για να εκτελέσετε την εφαρμογή σας σε ένα παράθυρο, διαμορφώστε μια εντολή στον πίνακα σεναρίων του package.json. Στη συνέχεια, εκτελέστε την εφαρμογή σας χρησιμοποιώντας την εντολή στο τερματικό.

  1. Σε πακέτο.json, μέσα στον πίνακα σεναρίων, προσθέστε μια εντολή για να δημιουργήσετε την εφαρμογή Angular και να εκτελέσετε το Electron. Βεβαιωθείτε ότι έχετε προσθέσει κόμμα μετά την προηγούμενη καταχώρηση στον πίνακα Σεναρίων.
    "σενάρια": {
     ...
    "ηλεκτρόνιο": "ng κατασκευή && ηλεκτρόνιο ."
    },
  2. Για να εκτελέσετε τη νέα σας εφαρμογή Angular σε ένα παράθυρο επιφάνειας εργασίας, εκτελέστε τα ακόλουθα στη γραμμή εντολών, στον ριζικό φάκελο του έργου σας:
    npm τρέχον ηλεκτρόνιο
  3. Περιμένετε να μεταγλωττιστεί η αίτησή σας. Μόλις ολοκληρωθεί, αντί να ανοίξει η εφαρμογή Angular στο πρόγραμμα περιήγησης ιστού, θα ανοίξει ένα παράθυρο επιφάνειας εργασίας. Το παράθυρο της επιφάνειας εργασίας θα εμφανίσει τα περιεχόμενα της εφαρμογής Angular.
  4. Εάν θέλετε να εξακολουθείτε να βλέπετε την εφαρμογή σας στο πρόγραμμα περιήγησης ιστού, μπορείτε να εκτελέσετε την εντολή ng serve.
    ng σερβίρετε
  5. Εάν χρησιμοποιείτε το ng σερβίρετε εντολή, τα περιεχόμενα της εφαρμογής σας θα εξακολουθούν να εμφανίζονται σε ένα πρόγραμμα περιήγησης ιστού στο localhost: 4200.

Κατασκευή επιτραπέζιων εφαρμογών με ηλεκτρόνιο

Μπορείτε να χρησιμοποιήσετε το Electron για να δημιουργήσετε εφαρμογές επιτραπέζιου υπολογιστή σε Windows, Mac και Linux. Από προεπιλογή, μπορείτε να δοκιμάσετε μια εφαρμογή Angular χρησιμοποιώντας ένα πρόγραμμα περιήγησης ιστού μέσω της εντολής ng serve. Μπορείτε να διαμορφώσετε την εφαρμογή Angular ώστε να ανοίγει και σε παράθυρο επιφάνειας εργασίας αντί για πρόγραμμα περιήγησης ιστού.

Μπορείτε να το κάνετε αυτό χρησιμοποιώντας ένα αρχείο JavaScript. Θα χρειαστεί επίσης να διαμορφώσετε τα αρχεία index.html και package.json. Η συνολική εφαρμογή θα εξακολουθεί να ακολουθεί την ίδια δομή με μια κανονική εφαρμογή Angular.

Εάν θέλετε να μάθετε περισσότερα σχετικά με τον τρόπο δημιουργίας εφαρμογών για επιτραπέζιους υπολογιστές, μπορείτε επίσης να εξερευνήσετε τις εφαρμογές Φόρμες των Windows. Οι εφαρμογές Φόρμες των Windows σάς επιτρέπουν να κάνετε κλικ και να σύρετε στοιχεία διεπαφής χρήστη σε έναν καμβά, ενώ παράλληλα προσθέτετε οποιαδήποτε λογική κωδικοποίησης σε αρχεία C#.