Кросс-платформенные приложения с Electron JS

Для нас всегда было сложно разрабатывать настольные приложения. Такие языки, как Java, C ++, C #, Cocoa и т. Д., Имеют множество библиотек и имеют сложности для программирования настольных приложений. Один из самых простых способов разработки настольных приложений одновременно для Windows и Mac - это использовать Electron JS. Electron JS похож на React Native.

Electron JS - это фреймворк с открытым исходным кодом, разработанный и поддерживаемый Github. Мы можем просто разрабатывать настольные приложения с помощью HTML, CSS и JavaScript. Это легко и быстро в производстве. Итак, почему бы нам не использовать Electron JS для создания настольных приложений.

Начиная с Electron JS

1. npm init -y 

Настройте новый пакет npm со значениями по умолчанию и cd к вашему проекту.

2. npm install --save electron

Установить электрон как зависимости

Наконец, в index.js

const electron = require('electron');
const url = require('url');
const path = require('path');
const swal = require('sweetalert');
const{app, BrowserWindow, Menu} = electron;
const fs = require('fs');
const os = require('os');
const ipc = electron.ipcMain;
const shell = electron.shell;
var mysql = require('mysql');
let mainWindow;

app.on('ready', function(){
    mainWindow = new BrowserWindow({width: 1920,
    height: 1080,
    options:{
        fullscreen:true
    }});
    mainWindow.loadURL(url.format({
    pathname: path.join(__dirname,"index.html"),
    protocol: 'file',
    slashes:true
    }));
    mainWindow.on('closed',function(){
        app.quit();
    });
    //Build menu from template
    const mainmenu = Menu.buildFromTemplate(mainMenuTemplate);
    Menu.setApplicationMenu(mainmenu);
});

Затем мы можем просто запустить нашу программу:

npm start

Вы можете просмотреть документацию в:

Electron предоставил разработчикам удобную справочную документацию.

Упаковка нашего приложения для Windows и Mac

1. npm install electron-packager --save-dev

Выполните указанные выше команды в терминале в папке приложения. Теперь скопируйте код в файл package.json для своего приложения.

Для Mac

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Для Windows

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Для Linux

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds

Ярлыки

"scripts": 
{
"start" : "electron .",
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
}

Атласт, выполните следующую команду:

Для Mac

npm run package-mac

Для Windows

npm run package-win

Для Linux

npm run package-linux

Все сделано. Вы можете найти папку release-builds в корневой папке для распространения.

Вы также можете использовать интерфейсные фреймворки, такие как: React, Vue и Angular JavaScript и Node.js для внутреннего интерфейса. : D