前言
在Electron12时候被废弃，使用必须配置enableRemoteModule
const win = new BrowserWindow({
width: 1200,
height: 600,
title: "码客脑图",
webPreferences: {
webviewTag: true,
webSecurity: false,
enableRemoteModule: true,
nodeIntegration: true,
contextIsolation: false,
},
});在Electron14之后内置remote模块已经被移除，用enableRemoteModule开启remote也不能用了。
有如下几种解决方法：
- 使用
@electron/remote模块替代 - 使用IPC传递数据
使用@electron/remote模块替代
安装
代码语言：javascript复制npm install --save @electron/remote主进程中引入和初始化
安装好remote之后，我们需要在主进程和渲染进程中进行相应的设置才能使用。 首先是在主程序中引入和初始化remote。
代码语言：javascript复制const remote = require("@electron/remote/main")
remote.initialize()
//...
remote.enable(mainWindow.webContents)渲染进程中引用
代码语言：javascript复制//以前的写法
const {BrowserWindow} = require("electron").remote
//现在的写法
const {BrowserWindow} = require("@electron/remote")实例
main.js
代码语言：javascript复制const { app,BrowserWindow,ipcMain,shell} = require("electron")
const remote = require("@electron/remote/main")
remote.initialize()
let mainWindow = null
app.on("ready",()=>{
mainWindow = new BrowserWindow({
width:300,
height:300,
webPreferences:{
nodeIntegration:true,//允许渲染进程使用nodejs
contextIsolation:false//允许渲染进程使用nodejs
}
})
mainWindow.loadFile("index.html")
mainWindow.on("closed",()=>{
mainWindow = null
})
remote.enable(mainWindow.webContents)//3
})渲染进程
代码语言：javascript复制const {BrowserWindow} = require("@electron/remote")
const btn1 = document.querySelector("#btn1")
const baidu_site = "https://www.baidu.com"
window.onload = ()=>{
btn1.onclick = ()=>{
win = new BrowserWindow({
width:500,
height:500,
})
win.loadFile("index.html")
}
}进程间通讯
渲染进程=>主进程=>渲染进程
异步
在渲染器进程 (网页) 中
代码语言：javascript复制const { ipcRenderer } = require("electron");
ipcRenderer.send('downloadfile', 'http://www.psvmc.cn/favicon.ico')
ipcRenderer.on('downloadfile-result', (event, arg) => {
console.log(arg)
})在主进程中
代码语言：javascript复制const { ipcMain } = require("electron")
ipcMain.on("downloadfile", (event, arg) => {
console.log(arg); // prints "ping"
event.reply("downloadfile-result", "E://1.jpg");
});同步
在渲染器进程 (网页) 中
代码语言：javascript复制const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"在主进程中
代码语言：javascript复制const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
event.returnValue = 'pong'
})主进程=>渲染进程
在主进程中
代码语言：javascript复制const { ipcMain } = require('electron')
let rtmpWindow = new BrowserWindow({
width: 400,
height: 600,
frame: false,
hasShadow: false,
show: false,
title: "",
webPreferences: {
nodeIntegration: true
}
});
rtmpWindow.loadFile("views/rtmp.html");
rtmpWindow.webContents.openDevTools()
rtmpWindow.webContents.on('did-finish-load', () => {
//下面的这行代码要在上面的BrowserWindow加载完成之后调用
rtmpWindow.webContents.send('asynchronous-msg',"test");
})在渲染器进程 (网页) 中
代码语言：javascript复制const { ipcRenderer } = require('electron')
ipcRenderer.on('asynchronous-msg', (event, arg) => {
console.log(arg) // prints "pong"
})渲染进程=>渲染进程
利用主进程做消息中转
代码语言：javascript复制// 渲染进程1
ipcRenderer.send('ping-event', 'ping');
// 在主进程中
ipcMain.on(
'ping-event',
(event, arg) => {
yourWindow.webContents.send('pong-event', 'something');
}
);
// 渲染进程2
ipcRenderer.on(
'pong-event',
(event, arg) => {
// do something
}
);使用 ipcRenderer.sendTo()
代码语言：javascript复制// 渲染进程
ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...]);
ipcRenderer.sendTo(winId, 'ping', 'someThing');获取进程id的方法
第一种： 通过 global 设置和获取
代码语言：javascript复制// 主进程中在global上自定义对象
global.winIds= {
win1Id : win1.id,
win2Id : win2.id
}
// 主进程获取
global.winIds["win1Id"];第二种是： 主进程创建事件，发送信息(不推荐)
代码语言：javascript复制// 主进程中
win1.webContents.send('distributeIds',{
win2Id : win2.id
});
win2.webContents.send('distributeIds',{
win1Id : win1.id
});页面数据共享
以前使用remote来取主进程数据，现在要用rpc了。
渲染进程之间
在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。
其中比较好的方案是用 Storage API( localStorage，sessionStorage 或者 IndexedDB)。
所有进程间
但是如果要想在主进程和渲染进程之间共享数据，就不能用上面所说的方式了。
在渲染器进程 (网页) 中
代码语言：javascript复制const { ipcRenderer } = require('electron')
//设置值
ipcRenderer.sendSync('setGlobalValue', {
key:'token',
value:"123456"
})
//获取值
let tokenValue = ipcRenderer.sendSync('getGlobalValue', 'token')
console.log(tokenValue)在主进程中
代码语言：javascript复制const { ipcMain } = require('electron')
// 主进程中在global上自定义对象
global.saveDefault= {
token: 'default value',
name: 'default value',
password: 'default value',
}
ipcMain.on('setGlobalValue', (event, arg) => {
global.saveDefault[arg.key] = arg.value;
event.returnValue = "success"
})
ipcMain.on('getGlobalValue', (event, arg) => {
event.returnValue = global.saveDefault[arg]
})
