Электронные приложения очень похожи на веб-приложения.Как вы заметили, традиционный способ навигации между документами HTML не работает хорошо для приложений.Вот почему в настоящее время веб-приложения разрабатываются как одностраничные приложения (SPA).Это просто означает загрузку и замену частей страницы вручную с использованием JavaScript, когда пользователь перемещается.Есть несколько способов реализовать это, но вот пример того, как это можно сделать для вашего кода:
// Get all the navigation links to an array
const naviLinks = Array.from(document.getElementsByClassName("nav-group-item"));
const contentEl = document.getElementsByClassName("pane")[0];
naviLinks.forEach((linkEl) => {
// Listen click event for the navigation link
linkEl.addEventListener("click", e => {
// Prevent default behavior for the click-event
e.preventDefault();
// Get the path to page content file
const href = linkEl.getAttribute("href");
if (href) {
// Use node.js fs-module to read the file
const fs = require("fs");
fs.readFile(href, (err, data) => {
if (err) {
throw err;
}
// show the selected page
contentEl.innerHTML = "";
contentEl.insertAdjacentHTML("beforeend", data);
})
}
})
})
Обратите внимание, что HTML-файлы содержимого страницы (accounts.html и т. Д.) Должны иметь только содержимое для«Панель» div.Вам также нужно передать nodeIntegration:true при создании BrowserWindow -объекта в главном процессе, чтобы вы могли использовать require для загрузки fs -модуля:
new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
}
Если страницафайлы содержимого большие, навигация может показаться медленной, поскольку файлы читаются, а страницы отображаются при каждом нажатии.Одна из оптимизаций, которая поможет с этим, - это читать файлы и создавать элементы страницы вне экрана уже при загрузке страницы, а затем просто поменять их местами на click-событиях.В качестве альтернативы вы можете поместить содержимое страницы в <template> -элементы и поменять их местами.Я оставлю это для вас, чтобы попробовать сами, если вам интересно.
Существует множество платформ JavaScript, которые могут помочь вам в создании SPA.На данный момент популярными являются React, Angular и Vue. «Как я могу создать графический интерфейс с большим количеством компонентов?» - это один из вопросов, на который могут ответить интерфейсные JavaScript-фреймворки, но, конечно, есть кривая обучения.Когда вы почувствуете необходимость начать разбивать свой графический интерфейс на многократно используемые или иерархические компоненты, возможно, стоит подумать об этих средах JavaScript.