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>

posted @ 2022-09-19 00:02 小雄(416731103) 阅读(76) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Electron学习（三）之简单交互操作

· Electron学习（一）

· Electron学习（二）之主进程与渲染进程的通讯

· electron例子 | 主进程和渲染进程通信

· electron主进程与渲染进程通讯

阅读排行：
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）

公告

昵称：小雄(416731103)
园龄： 13年
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

小雄(416731103)

Electron学习（二）之主进程与渲染进程的通讯

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (21)

随笔档案 (16)

阅读排行榜

	//这是渲染进程
	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!")
	})
	})

	<!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>