介绍
一天的好时光！我想与您分享我结合使用Electron和Webix创建桌面JavaScript应用程序的个人经验。这样的捆绑软件使您可以加快界面布局的过程，尤其是在不浪费时间的情况下，以及在Webix框架可以做的其他Web事情上。工具类
因此，让我们开始吧，我们将需要以下工具：- 我们将直接在其中编写代码的编辑器。我将使用Visual Studio代码（VSC），可以从此处获取；
- Node.js服务器，可以从此处获取。下载并安装；
- Webix Framework是一个免费版本（Webix Standard是GNU GPLv3许可下的免费UI库），我们从此处获取webix.com/get-webix-gpl。为了下载它，您需要转到上面的链接，输入电子邮件，名字和姓氏，并打三个勾号，单击“发送”，然后将下载链接发送到您的邮件中。
通常，这就是我们所需要的。安装必要的工具
因此，我们直接进行创建：1.安装“ node.js”。我不会在这里停留，我敢肯定，没有我，你可以做到这一点。2.创建一个我们将在其中编写代码的文件夹-例如，electron_webix（图1）。
图。 1-创建一个工作文件夹3.启动VSC并打开此文件夹（图2）。
图。 2-打开工作文件夹。4.使用“ Ctrl +'”组合键打开VSC终端，然后输入“ npm init”命令，这将初始化我们的“ node.js”项目。之后，系统将询问一堆不同且非常有用的问题，无需回答。然后，我们一直无时无刻地按下“ Enter”按钮，不要担心任何不好的事情（图3）。
图。 3-项目初始化5.直接安装Electron本身。为什么我们在VSC控制台中输入命令“ npm install --save-develectron”，然后我们坐下来等到所有东西都安装好（图4）。
图。4-电子安装工作区组织
现在我们来看工作空间的组织。我们需要做的第一件事是创建几个文件夹和文件，这是我们不可或缺的（图5）：- 在“ libs”文件夹中，在这里我们放置了从“ Webix”站点下载的文件；
- “ .vscode”文件夹，在这里我们将在VSC中运行我们的应用程序的json文件；
- 文件“ main.js”，将运行我们的Electron应用程序的主文件；
- “ index.html”文件将包含我们的内容和标记；
- 文件“ renderer.js”，我们应用程序的事件处理程序。与index.html结合使用；
- 文件“ launch.json”，在文件夹“ .vscode”中，使用“ F5”按钮在“ VSC”环境中运行我们的代码所需的文件；
- 文件“ style.css”，在此文件中，我们仍然必须注册一些样式，以便我们的窗口看起来不错。
图。5-所需的文件夹和文件用初始内容填充工作区
让我们开始使用“ launch.json”文件填充工作区，该文件用于在“ VSC”环境中启动我们的应用程序，而无需控制台中的任何其他命令。“ launch.json”文件的内容来自此处。在这里，我们不会深入研究该文件的内容，只需将其复制并保存即可。该文件的内容如下所示（图6）。 "version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"outputCapture": "std"
}
]
}
图。6-“ VSC”环境中的“ launch.json”文件接下来，我们需要更正“ package.json”文件，该文件是在运行“ npm init”命令时自动创建的。需要对其进行两行更改，如下所示（图7）：存在这样的“ package.json”： "name": "electron_webix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^8.2.3"
}
}
这是一个package.json：{
"name": "electron_webix",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^8.2.3"
}
}
图。7-“ VSC”环境中的“ package.json”文件现在我们来填充“ main.js”文件，从此处复制其内容。插入并保存。const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
图。8-“ VSC”环境中的“ main.js”文件，此后，我们终于可以最终执行应用程序的“ F5键”的首次启动。因此，按“ F5”，这是我们的窗口（图9）。
图。9-在“ VSC”环境中的文件“ main.js”
。9？这是我们的应用程序的工作区，左边是调试工具。现在，在index.html文件中创建初始标记。为什么在“ VSC”中执行以下操作：打开文件“ index.html” =>输入“！” =>然后单击“ Enter” =>，然后单击魔术和以下结果：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
好吧，就像在“”标签之间编写代码的最佳传统一样，插入文本“ Hello world !!!”。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello world!!!
</body>
</html>
之后，我们尝试再次按“ F5”并检查一切对我们都有效（图10）
。 10-“ Hello world !!!”窗口现在，我们需要从下载的webix.zip存档中提取“ codebase”文件夹的全部内容，并将其传输到我们的libs文件夹中（图11）。打开存档，转到codebase文件夹，获取其内容并将其传输到libs包。
图。 11-“ libs”文件夹的内容填充“ libs”文件夹的内容后，打开“ renderer.js”文件并在其中写入以下内容：
const { remote } = require('electron')
let WIN = remote.getCurrentWindow()
const webix = require('./libs/webix.min.js')
$ = require('jquery')
webix.ui({
})
接下来，我们将排版我们的界面。为什么要转到此处designer.webix.com/welcome，单击“快速入门”按钮，然后转到界面布局。例如，如图12
所示。 12-Webix Web Designer中界面的布局图12所示的布局非常简单，只需将所需的元素拖放到Designer工作区中即可。构造函数的右侧部分用于编辑元素的属性。布局完成后（图13），您需要将其传输到renderer.js文件。为什么单击“代码”按钮并以文本形式获得现成的布局。选择此文本并将其复制。
图。 13-将布局转换为文本之后，我们在“ VSC”中打开“ renderer.js”文件，并将复制的文本粘贴到准备好的“ webix.ui”函数中（图14）。
const { remote } = require('electron')
let WIN = remote.getCurrentWindow()
const webix = require('./libs/webix.min.js')
$ = require('jquery')
webix.ui(
{
"id": 1587908357897,
"rows": [
{
"css": "webix_dark",
"view": "toolbar",
"height": 0,
"cols": [
{ "view": "label", "label": "Elcetron +Webix its cool!"},
{ "label": "-", "view": "button", "height": 38, "width": 40},
{ "label": "+", "view": "button", "height": 38, "width": 40},
{ "label": "x", "view": "button", "height": 38, "width": 40}
]
},
{
"width": 0,
"height": 0,
"cols": [
{ "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
{
"width": 0,
"height": 0,
"rows": [
{ "template": "Hello WORLD! ", "view": "template" },
{
"url": "demo->5ea58f0e73f4cf00126e376d",
"type": "bar",
"xAxis": "#value#",
"yAxis": {},
"view": "chart"
}
]
}
]
}
]
}
)
图。14-添加由设计师Suffer 创建的布局。接下来，在“ VSC”中打开我们预先准备的index.html文件，并在其中按原样添加以下三行：，而index.html文件将采用以下形式：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./libs/webix.css">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<script src="./renderer.js"></script>
</body>
</html>
接下来，单击“ F5”，并从Webix获得具有布局的应用程序（图15）
。15-具有Webix布局的应用程序的工作窗口
添加几个芯片。
一切似乎都正常。但是，我想删除我们不需要的窗框，因为它实际上不适合我们的设计。我们将与您一起使用定制解决方案。为什么我们打开“ main.js”文件并在其中添加frame参数：创建BrowserWindow时为false，此标志删除标准菜单和窗口边框。它看起来应该像这样：const win = new BrowserWindow({
width: 800,
height: 600,
frame:false,
webPreferences: {
nodeIntegration: true
}
})
单击“ F5”，然后查看没有框架窗口的结果（图16）。
图。16-具有Webix布局的应用程序的工作窗口仍然需要教我们的窗口如何响应鼠标事件。首先，我们将使标题处于活动状态，以便它可以在监视器屏幕上移动窗口。为什么打开“ renderer.js”文件，在其中找到view：label元素并向其中添加css：“ head_win”属性，结果应该如图17所示。 { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
{ "label": "-", "view": "button", "height": 38, "width": 40},
{ "label": "+", "view": "button", "height": 38, "width": 40 },
{ "label": "x", "view": "button", "height": 38, "width": 40}
图。17-向视图中添加样式：label元素现在，您需要将此样式注册到专门为此目的创建的文件中。打开文件“ style.css”并创建以下样式：.head_win {
-webkit-app-region: drag;
}
之后，我们启动“ F5”应用程序，并尝试将窗口拖到标题旁边。一切都应该工作。最后，我们的应用程序将响应单击“-，+，x”窗口的标题按钮。为什么将以下代码添加到renderer.js文件的末尾：
$$("close-bt").attachEvent("onItemClick", () => {
const window = remote.getCurrentWindow();
window.close();
})
$$("min-bt").attachEvent("onItemClick", () => {
const window = remote.getCurrentWindow();
window.minimize();
})
$$("max-bt").attachEvent("onItemClick", () => {
const window = remote.getCurrentWindow();
if (!window.isMaximized()) {
window.maximize();
} else {
window.unmaximize();
}
})
在此代码中，形式为“ $$（“ max-bt”）”的条目表示通过其“ id”访问“ Webix”元素。因此，标题按钮必须在文件“ renderer.js”中指定这些ID，我们将要做的如图18所示： { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
{ "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
{ "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
{ "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }
图。18-在视图中添加样式：标签元素到目前为止，仅此而已。尝试它应该起作用。可以从github下载源代码，这里是链接。感谢您的关注。