使用Electron开发的客户端产品很多,比如耳熟能详的VSCode、WhatsApp、Microsoft Teams......此外,AnyShare的新客户端也是采用Electron技术所开发。如果要开发跨平台的客户端,Electron一定是首选。
很长一段时间内你使用Electron开发客户端时使用的版本很可能是以前的老版本,在你将低版本的Electron升级至高版本时你一定会发现主进程中设置nodeIntegration为true后,渲染进程中依旧无法使用remote模块,如何解决?
较低版本的electron(v10以前的版本)
在主进程中设置nodeIntegration: true后,只需要从electron中引入remote即可
const remote = require('electron');
较高版本的electron(以19.0.8为例)
1、先安装模块@electron/remote
npm install --save @electron/remote
2、主进程中设置nodeIntegration:true,contextIsolation: false(如果是V10,则只要设置nodeIntegration为true即可),同时在创建窗口实例之后引入模块
require('@electron/remote/main').initialize()
require("@electron/remote/main").enable(win.webContents)
main.js
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
show: false,
// frame: true,
// autoHideMenuBar: true,
title: "Samve",
// icon: "",
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
//enableRemoteModule: true
}
})
require('@electron/remote/main').initialize()
require("@electron/remote/main").enable(win.webContents)
win.loadFile('index.html')
win.on("ready-to-show", function(){
win.show();
})
}
app.on("ready", function(){
createWindow();
})
3.在渲染进程中导入remote模块
const remote = require("@electron/remote")
完成后即可在渲染进程中使用remote模块,例如:
const remote = require("@electron/remote");
const { ipcRenderer } = require("electron");
console.log("remote");
console.log(remote);
ipcRenderer.on("mainSendToRender", function (event, arg) {
console.log("This message comes from main process.");
console.log("event:", event);
console.log("arg:", arg);
});