eletron应用、electron npm包和前端静态资源怎么通信

本文源自道招网《# 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

javascript 复制代码
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

javascript 复制代码
// 转发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

javascript 复制代码
export class UI {
	construct() {
	   this.openBtn = new Button('btn');
	   this.openBtn.onDidClick(e => {
	   		window.dispatchEvent(new CustomEvent('onClick', {detail: data}));
	   })
	}
}
相关推荐
晓13138 分钟前
前端篇——番外篇 Bootstrap框架
前端·javascript·css·html
黑心的奥利奥9 分钟前
前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务
前端·ci/cd·gitlab
墨菲安全14 分钟前
NPM组件 @ivy-shared-components/iconslibrary 等窃取主机敏感信息
前端·npm·node.js·npm组件投毒·主机敏感信息窃取·恶意npm包
Mintopia1 小时前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia1 小时前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn1 小时前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero1 小时前
基于vue3完成领域模型架构建设
前端
PanZonghui1 小时前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴1 小时前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss