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-04-16软路由代理问题, tg 无法代理问题-icode9专业技术文章分享
- 2024-04-16程序猿用什么锅-icode9专业技术文章分享
- 2024-04-16自建 NAS 的方案-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数-icode9专业技术文章分享
- 2024-04-14ansible 在远程主机上执行脚本,并传入参数, 加上remote_src: yes 配置-icode9专业技术文章分享
- 2024-04-14ansible 检测远程主机的8080端口,如果关闭,则echo 进程已关闭-icode9专业技术文章分享
- 2024-04-14result 成功怎么写-icode9专业技术文章分享
- 2024-04-14stopped 状态设置为变量,由外部传递进来-icode9专业技术文章分享
- 2024-04-14为什么ansible执行远程脚本需要放到后台-icode9专业技术文章分享
- 2024-04-14shell 正则判断字符串内是否含有th-icode9专业技术文章分享