🤵🏾 🚏 👨🏼‍🌾 用Electron JS编写GUI应用程序（开始：创建窗口） 😳 😪 🤽

问候！如果您读了这篇文章，那么您很可能不愿意阅读正式文档（而且非常徒劳。它写的很详细，并且翻译成俄文），您来了一个简单的解决方案-为计算机编写跨平台应用程序仅使用Web技术。我建议不要延迟并立即开始。但是，由于这是第一篇文章，所以我认为有必要简要介绍一下Electron JS的含义和用途。

官方文件说：

如果您可以创建一个网站，则可以创建一个桌面应用程序。Electron是一个框架，用于使用JavaScript，HTML和CSS等网络技术构建本机应用程序。它处理了困难的部分，因此您可以专注于应用程序的主要元素。

用Electron构建的应用程序是常规网站，可以通过预安装的Chromium Web浏览器启动。除了经典的HTML5 API标准之外，还可以应用Node.js模块的全部列表和独特的Electron功能。服务模块提供对OS的访问。

是的，起初，您最好熟悉网站的创建方式。我不会关注HTML和CSS代码的细节。

- , 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. . . :

, . , , , Web , .

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

用Electron JS编写GUI应用程序（开始：创建窗口）

More articles: