В этой статье мы разберём основы создание приложения для ПК на
Electron js, расскажу лишь базовые принципы, как можно это всё сделать.
В качестве примере мы будем портировать пинг понг который мы сделали в одной из прошлых статей, если не знаете как его сделать, то прочитайте: «Javascript пинг понг создаём игру с использованием canvas», так как тут не будем объяснять как это сделать, а только портируем.
Ещё можете скачать этот пинг понг для браузера из моего GitHub репозитория, там он ещё не много доработан.
Electron js приложение:
Сейчас вы убедитесь что создавать приложения на javascript просто.
Базовая настройка electron:
Теперь перейдём к созданию этого приложения, для начала скажу, у вас обязательно должен быть установлен Node.js, если его нет, то посмотрите эти две статьи:
После этого инициализируем проект, для этого создаём папку с проектом, я её назову «electron-js», открою её в терминале и введу эту команду:
1 | npm init -y |
Таким образом у вас должна появиться файл «package.json», и теперь скачиваем electron-js, вот что пишем в терминале:
1 | npm i --save-dev electron |
Теперь для более удобного запуска немного настроем «package.json»:
1 2 3 4 5 6 7 8 9 10 | { "name": "my-electron-app", "version": "0.1.0", "author": "your name", "description": "My Electron app", "main": "main.js" "scripts": { "start": "electron ." } } |
После в папке создадим ещё четыре файла:
- main.js — Основной файл, откуда будет компилироваться electron;
- script.js — Файл со всей логикой программы;
- index.html — HTML файл для в котором всё и будет работать;
- style.css — Файл стилей;
Создание проекта:
Теперь начнём разрабатывать сам проект, первым делом нужно всё сделать во файле «main.js», заходим в него и вот что пишем:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // Портируем нужные компоненты const { app, BrowserWindow } = require('electron') // Функция для создания окна приложения function createWindow () { // Создаём окно const win = new BrowserWindow({ width: 1000, height: 800, autoHideMenuBar: true, webPreferences: { nodeIntegration: true } }) // Вывод файла index.html win.loadFile('index.html') } // Проверяем инициализацию electron app.whenReady().then(createWindow) // Проверка события закрытия окна app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) // Отслеживание активации приложения app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) |
Давайте разберём этот код, в начале мы портируем все зависимости, потом создаём функцию, которая будет создавать окно приложения.
Там мы создаём объект окна с параметрами, width и height это ширина и высота окна, которая будет при запуске, autoHideMenuBar если true то убирает верхнее меню приложения, так как мы для игры делаем, то оно нам не нужно.
Последнее что есть во функции, это win.loadFile(), оно отвечает за то, какой файл вывести в окне.
После того как закончили с функцией, начинаем отслеживать события приложения через метод on() объекта app, который мы импортировали.
Первым проверяем инициализацию electron, если она есть, то запускаем функцию createWindow(), тем самым создаём окно.
Второе проверяем закрытие окна, если окно есть, и оно открыто, то выключаем всё приложение, последние проверяем активацию приложения, если это происходит, то проверяем если нет окон, то создаём ещё одно.
На этом с главным файлом покончено, теперь перейдём к «index.html»:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Пинг понг на Canvas JS</title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Пинг понг на Canvas JS</h1> <canvas id="canvas" width="900" height="400"></canvas> <p>Счёт: <span id="score"></span></p> <script src="script.js"></script> </body> </html> |
Как видите это обычный HTML файл, даже скрипты подключаются так же, и возможно вы уже догадались, что по сути мы просто запустили HTML страницу в окне.
Примечание:
Показывать что в остальных файлах я не буду, если вам это надо, то прочитайте статью которую я указал в самом начале или зайдите на мой GitHub. Да и в целом в этом нет смысла, так как вы сами можете сделать в этих файлах всё что угодно.
Можете запустить проект, для этого введите команду:
1 | npm run start |
Вот что вышло:
Как видите полноценное рабочее electron js приложение.
Постройка приложения на electron js:
Мы разобрались с самым главным, это в создание оконного наивного приложения, но мы можем его запускать только таким вот образом, что если нам нужен electron js с exe файлом, сейчас с этим и разберёмся.
Чтобы создать уже полноценное приложение с exe файлом, нужно скачать библиотеку electron-builder через npm:
1 | npm i electron-builder |
После этого дополним настройка файла «package.json», чтобы было можно собрать приложение:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "build": { "appId": "app.id", "win": { "target": [ { "target": "nsis", "arch": [ "x64", "ia32" ] } ] } } |
Я не буду рассказывать что тут к чему, так как это отдельная тема, но если вам очень интересно, то зайдите на страницу документации по этим настройкам.
Также для простоты добавим команды в «package.json»:
1 2 3 4 5 | "scripts": { "start": "electron ." "pack": "electron-builder --dir", "dist": "electron-builder" } |
После чего можете использовать команду npm run pack или npm run dist, различие в том, что dist создаст ещё один файл для установки, вот и всё.
После запуска одной из этих команд у вас появиться папка «dist» и там вы найдёте своё собранное приложение.
В целом это всё что стоит знать для начала про сборку проекта.
Вывод:
В этой статье мы разобрали создание приложения на Electron JS, думаю вам было интересно, хоть и разобрал базовые принципы, если ваз заинтересовала эта библиотека, то посмотрите документацию.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,00
Загрузка...