Election JS关闭一个窗口并打开新窗口

Question

我是电子js的新手。我有一个场景显示加载/启动屏幕，然后显示登录屏幕。

这是我的main.js

// necessary modules for electron application
// importing electron
const { create } = require("domain");
const electron = require("electron");
// initilizing app
const app = electron.app;
// adding window to view
const BrowserWindow = electron.BrowserWindow;
// path module to build file path
const path = require("path")
// to make sure we are using a proper url
const url = require("url")
let {ipcMain} = electron

let toQuit = true; // important to quit
let category = 'main_window' // default window

let win;

app.on("ready", ()=>{
"use strict";
createWindow();
});

app.on("closed", () => {
"use strict";
win = null;
})
app.on('window-all-closed',()=>{
"use strict";
if(process.platform !== 'darwin'){
app.quit();
}
})

app.on("activate", () => {
if (win === null) {
createWindow();
}
});


function createWindow() {
"use strict";
var height;
var width;
var address;
var frame; 
var removeMenu;
var title, backgroundColor; 
switch (category) {
case "main_window":
height = 200; //Initialize size of BrowserWindow
width = 500; //Initialize size of BrowserWindow
frame = false;
removeMenu = true;
backgroundColor = "#ccc";
address = "Views/SplashScreen/index.html"; //Initialize the address or the file location of your HTML
break;
case "login":
height = 600; //Initialize size of BrowserWindow
width = 400; //Initialize size of BrowserWindow
frame = true;
removeMenu = true;
title = "Login"
address = "Views/Login/index.html"; //Initialize the address or the file location of your HTML
break;
default:
break;
}
win = new BrowserWindow({
height: height, //height and width of BrowserWindow
width: width, //height and width of BrowserWindow
minHeight: height, //minimum height and width of BrowserWindow, you can remove this if you want
minWidth: width, //minimum height and width of BrowserWindow, you can remove this if you want
frame: frame,
backgroundColor: backgroundColor,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, address),
protocol: "file",
slashes: true,
})
);
// enabling web dev tools
win.webContents.openDevTools({
mode: "detach",
});
// remove default top menu
win.removeMenu(removeMenu);
win.on("ready-to-show", () => {
win.show();
win.focus();
});
win.on("closed", (e) => {
e.preventDefault(); //We have to prevent the closed event from doing it.
if (toQuit) {
console.log("I am called")
//if the value of toQuit is true, then we want to quit the entire application
win = null;
app.exit(); //quit or exit the entire application
} else {
console.log("hide called");

win.hide(); //just hide the BrowserWindow and don't quit the entire application
toQuit = true; //reset the value of toQuit to true
}
});
}

//call this function from your any Javascript
ipcMain.on('createBrowserWindow', function (e, cat) {
"use strict";
category = cat; //get the category of window on which we want to show
toQuit = false; //set the value to false, meaning we don't want to close the entire application but just hide the current BrowserWindow
createWindow(); //call this function over and over again
}); 

和splashscreen.js

const ipcRender = require('electron').ipcRenderer;
let count = 1;
let porgressBar = document.getElementById("progressbar");
let i = 70;
let interval = setInterval(()=>{
if(i >= 400){
clearInterval(interval);
ipcRender.send("createBrowserWindow", "login");
}
porgressBar.style.width = i + "px";
ran = Math.floor(Math.random() * (75 - 0 + 1)) + 0;
console.log(ran);
i = i+ran
},500);

到目前为止，我所取得的成就是，我可以打开新的窗口，但前一个窗口无法关闭。我尝试了几种堆栈溢出解决方案的方法，但都不起作用。

package.json

{
"name": "electron-sms",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^17.1.2"
},
"dependencies": {
"@electron/remote": "^2.0.8"
}
}

有什么变通办法吗。

感谢

Answer 1

我找到了解决问题的方法。

在Electron版本>=16

使用npmnpm i @electron/remote安装@electron-remote。因为在电子版本14和更高版本中已经去除了远程。

其次，使用该require("@electron/remote/main").initialize();添加初始化electron-remote

示例

const electron = require("electron");
// initilizing app
const app = electron.app;
// adding window to view
const BrowserWindow = electron.BrowserWindow;
// path module to build file path
const path = require("path")
// to make sure we are using a proper url
const url = require("url")
**require("@electron/remote/main").initialize();**
let {ipcMain} = electron

let toQuit = true; // important to quit
let category = 'main_window' // default window

在main.js 中启用web内容

require("@electron/remote/main").enable(win.webContents);

在您的渲染器中，js将其称为

require("@electron/remote").getCurrentWindow().close();

你完了！

快乐编码：(