上一篇讲了使用electron进行打包的配置相关文件,这篇主要讲electron中很重要的通信方式. 首先解释一个概念: electron打包的应用包含两个部分 electron的环境(node),也就是主进程. web渲染环境,副进程. 这两个环境之间是相互隔离的,无法直接进行数据通信,所以有了这篇文章. 三个角色: ipcRender ipcMain webContents ipcRenderer用于渲染进程 ipcRenderer.on(channel, listener) --> cha…

背景 由于某个Electron应用,需要主进程.渲染进程.webview之间能够互相通讯. 不过因为Electron仅提供了主进程与渲染进程的通讯,没有渲染进程之间或渲染进程与webview之间通讯的办法,所以只能寻找其他方案来解决. 研究一:ipcMain/ipcRenderer Electron主进程与渲染进程的通讯,就是用ipcMain/ipcRenderer这两个对象. // 在主进程中. const { ipcMain } = require('electron') ipcMain.o…

因为信奉一句话:JavaScript 终将一统天下,所以要想方设法开疆扩土. 今天介绍的这个electron就是一大神器,可以很方便的将网页应用打包为Mac, Win, Linux下的可执行文件,只需进行简单的配置,虽比不上原生的速度和瘦小,但是性价比着实不错. 一 在package.json中指明对应版本,(electron和electron-builder需放在devDependencies中),使用yarn添加模块 { "name": "electron_example…

…

ipcMain https://electronjs.org/docs/api/ipc-main 当在主进程中使用时,它处理从渲染器进程(网页)发送出来的异步和同步信息, 当然也有可能从主进程向渲染进程发送消息 ipcRenderer https://electronjs.org/docs/api/ipc-renderer 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程. 也可以接收主进程回复的消息 使用自定义的 最小化,最大化,关闭按钮 渲染进程 html 片段…

[Electron]在 WSL2 中 打包 electron Linux 版本. 安装 WSL 我使用的是 Ubuntu 20.04.4 LTS 的版本. 安装 WSL 文档地址:https://docs.microsoft.com/zh-cn/windows/wsl/install. 如果你的系统是 Windows 11,内部版本是 22000 或更高,你也可以试试 还 GUI 的 WSL. https://docs.microsoft.com/zh-cn/windows/wsl/tutori…

Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在React中使用require('electron')时就会报TypeError: fs.existsSync is not a function的错误.因为React中无法使用Node.js的模块. 解决方法1 利用window.require引入 const electron = window.requ…

1.安装 Electron 首先要安装Node.js     (安装方法:https://www.cnblogs.com/inkwhite/p/9685520.html) 我这里已经安装好了. 2:安装Electron C:\Users\Administrator>npm install --g electron-prebuilt 安装完成 1.找到你的前端网页项目文件夹,新建 package.json.main.js.index.html 三个文件(注:其中的 index.html 是你的网页…

首先戳我下载安装对应版本的node.js. 安装完成后,打开命令行输入node -v以及npm -v查看对应版本.能够正常显示说明安装成功. 写一个最简单的hello world的nodejs应用.nodejs的基础目录结构如图: ♦ node_modules文件夹用于存放开发或应用时的依赖 ♦ index.html:初始化的页面 ♦ main.js:生命周期控制 ♦ package.json:全局配置 如果有小伙伴不知道怎么写,可以参考https://github.com/electron/e…

前次用 electron-packager 打包成功,这次改用 electron-builder 打包,然后根据项目中实际需要进行选择使用. 第一步:全局安装 electron-builder,便于系统通用 npm install -g electron-builder 或 cnpm install -g electron-builder 第二步:打包 electron 项目…