Содержание
Что такое электрон
Electron позволяет создавать настольные приложения с чистым JavaScript, предоставляя среду выполнения с богатыми собственными (операционными системами) API-интерфейсами. Вы можете увидеть его как вариант среды выполнения Node.js, которая ориентирована на настольные приложения, а не на веб-серверы.
Это не означает, что Electron — это привязка JavaScript к библиотекам графического интерфейса пользователя (GUI). Вместо этого Electron использует веб-страницы в качестве своего графического интерфейса, так что вы также можете видеть его как минимальный браузер Chromium, управляемый JavaScript.
Вы понимаете Javascript? Чего ты ждешь ? Из этой статьи вы узнаете, как легко реализовать проект «Электронный бланк» в Windows.
Бесплатные приложения на базе Electron:
Что вам нужно
- Знание Javascript
- Распределение NodeJS для Windows (командная строка Nodejs)
1. Установите дистрибутив Node.js
Вам нужен Node.js, установленный на вашем компьютере. Node — это среда исполнения javascript, построенная на ядре Chrome javascript, легкая и эффективная, которая позволит вам установить электронный выпуск и создать свой гибридный проект.
Вы можете скачать Последняя версия Node.js на домашней странице здесь.
После загрузки установите дистрибутив и выполните командную строку Node.js (которая выглядит так же, как команда Windows Promp cmd.exe). Здесь вы выполните все упомянутые команды в этом посте.
2. Создайте базовую структуру для вашего проекта
Вы можете скачать официальную готовую к тестированию готовую версию, чтобы пропустить этот шаг в командной строке node.js:
# Locate yourself in a folder, where you want and Clone the repository
$ git clone https://github.com/atom/electron-quick-start
# Then go to step 3 !Если вы хотите создать свой собственный, то продолжайте читать.
Electron позволит вам создать гибридное приложение из веб-ресурсов, для запуска которого вам понадобится:
Создайте папку с именем вашего проекта в любом месте и назовите ее как хотите, в этом примере наша папка будет ocwDemo и будет содержать 3 файла:
- index.html (ваш шаблон)
- main.js (настройте базовую нативную конфигурацию здесь)
- package.json (все зависимости проекта)
index.html
Our Code World Rocks
Our Code World Electron Demo
We are using node document.write(process.versions.node),
Chrome document.write(process.versions.chrome),
and Electron document.write(process.versions.electron).
main.js
Если вы решили изменить имя вашего HTML-файла, не забудьте изменить его в файлах main.js и package.json.
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false
})
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function() {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.package.json
Пакет json — это краткое описание вашего проекта, который также содержит зависимости, которые вы хотите добавить (менеджер пакетов узлов) и, конечно же, нашу готовую электронную программу, которая будет содержать требуемую версию электрона, Узнайте больше о релизах здесь.
{
"name": "ourcodeworldelectron",
"version": "1.0.0",
"description": "A quick description of your project",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"author": "Our Code World",
"license": "CC0-1.0",
"devDependencies": {
"electron-prebuilt": "^1.4.1"
}
}
3. Установите зависимости
После создания нашей структуры (или клонирования демо-репозитория) нам нужно перейти в папку, где находится проект с консолью:
# Go into the repository (folder ourcodeworldelectron) using cd command
$ cd ourcodeworldelectron
# and then install dependencies using
npm install
Начнут загружаться зависимости, и проект будет почти готов к тестированию.
4. Выполнить и просмотреть
Это оно ! Вы уже структурировали базовое настольное приложение. Теперь вам нужно только запустить тест! Выполните следующую команду в консоли:
npm startИ после небольшого времени строительства … вы получите что-то вроде:
Благодаря электронике вы сможете создать гибридное приложение за считанные минуты с Node.js.
Важно прочитайте все, что можете о фреймворке здесь. После того как вы закончили писать свое приложение, вы можете создать дистрибутив, следуя Распределение приложений руководство, а затем выполнение упакованного приложения. Повеселись !
