electron 使用remote 报错:Cannot read properties of undefined (reading ‘BrowserWindow‘)
作者:互联网
最近在学习electron,写了一个remote的小demo,其中有这样一段代码:
const BrowserWindow = require("electron").remote.BrowserWindow;
会报错,如下图:
然后去网上找了一些文章看了看貌似是版本的问题,我用的electron是@v16.0.4, 而remote在electron12的时候废弃了remote模块,所以需要我们自己安装remote包。
1. 首先在项目根目录下安装@electron/remote包:
npm install @electron/remote --save
2. 在主进程中进行初始化:
require("@electron/remote/main").initialize();
require("@electron/remote/main").enable(mainWindow.webContents);
3. 并在主进程webPreferences中设置enableRemoteModule和contextIsolation:
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true, // 使用remote模块
},
4. 在渲染进程中设置
const BrowserWindow = require("@electron/remote").BrowserWindow;
就好了,这是我整体的代码:
主进程
var electron = require("electron");
var app = electron.app; // 引用app
var BrowserWindow = electron.BrowserWindow; // 窗口引用
var mainWindow = null; // 申明要打开的主窗口
// 当electron完成了初始化并且准备创建浏览器窗口的时候
// 此方法被调用
app.on("ready", () => {
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true, // 使用remote模块
},
});
require("@electron/remote/main").initialize(); // 初始化
require("@electron/remote/main").enable(mainWindow.webContents);
mainWindow.loadFile("demo2.html"); // 加载index.html 页面
mainWindow.openDevTools(); // 打开开发者工具
mainWindow.on("closed", () => {
mainWindow = null;
});
});
子进程
const btn = this.document.querySelector("#btn");
const BrowserWindow = require("@electron/remote").BrowserWindow;
window.onload = () => {
btn.onclick = () => {
newWin = new BrowserWindow({
width: 500,
height: 500,
});
newWin.loadFile("load.html");
newWin.on("closed", () => {
newWin = null;
});
};
};
结果展示
标签:remote,undefined,require,BrowserWindow,electron,报错,const,mainWindow 来源: https://blog.csdn.net/baixue0111/article/details/122088933