javascript - Electron 应用程序在启动时打开所有页面
问题描述
我正在设置一个多页电子应用程序,但是每当我启动我的应用程序时,它都会打开所有页面,并且每当我单击应该将用户带到下一页的按钮时,它都会向前跳过并打开其他页面出色地。
我认为问题在于设置每个窗口的父/子关系,但是在评论或删除这些属性时问题仍然存在。
const{app, BrowserWindow, ipcMain} = require('electron');
import{fstat} from 'fs';
import{resolve} from 'path';
const packagejson = require('../package.json')
app.commandLine.appendSwitch('touch-events', 'enabled');
if (require('electron-squirrel-startup')) {
app.quit();
}
let mainWindow;
let startWindow;
let setOriginsWindow;
const createWindow = () => {
startWindow = new BrowserWindow({
width: 800,
height: 600,
});
startWindow.loadURL(`file://${__dirname}/index.html`);
startWindow.webContents.openDevTools();
startWindow.on('closed', () => {
startWindow = null;
});
};
app.on('ready', createWindow);
ipcMain.on('set-origins', (event) => {
setOriginsWindow = new BrowserWindow({
})
setOriginsWindow.on('close', function() {setOriginsWindow = null});
setOriginsWindow.loadURL(`file://${__dirname}/set_origin_page.html`)
setOriginsWindow.once('ready-to-show', () => {
setOriginsWindow.show();
});
setOriginsWindow.openDevTools();
if(packagejson.ENV == "dev"){
setOriginsWindow.openDevTools();
}
})
// parent:startWindow,
// fullscreen: true,
// modal:true,
// show:false
ipcMain.on('start-procedure', (event) => {
mainWindow = new BrowserWindow({
})
mainWindow.on('close', function () {mainWindow = null});
mainWindow.loadURL(`file://${__dirname}/main_page.html`);
mainWindow.once('ready-to-show', () => {
mainWindow.show();
});
mainWindow.openDevTools();
if(packagejson.ENV == "dev"){
mainWindow.openDevTools();
}
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (startWindow === null) {
createWindow();
}
});
'''
要打开的第一个页面应该是带有按钮的闪屏,按下该按钮将打开页面 2。页面 2 有一个按钮,按下时将打开页面 3。
解决方案
Electron 不适合多页应用程序,并且在更改页面时会显示大约四分之一秒的空白屏幕。相反,您可能希望创建一个包含所有页面的文件,并使用 DOM 方法在它们之间切换
例如
var splash_screen = document.getElementById('splash-screen');
var second_screen = document.getElementById('second-screen');
var third_screen = document.getElementById('third-screen');
document.removeChild(second_screen)
document.removeChild(third_screen)
var splash_button_click = () => {
document.removeChild(splash_screen);
document.appendChild(second_screen);
}
推荐阅读
- java - 在 jpanel 上调用 repaint 会导致其子级转移
- javascript - 如何在 JavaScript 中识别 localStorage 键的一部分?
- c# - 使用自己的身份验证、授权时如何在 ASP.NET Core 健康检查调用中检查用户代理?
- c# - 延迟在基于 Kestrel 的 Web 服务器中发送 HttpResponse
- qt - 更新 PyQt5 中嵌入的 matplotlib 图导致重叠
- react-native - 如何在ios手机上同时显示多个警报
- node.js - internal/modules/cjs/loader.js:892 - Node.js npm 版本检查出错
- algorithm - 制作“老虎机”算法
- java - JavaFX 3D透视相机运动
- android - 后台任务中配置更改时再次重新加载 Json 数据