Впервые работаю с Electron.
Как сделать своё верхнее меню (свернуть, закрыть). Везде пишут про remote. Но у меня не работает, и когда импортирую из electron, такой метод не находит.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВпервые работаю с Electron.
Как сделать своё верхнее меню (свернуть, закрыть). Везде пишут про remote. Но у меня не работает, и когда импортирую из electron, такой метод не находит.
В разделе Breaking Changes написано:
Removed: remote module
The remote module was deprecated in Electron 12,
and will be removed in Electron 14.
It is replaced by the @electron/remote module.
// Deprecated in Electron 12:
const { BrowserWindow } = require('electron').remote
// Replace with:
const { BrowserWindow } = require('@electron/remote')
// In the main process:
require('@electron/remote/main').initialize()
Так что я установил модуль @electron/remote и у меня получилось всё же сделать закрытие окна по кастомной кнопке.
Вот:
const remote = require('@electron/remote');
const wind = remote.getCurrentWindow();
document.addEventListener('DOMContentLoaded', () => {
$('.btn-close').click(() => {
wind.close();
});
$('.btn-minimize').click(() => {
wind.minimize();
});
});
$(document).ready(function () {
var wX = 0;
var wY = 0;
var dragging = false;
$('.launcher').mousedown(function (e) {
dragging = true;
wX = e.pageX;
wY = e.pageY;
});
$(window).mousemove(function (e) {
e.stopPropagation();
e.preventDefault();
if (dragging) {
var xLoc = e.screenX - wX;
var yLoc = e.screenY - wY;
try {
window.moveTo(xLoc, yLoc);
} catch (err) {
console.log(err);
}
}
});
$(window).mouseup(function () {
dragging = false;
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/css/normalize.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="src/css/style.css" />
</head>
<body>
<div class="launcher">
<div class="left">sxa</div>
<div class="right">
<div class="header">
<ul class="menu">
<li class="menu_item">Игровые сервера</li>
<li class="menu_item">Сообщества</li>
</ul>
<div class="control-btns">
<div class="btn-minimize">Свернуть</div>
<div class="btn-close"><i class="fas fa-window-close"></i></div>
</div>
</div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
onload="window.$ = window.jQuery = module.exports;"
></script>
<script src="src/js/common.js"></script>
</body>
</html>
Код в main.js:
const { app, BrowserWindow } = require('electron');
require('@electron/remote/main').initialize();
const ipc = require('electron').ipcMain;
function createWindow() {
let win = new BrowserWindow({
width: 900,
height: 600,
resizable: false,
title: 'FUNNIX5 Launcher',
frame: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
nativeWindowOpen: true,
},
});
win.loadFile('index.html');
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});