1.处理初始化窗口白屏问题和初始化参数配置
const { app, BrowserWindow } = require("electron");
// 当app启动之后执行窗口的操作
app.whenReady().then(() => {
// 打开一个新窗口
const mainWin = new BrowserWindow({
x: 200, // 初始化在屏幕的x轴,左上角为基准
y: 100, // 初始化在屏幕的y轴,左上角为基准
width: 1200, // 初始化宽度
height: 600, // 初始化高度
show: false, // 默认不展示该窗口
minHeight: 300, // 最小高度
minWidth: 600, // 最小宽度
// maxHeight:1000, // 最大高度
// maxWidth:1200, // 最大宽度
resizable: true, // 是否可以拖动
icon: "icon.png", // 自定义图标
frame: true, // 用于自定义菜单和menu,设置为false可以隐藏菜单和标题栏
transparent: false, // 是否透明
autoHideMenuBar: true, // 是否隐藏顶部菜单
webPreferences: { // 处理非node环境下不能使用require语法
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule:true // 子进程使用父进程模块
},
});
// 在当前窗口中补全界面操作
mainWin.loadFile("index.html");
// 监听页面加载完成后,在去显示,避免出现白屏情况
mainWin.on("ready-to-show", () => {
mainWin.show();
});
mainWin.on("close", () => {
// 当前窗口关闭了
});
});
app.on("window-all-closed", () => {
console.log("所有窗口都关闭了");
app.quit();
});
2.打开新窗口
1.下载依赖 npm install --save @electron/remote
2.在main.js中引入
require('@electron/remote/main').initialize() require("@electron/remote/main").enable(mainWin.webContents)
const { app, BrowserWindow } = require("electron");
// 当app启动之后执行窗口的操作
app.whenReady().then(() => {
// 打开一个新窗口
const mainWin = new BrowserWindow({ });
require('@electron/remote/main').initialize()
require("@electron/remote/main").enable(mainWin.webContents)
// 在当前窗口中补全界面操作
mainWin.loadFile("index.html");
3.在新页面去使用remote
const remote = require("@electron/remote")
window.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
const list = new remote.BrowserWindow({
width: 300,
height: 200,
});
list.loadFile("list");
});
});