remote移除_remote模块的使用(四)

微信公众号&＃xff1a;[猫十二的日常]&＃xff0c;欢迎留言和指出问题a

在electron中的一些模块&＃xff0c;它是区分进程的&＃xff0c;有些模块只能是主进程可以使用&＃xff0c;有些模块只有渲染进程可以使用&＃xff0c;现在要讲的模块是属于渲染进程(Renderer)的。

remote模块

remote 模块为渲染进程(web页面)和主进程通信(IPC)提供了一种简单方法。在Electron中, GUI 相关的模块 (如 dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的。使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息。

注意事项&＃xff1a;出于安全原因&＃xff0c;通过设置以下的配置可以禁用remote模块

• BrowserWindow - 通过设置 enableRemoteModule 选项为 false。

• webview - 通过把 enableremotemodule属性设置成 false。

通过调用remote方法创建一个浏览器窗口&＃xff0c;这一节我只贴出关键性代码&＃xff0c;有些不懂的可以看我的github上的实例&＃xff0c;也可以留言。

#renderer.js
const { BrowserWindow } &＃61; require("electron").remote;
const win &＃61; new BrowserWindow({ width: 800, height: 600 });
win.loadURL("https://github.com");


发现报错

Uncaught TypeError: Cannot destructure property &＃39;BrowserWindow&＃39; of &＃39;require(…).remote&＃39; as it is undefined. at renderer.js:9

这表示默认remote是不开启的&＃xff0c;我们需要手动设置 在main.js的 webPreferences 添加 enableRemoteModule: true

#main.js
win &＃61; new BrowserWindow({
width: 1920,
height: 1080,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true, //启用remote 这是关键点
webviewTag: true, //需要设置webview来启用这个
},
});


结果&＃xff0c;打开了新的窗口&＃xff0c;渲染进程也能调用主进程的一些方法了

远程对象

remote 模块返回的每个对象 (包括函数) 表示主进程中的一个对象 (我们称它为远程对象或远程函数)。当调用远程对象的方法时, 调用远程函数, 或者使用远程构造函数 (函数) 创建新对象时, 实际上是在发送同步进程消息。

上面的示例中 new BrowserWindow在渲染过程中没有创建BrowserWindow对象,真正还是在主进程中创建了一个BrowserWindow对象&＃xff0c;并且在渲染进程中返回了这个对象 即 win 对象

注意事项&＃xff1a;

• 当远程对象被第一次引用时&＃xff0c;只有可枚举的属性可以通过远程访问&＃xff0c;可枚举的意思暴露的属性。

const { remote } &＃61; require("electron");
console.log(Object.keys(remote).toString());
//renderer.js:10 getBuiltin,getCurrentWindow,getCurrentWebContents,getGlobal,createFunctionWithReturnValue,require


• 当通过remote模块访问时&＃xff0c;数组和缓冲区在IPC上复制。在渲染进程中修改它们不会在主进程中修改它们&＃xff0c;反之亦然。

远程对象生命周期

• Electron 确保只要渲染进程中的远程对象一直存在(换句话说&＃xff0c;没有被回收)&＃xff0c;主进程中的相应对象就不会被释放。当远程对象被垃圾回收后&＃xff0c;主进程中的相应对象将被解除引用。

• 如果远程对象在渲染进程中泄露(例如存储在映射中&＃xff0c;但从未释放)&＃xff0c;则主进程中的相应对象也将被泄漏&＃xff0c;所以您应该非常小心&＃xff0c;不要泄漏远程对象。但是&＃xff0c;字符串和数字等主要值的类型是通过复制发送的。主要针对的是引用对象 想返回的win对象

将回调传递给主进程

主进程中的代码可以接受来自渲染进程的回调 - 例如remote模块 - 但使用此功能时应该非常小心。其次为了避免出现死锁&＃xff0c;传递给主进程的回调都是异步的

mapNumbers.js

exports.withRendererCallback &＃61; (mapper) &＃61;> {
return [1, 2, 3].map(mapper)
}

exports.withLocalCallback &＃61; () &＃61;> {
return [1, 2, 3].map(x &＃61;> x &＃43; 1)
}


#renderer.js
const mapNumbers &＃61; require("electron").remote.require("./mapNumbers");
const withRendererCb &＃61; mapNumbers.withRendererCallback((x) &＃61;> x &＃43; 1);
const withLocalCb &＃61; mapNumbers.withLocalCallback();
console.log(withRendererCb, withLocalCb); // [undefined, undefined, undefined], [2, 3, 4]


还有一个问题&＃xff0c;由于回调是主进程引用的&＃xff0c;除非主进程销毁&＃xff0c;不然会一直存在&＃xff0c;就造成了泄露一个回调。我们必须手动回收这个回调

访问主进程的内置模块

主过程中的内置模块被添加为 remote 模块中的获取器&＃xff0c;因此可以像 electron 模块一样直接使用它们。

const { remote } &＃61; require("electron");
console.log(Object.getOwnPropertyNames(remote));
//["__esModule", "getBuiltin", "getCurrentWindow", "getCurrentWebContents", "getGlobal", "createFunctionWithReturnValue", "require", "process", "clipboard", "shell", "app", "autoUpdater", "BaseWindow", "BrowserView", "BrowserWindow", "contentTracing", "crashReporter", "dialog", "globalShortcut", "ipcMain", "inAppPurchase", "Menu", "MenuItem", "nativeImage", "nativeTheme", "net", "netLog", "MessageChannelMain", "Notification", "powerMonitor", "powerSaveBlocker", "protocol", "screen", "session", "systemPreferences", "TouchBar", "Tray", "View", "webContents", "WebContentsView", "desktopCapturer", "ImageView"]


remote模块的方法

remote.require(module)

• module String

返回 any - 主进程中require(module) 返回的对象。由其相对路径指定的模块将相对于主进程的入口点来解析。我们在上面探讨将回调传给主进程用到过的一个方法

require("electron").remote.require("./mapNumbers");


remote.getCurrentWindow()

返回 BrowserWindow - 此网页所属的窗口

注意事项&＃xff1a; 请勿在BrowserWindow上使用 removeAllListeners。使用这个可导致移除 blur 监听&＃xff0c;禁用点击触控按钮的事件&＃xff0c;或者其它意外的后果。

const { remote } &＃61; require("electron");
console.log(remote.getCurrentWindow()); //Object


remote.getCurrentWebContents()

返回 WebContents - 此网页的 web 内容

const { remote } &＃61; require("electron");
console.log(**remote.getCurrentWebContents()); //Object


remote.getGlobal(name)

• name 字符串

返回 any-主进程中 name (例如 global[name]) 的全局变量。

通过remote.process也可以拿到process的信息但是这个是被缓存的变量&＃xff0c;真正动态的还是需要通过remote.getGlobal(&＃39;process&＃39;)

#main.js
process.env.age &＃61; 131;
# renderer.js
console.log(remote.process.env.age); //131
console.log(remote.getGlobal("process").env.age);//131


利用remote实现通讯

由于remote对象可以让渲染进程访问和使用主进程的模块&＃xff0c;这样我们就可以利用好这个特性实现主进程和渲染进程进行通讯。

main.js

#ipc.js
exports.send &＃61; (...arg) &＃61;> {
return MainWatcher(arg);
};

function MainWatcher(arg) {
console.log("收到消息:", arg);
return "老弟真棒";
}
#main.js
const ipc &＃61; require("./ipc");
app.ipc &＃61; ipc;
#renderer.js
const { remote } &＃61; require("electron");
console.log(remote.app.ipc);
let message &＃61; remote.app.ipc.send("老哥在嘛");
console.log(message);
#结果
main.js: 收到消息: [ &＃39;老哥在嘛&＃39; ]
renderer.js: 老弟真棒


这是个简单的实现通讯的栗子&＃xff0c;其实它可以更灵活&＃xff0c;在业务中可以根据实际的需要实现不同的效果&＃xff0c;当然用ipc通讯也是最好的&＃xff0c;毕竟对remote这个模块&＃xff0c;实在是太强大&＃xff0c;在渲染进程里面操作GUI&＃xff0c;总归是有风险的。

如果觉得我的文章还可以&＃xff0c;点个赞或者关注一下下&＃xff0c;还有精彩的故事等着你哦&＃xff0c;还可以云撸猫