本文源自道招网的《# eletron应用、electron npm包和前端静态资源怎么通信》
最近有个需求需要改动electron项目壳的功能,所谓壳的功能指的是electron套壳应用中前端静态资源自身做不了,需要借助electron应用的能力来实现的功能。
electron应用可以会需要引用npm包,只不过这些包是针对electon应用的。
分析
所以我们现在有这样三类资源可能存在通信
electron壳、electron npm包、前端静态资源,这些“应用”之间通常怎么通信呢?
-
electron壳 <–> electron npm包
electron壳直接引用electron npm包即可,类似前端静态资源直接引用对应的npm包。 -
electron壳 <–> 前端静态资源
electron壳通过创建BrowserWindow来loadFile加载将前端静态资源,把需要暴露的功能直接挂载前端的window上面,它们就能实现通信了 -
electron npm包 — 前端静态资源
它们属于不同类型的“应用”,它们直接不能直接进行通信,需要借助electron壳,走前面的“electron壳 <–> 前端静态资源”路线
不同类型的应用(比如node应用和C++应用)直接需要通过IPC通信,它们之间通信一般只能通过发送消息传递数据(json或字符串),无法像平时注册回调函数,一般只有同类型的应用才能注册回调函数。
举例
下面以一个electron npm包(自带静态资源,整个包类似一个小electron应用)与前端静态资源通信为例
electron npm包通过创建BrowserWindow来loadFile加载自身的前端资源来实现交互部分,对外暴露接口初始化窗口UI。
index.js
class Plugin{
...
open(options) {
const win = new BrowserWindow({
...options
webPreferences: {
...
preload: ('./preload.js')
}
});
win.loadFile('xxx.html');
win.once('ready-to-show', () => {
win.webContents.send('init', { list: ['aaa', 'bbb']})
})
}
onClick(options) {
this.options.onClick && ipcMain.on('Plugin_onClick', this.options.onClick);
}
}
preload.js
// 转发electon的消息成前端资源能监听的实践
ipcRenderer.on( 'init', function (event, data) {
window.dispatchEvent(new CustomEvent('InitNotify', {detail: data}));
});
window.addEventListener('InitNotify', (event) => {
console.log('InitNotify', event); // handleInit
})
window.addEventListener('onClick', (event) => {
ipcRenderer.send( 'onClick', event.detail);
})
ui.js
export class UI {
construct() {
this.openBtn = new Button('btn');
this.openBtn.onDidClick(e => {
window.dispatchEvent(new CustomEvent('onClick', {detail: data}));
})
}
}
原文链接:https://juejin.cn/post/7343606012582805530 作者:锅巴匆匆