Electron中remote模块的替代方案

码客说

发布于 2023-09-14 08:16:30

3.9K0

文章被收录于专栏：码客码客

前言

在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模块替代

安装

npm install --save @electron/remote

主进程中引入和初始化

安装好remote之后，我们需要在主进程和渲染进程中进行相应的设置才能使用。首先是在主程序中引入和初始化remote。

const remote = require("@electron/remote/main")
remote.initialize()
//...
remote.enable(mainWindow.webContents)

渲染进程中引用

//以前的写法
const {BrowserWindow} = require("electron").remote
//现在的写法
const {BrowserWindow} = require("@electron/remote")

实例

main.js

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
})

渲染进程

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")
    }
}

进程间通讯

渲染进程=>主进程=>渲染进程

异步

在渲染器进程 (网页) 中

const { ipcRenderer } = require("electron");

ipcRenderer.send('downloadfile', 'http://www.psvmc.cn/favicon.ico')
ipcRenderer.on('downloadfile-result', (event, arg) => {
  console.log(arg)
})

在主进程中

const { ipcMain } = require("electron")

ipcMain.on("downloadfile", (event, arg) => {
  console.log(arg); // prints "ping"
  event.reply("downloadfile-result", "E://1.jpg");
});

同步

在渲染器进程 (网页) 中

const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

在主进程中

const { ipcMain } = require('electron')
ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

主进程=>渲染进程

在主进程中

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");
})

在渲染器进程 (网页) 中

const { ipcRenderer } = require('electron')

ipcRenderer.on('asynchronous-msg', (event, arg) => {
  console.log(arg) // prints "pong"
})

渲染进程=>渲染进程

利用主进程做消息中转

// 渲染进程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()

// 渲染进程
ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...]);
ipcRenderer.sendTo(winId, 'ping', 'someThing');

获取进程id的方法

第一种：通过 global 设置和获取

// 主进程中在global上自定义对象
global.winIds= {
  win1Id : win1.id,
  win2Id : win2.id
}

// 主进程获取
global.winIds["win1Id"];

第二种是：主进程创建事件，发送信息(不推荐)

// 主进程中
win1.webContents.send('distributeIds',{
    win2Id : win2.id
});
 
win2.webContents.send('distributeIds',{
    win1Id : win1.id
});

页面数据共享

以前使用remote来取主进程数据，现在要用rpc了。

渲染进程之间

在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。

其中比较好的方案是用 Storage API( localStorage，sessionStorage 或者 IndexedDB)。

所有进程间

但是如果要想在主进程和渲染进程之间共享数据，就不能用上面所说的方式了。

在渲染器进程 (网页) 中

const { ipcRenderer } = require('electron')

//设置值
ipcRenderer.sendSync('setGlobalValue', {
    key:'token',
    value:"123456"
})

//获取值
let tokenValue = ipcRenderer.sendSync('getGlobalValue', 'token')
console.log(tokenValue)

在主进程中

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]
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

渲染