Home-theater-designers
Electron ви позволява да създавате настолни приложения за Windows, Mac и Linux. Когато създавате приложение с помощта на Electron, можете да прегледате и стартирате приложението през прозорец на настолно приложение.
Можете да използвате Electron, за да конфигурирате приложение Angular да се стартира в прозорец на работния плот, вместо в обичайния уеб браузър. Можете да направите това с помощта на JavaScript файл в самото приложение.
След като конфигурирате Electron, можете да продължите разработката, както бихте направили в обикновено приложение Angular. Основните части на приложението ще продължат да следват същата стандартна Angular структура.
Как да инсталирате Electron като част от вашето приложение
За да използвате Electron, трябва да изтеглите и инсталирате node.js и да използвате npm install, за да добавите Electron към вашето приложение.
поръчката на amazon е доставена, но не е получена
- Изтеглете и инсталирайте 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
Файловата структура на приложението Angular Electron
Electron ще изисква основен JavaScript файл за създаване и управление на прозореца на работния плот. Този прозорец ще покаже съдържанието на вашето приложение в него. JavaScript файлът ще съдържа и други събития, които могат да възникнат, като например ако потребителят затвори прозореца.
какво е micro sd карта
По време на изпълнение показваното съдържание ще идва от файла 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> Вътре в тага body има таг
Как да използвате Electron за отваряне на Angular приложение в прозорец на работния плот
Създайте файла main.js и го конфигурирайте да отваря съдържанието на приложението в прозорец на работния плот.
как да възстановя профила си във Facebook чрез приятели
- Създайте файл в корена на вашия проект с име 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="./"> - в package.json , добави основен и включете файла main.js като стойност. Това ще бъде входната точка за приложението, така че приложението да изпълнява файла main.js, докато стартира приложението.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - В .browserslistrc файл, променете списъка, за да премахнете iOS safari версии 15.2-15.3. Това ще предотврати показването на грешки за съвместимост в конзолата при компилиране.
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 файл, за да премахнете полетата и подложките по подразбиране.
html {
margin: 0;
padding: 0;
}
Как да стартирате приложение Electron
За да стартирате приложението си в прозорец, конфигурирайте команда в масива със скриптове на package.json. След това стартирайте приложението си, като използвате командата в терминала.
- в package.json , вътре в масива със скриптове, добавете команда за изграждане на приложението Angular и стартирайте Electron. Уверете се, че сте добавили запетая след предходния запис в масива Scripts.
"scripts": {
...
"electron": "ng build && electron ."
}, - За да стартирате новото си Angular приложение в прозорец на работния плот, изпълнете следното в командния ред, в основната папка на вашия проект:
npm run electron - Изчакайте вашето приложение да се компилира. След като приключите, вместо вашето приложение Angular да се отваря в уеб браузъра, ще се отвори прозорец на работния плот. Прозорецът на работния плот ще покаже съдържанието на вашето Angular приложение.
- Ако все още искате да преглеждате приложението си в уеб браузъра, можете да изпълните командата ng serve.
ng serve - Ако използвате на обслужване команда, съдържанието на вашето приложение ще продължи да се показва в уеб браузър на локален хост: 4200.
Изграждане на настолни приложения с Electron
Можете да използвате Electron за създаване на десктоп приложения на Windows, Mac и Linux. По подразбиране можете да тествате приложение Angular с помощта на уеб браузър чрез командата ng serve. Можете да конфигурирате вашето Angular приложение да се отваря и в прозорец на работния плот вместо в уеб браузър.
Можете да направите това с помощта на JavaScript файл. Ще трябва също да конфигурирате вашите файлове index.html и package.json. Цялостното приложение все още ще следва същата структура като обикновено приложение Angular.
Ако искате да научите повече за това как да създавате настолни приложения, можете също да разгледате приложенията на Windows Forms. Приложенията на Windows Forms ви позволяват да щраквате и плъзгате UI елементи върху платно, като същевременно добавяте каквато и да е логика за кодиране в C# файлове.