Electron学习(二)之主进程与渲染进程的通讯
2022/6/30 5:19:29
本文主要是介绍Electron学习(二)之主进程与渲染进程的通讯,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
模拟主进程与渲染进程的通讯过程
渲染进程
根目录下添加renderer.js
,既支持node js
也支持dom js
,示例代码如下:
//这是渲染进程 const {ipcRenderer}=require("electron") //下面是从渲染进程向主进程发送消息 window.addEventListener('DOMContentLoaded',()=>{ ipcRenderer.send("message","I am from the rendering process!") ipcRenderer.on("reply",(event, args)=>{ document.getElementById('message').innerHTML=args }) })
主进程
示例代码如下:
const {app,BrowserWindow,ipcMain}=require("electron") //ready:当electron完全加载,准备好创建BrowserWindow的时候 app.on('ready',()=>{ const win=new BrowserWindow({ width:800, height:600, webPreferences:{ //意思是在man.js中可以使用nodejs的api nodeIntegration:true, //加上这段代码后支持node Api contextIsolation: false } }) win.loadFile("index.html"); ipcMain.on("message",(event, args)=>{ console.log(args) // event.sender.send("reply","I am the main process,Over!") // event.sender和win是一样的 win.send("reply","I am the main process,Over!") }) })
index页面
示例代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> <link href="./styles.css" rel="stylesheet"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <p id="message"></p> <!--渲染进程添加--> <script src="./renderer.js"></script> </body> </html>
运行效果
这篇关于Electron学习(二)之主进程与渲染进程的通讯的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升