Home-theater-designers
Το Electron σάς επιτρέπει να δημιουργείτε εφαρμογές επιφάνειας εργασίας για Windows, Mac και Linux. Όταν δημιουργείτε μια εφαρμογή χρησιμοποιώντας το Electron, μπορείτε να κάνετε προεπισκόπηση και να εκτελέσετε την εφαρμογή μέσω ενός παραθύρου εφαρμογής επιτραπέζιου υπολογιστή.
Μπορείτε να χρησιμοποιήσετε το Electron για να διαμορφώσετε μια εφαρμογή Angular ώστε να εκκινείται σε παράθυρο επιφάνειας εργασίας, αντί για το συνηθισμένο πρόγραμμα περιήγησης ιστού. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας ένα αρχείο JavaScript μέσα στην ίδια την εφαρμογή.
δεν έλαβα την παραγγελία μου στο amazon
Μόλις διαμορφώσετε το Electron, μπορείτε να συνεχίσετε την ανάπτυξη όπως θα κάνατε σε μια κανονική εφαρμογή Angular. Τα κύρια μέρη της εφαρμογής θα εξακολουθούν να ακολουθούν την ίδια τυπική γωνιακή δομή.
Πώς να εγκαταστήσετε το Electron ως μέρος της εφαρμογής σας
Για να χρησιμοποιήσετε το Electron, πρέπει να κάνετε λήψη και εγκατάσταση του node.js και να χρησιμοποιήσετε το npm install για να προσθέσετε το Electron στην εφαρμογή σας.
- Λήψη και εγκατάσταση node.js . Μπορείτε να επιβεβαιώσετε ότι το έχετε εγκαταστήσει σωστά ελέγχοντας την έκδοση:
Ο κόμβος περιλαμβάνει επίσης npm, ο διαχειριστής πακέτων JavaScript . Μπορείτε να επιβεβαιώσετε ότι έχετε εγκαταστήσει το npm ελέγχοντας την έκδοση npm:node -vnpm -v - Δημιουργήστε μια νέα εφαρμογή Angular χρησιμοποιώντας το του νέου εντολή. Αυτό θα δημιουργήσει έναν φάκελο που περιέχει όλα τα απαραίτητα αρχεία που απαιτούνται για ένα έργο Angular για εργασία.
ng new electron-app - Στον ριζικό φάκελο της εφαρμογής σας, χρησιμοποιήστε npm για να εγκαταστήσετε το Electron.
npm install --save-dev electron - Αυτό θα δημιουργήσει έναν νέο φάκελο για το Electron στο φάκελο node_modules της εφαρμογής.
- Μπορείτε επίσης να εγκαταστήσετε το Electron παγκοσμίως στον υπολογιστή σας.
npm install -g electron
Η δομή του αρχείου της εφαρμογής γωνιακών ηλεκτρονίων
Το Electron θα απαιτήσει ένα κύριο αρχείο JavaScript για τη δημιουργία και τη διαχείριση του παραθύρου της επιφάνειας εργασίας. Αυτό το παράθυρο θα εμφανίσει τα περιεχόμενα της εφαρμογής σας μέσα σε αυτό. Το αρχείο JavaScript θα περιέχει επίσης άλλα συμβάντα που μπορεί να προκύψουν, όπως εάν ο χρήστης κλείσει το παράθυρο.
Κατά το χρόνο εκτέλεσης, το περιεχόμενο που εμφανίζεται θα προέρχεται από το αρχείο index.html. Από προεπιλογή, μπορείτε να βρείτε το αρχείο index.html μέσα στο src φάκελο και κατά το χρόνο εκτέλεσης δημιουργείται αυτόματα ένα ενσωματωμένο αντίγραφό του μέσα στο απόσταση ντοσιέ.
Το αρχείο index.html συνήθως μοιάζει με αυτό:
αυτός ο αριθμός με καλεί συνέχεια πώς μπορώ να μάθω ποιος είναι
<!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> Μέσα στην ετικέτα σώματος υπάρχει μια ετικέτα
Πώς να χρησιμοποιήσετε το Electron για να ανοίξετε μια γωνιακή εφαρμογή σε ένα παράθυρο επιφάνειας εργασίας
Δημιουργήστε το αρχείο main.js και διαμορφώστε το ώστε να ανοίγει το περιεχόμενο της εφαρμογής μέσα σε ένα παράθυρο επιφάνειας εργασίας.
- Δημιουργήστε ένα αρχείο στη ρίζα του έργου σας με το όνομα main.js . Σε αυτό το αρχείο, αρχικοποιήστε το Electron ώστε να μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε το παράθυρο της εφαρμογής.
const { app, BrowserWindow } = require('electron'); - Δημιουργήστε ένα νέο παράθυρο επιφάνειας εργασίας συγκεκριμένου πλάτους και ύψους. Φορτώστε το αρχείο ευρετηρίου ως περιεχόμενο που θα εμφανιστεί στο παράθυρο. Βεβαιωθείτε ότι η διαδρομή προς το αρχείο ευρετηρίου ταιριάζει με το όνομα της εφαρμογής σας. Για παράδειγμα, εάν ονομάσατε την εφαρμογή σας 'electron-app', η διαδρομή θα είναι 'dist/electron-app/index.html'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - Όταν η εφαρμογή είναι έτοιμη, καλέστε τη συνάρτηση createWindow(). Αυτό θα δημιουργήσει το παράθυρο της εφαρμογής για την εφαρμογή σας.
app.whenReady().then(() => {
createWindow()
}) - Στο src/index.html αρχείο, στο βάση ετικέτα, αλλάξτε το χαρακτηριστικό href σε './'.
<base href="./"> - Σε πακέτο.json , πρόσθεσε ένα κύριος πεδίο και συμπεριλάβετε το αρχείο main.js ως τιμή. Αυτό θα είναι το σημείο εισόδου για την εφαρμογή, έτσι ώστε η εφαρμογή να εκτελεί το αρχείο main.js καθώς εκκινεί την εφαρμογή.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - Στο .browserslistrc αρχείο, τροποποιήστε τη λίστα για να καταργήσετε τις εκδόσεις 15.2-15.3 του iOS safari. Αυτό θα αποτρέψει την εμφάνιση σφαλμάτων συμβατότητας στην κονσόλα κατά τη μεταγλώττιση.
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 - Διαγράψτε το προεπιλεγμένο περιεχόμενο στο src/app/app.component.html αρχείο. Αντικαταστήστε το με κάποιο νέο περιεχόμενο.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Προσθέστε κάποιο στυλ για το περιεχόμενο στο src/app/app.component.css αρχείο.
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
} - Προσθέστε λίγο γενικό στυλ στο src/styles.css αρχείο για να αφαιρέσετε τα προεπιλεγμένα περιθώρια και τα paddings.
html {
margin: 0;
padding: 0;
}
Πώς να εκτελέσετε μια εφαρμογή ηλεκτρονίων
Για να εκτελέσετε την εφαρμογή σας σε ένα παράθυρο, διαμορφώστε μια εντολή στον πίνακα σεναρίων του package.json. Στη συνέχεια, εκτελέστε την εφαρμογή σας χρησιμοποιώντας την εντολή στο τερματικό.
- Σε πακέτο.json , μέσα στον πίνακα σεναρίων, προσθέστε μια εντολή για να δημιουργήσετε την εφαρμογή Angular και να εκτελέσετε το Electron. Βεβαιωθείτε ότι έχετε προσθέσει κόμμα μετά την προηγούμενη καταχώρηση στον πίνακα Σεναρίων.
"scripts": {
...
"electron": "ng build && electron ."
}, - Για να εκτελέσετε τη νέα σας εφαρμογή Angular σε ένα παράθυρο επιφάνειας εργασίας, εκτελέστε τα ακόλουθα στη γραμμή εντολών, στον ριζικό φάκελο του έργου σας:
npm run electron - Περιμένετε να μεταγλωττιστεί η αίτησή σας. Μόλις ολοκληρωθεί, αντί να ανοίξει η εφαρμογή Angular στο πρόγραμμα περιήγησης ιστού, θα ανοίξει ένα παράθυρο επιφάνειας εργασίας. Το παράθυρο της επιφάνειας εργασίας θα εμφανίσει τα περιεχόμενα της εφαρμογής Angular.
- Εάν θέλετε να εξακολουθείτε να βλέπετε την εφαρμογή σας στο πρόγραμμα περιήγησης ιστού, μπορείτε να εκτελέσετε την εντολή ng serve.
ng serve - Εάν χρησιμοποιείτε το του σερβιρίσματος εντολή, τα περιεχόμενα της εφαρμογής σας θα εξακολουθούν να εμφανίζονται σε ένα πρόγραμμα περιήγησης ιστού στο localhost:4200.
Κατασκευή επιτραπέζιων εφαρμογών με ηλεκτρόνιο
Μπορείτε να χρησιμοποιήσετε το Electron για να δημιουργήσετε εφαρμογές επιτραπέζιου υπολογιστή σε Windows, Mac και Linux. Από προεπιλογή, μπορείτε να δοκιμάσετε μια εφαρμογή Angular χρησιμοποιώντας ένα πρόγραμμα περιήγησης ιστού μέσω της εντολής ng serve. Μπορείτε να διαμορφώσετε την εφαρμογή Angular ώστε να ανοίγει και σε παράθυρο επιφάνειας εργασίας αντί για πρόγραμμα περιήγησης ιστού.
Μπορείτε να το κάνετε αυτό χρησιμοποιώντας ένα αρχείο JavaScript. Θα χρειαστεί επίσης να διαμορφώσετε τα αρχεία index.html και package.json. Η συνολική εφαρμογή θα εξακολουθεί να ακολουθεί την ίδια δομή με μια κανονική εφαρμογή Angular.
Εάν θέλετε να μάθετε περισσότερα σχετικά με τον τρόπο δημιουργίας εφαρμογών για επιτραπέζιους υπολογιστές, μπορείτε επίσης να εξερευνήσετε τις εφαρμογές Φόρμες των Windows. Οι εφαρμογές Φόρμες των Windows σάς επιτρέπουν να κάνετε κλικ και να σύρετε στοιχεία διεπαφής χρήστη σε έναν καμβά, ενώ προσθέτετε επίσης οποιαδήποτε λογική κωδικοποίησης σε αρχεία C#.