Как мне создать работающее электронное приложение с несколькими экземплярами главного окна? Вот очень простое приложение с главным окном, в котором всего две кнопки. Один для создания нового экземпляра mainWindow и один для закрытия текущего окна.
// main.js
const { app, ipcMain, BrowserWindow } = require('electron')
let mainWindow;
function main () {
mainWindow = new BrowserWindow({
width: 500,
height: 400,
tabbingIdentifier: 'todoTab',
show: false,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('renderer/index.html');
mainWindow.once('ready-to-show', () => {
mainWindow.setTitle("Todo-" + mainWindow.id)
mainWindow.show();
})
mainWindow.mergeAllWindows();
}
app.on('ready', main);
ipcMain.on('newListWindow', main);
ipcMain.on('closeWindow', function(event){
mainWindow.close();
});
- В приведенном выше файле я установил mainWindow в качестве глобальной переменной.
- Добавление свойства tabbingIdentifier и создание цепочки метода mergeAllWindows () автоматически создаст несколько вкладок на дисплее, еслиоткрыто более одного окна.
- Каждому экземпляру mainWindow назначается идентификатор Electron. Если открыт только один экземпляр, идентификатор равен 1. Для простоты я установил заголовок mainWindow как «Todo-» + mainWindow.id (т. Е. Todo-1 для первого окна, Todo-2, если я открою второе).
- При нажатии кнопки newListWindow вызывается функция «main», создающая новые экземпляры mainWindow.
- При нажатии кнопки closeWindow экземпляр mainWindow закрывается.
HTML-файл с двумя кнопками (сокращенно просто элемент body)
// renderer/index.html
<body>
<h1 class="text-center">Todo List</h1>
<button id="new-list-btn">New Todo List</button>
<button id="close-btn">Close List</button>
<script src="./index.js"></script>
</body>
ipcRenderer. Прислушивается к нажатию кнопки и отправляет сообщение на main.js.
// renderer/index.js
const { ipcRenderer } = require('electron')
document.getElementById('new-list-btn').addEventListener('click', () => {
ipcRenderer.send('newListWindow');
});
document.getElementById('close-btn').addEventListener('click', () => {
ipcRenderer.send('closeWindow');
});
Приведенный выше код создаст несколько окон Todo и отобразит их на разных вкладках. Отображается каждый заголовок списка (Todo-1, Todo-2 и т. Д.). Проблема в том, что последний открытый является единственным активным. Поэтому, если я открою три задачи, затем перейду к любому из них и нажму кнопку «Закрыть», будет закрываться только третье окно, независимо от того, в каком я был. объект был разрушен. Что имеет смысл. Итак, как мне это закодировать, чтобы я закрывал ту вкладку экземпляра, на которой я нахожусь. И когда я закрываю его, следующая вкладка, в которой я нахожусь, становится действительным объектом mainWindow?