🚚 🥐 🚢 Schreiben einer grafischen Anwendung in Electron JS (Start: Erstellen eines Fensters) ⛄️ 💃🏾 🌍

Schöne Grüße! Wenn Sie zu diesem Artikel gegangen sind, zögern Sie höchstwahrscheinlich, in die offizielle Dokumentation zu gehen (und das sehr vergeblich. Sie ist detailliert geschrieben und ins Russische übersetzt), und Sie haben eine einfache Lösung für Ihr Problem gefunden - das Schreiben einer plattformübergreifenden Anwendung für einen Computer Verwenden Sie nur Webtechnologien. Ich schlage vor, nicht zu verzögern und sofort zu beginnen. Aber da dies der erste Artikel ist, denke ich, dass es sich lohnt, kurz zu sagen, was Electron JS ist und wofür es ist.

Bild

Die offizielle Dokumentation sagt:

Wenn Sie eine Website erstellen können, können Sie eine Desktop-Anwendung erstellen. Electron ist ein Framework zum Erstellen nativer Anwendungen mit Webtechnologien wie JavaScript, HTML und CSS. Es kümmert sich um die schwierigen Teile, sodass Sie sich auf die Hauptelemente Ihrer Anwendung konzentrieren können.

Mit Electron erstellte Anwendungen sind reguläre Websites, die mit dem vorinstallierten Chromium-Webbrowser ausgeführt werden. Zusätzlich zu den klassischen HTML5-API-Standards ist es möglich, die gesamte Liste der Node.js-Module und einzigartigen Electron-Funktionen anzuwenden. Servicemodule bieten Zugriff auf das Betriebssystem.

Ja, zunächst wäre es schön, wenn Sie sich mit der Erstellung von Websites vertraut machen würden. Ich werde mich nicht auf die Details des HTML- und CSS-Codes konzentrieren.

- , Electron JS. : Skype, Visual Studio Code, Slack .

.

. Visual Studio Code.

,

npm init

( , ).

npm Node.JS

Node.JS npm init , Node.JS . Node.JS . LTS . MacOS Windows , "

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

"start": "electron ."

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

, . . Electron JS. Electron :

npm install -g electron

npm install electron -save

— package-lock.json — node_modules. . , . package.json :

  "main": "index.js"

, "index.js". :

const path = require('path');
const url = require('url');
const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
    win = new BrowserWindow({
        width: 700,
        height: 500,
    });

    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

, , :

"width" "height" . 700 500 .
pathname: path.join(__dirname, 'index.html') , "index.js" , "index.html"
- Chromium win.webContents.openDevTools(); Chrome DevTools.

( c ).

index.html <body> , -, Hello world:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

- . :

npm start

, start package.json. . . :

Bild

, . , , , Web , .

P.S. , , , Electron, "" Electron`, ( ) , .

Schreiben einer grafischen Anwendung in Electron JS (Start: Erstellen eines Fensters)

More articles: