首页 > 系统相关 >Electron学习(二)之主进程与渲染进程的通讯

Electron学习(二)之主进程与渲染进程的通讯

时间:2022-09-19 00:11:48浏览次数:76  
标签:渲染 win 代码 args Electron 进程 event

模拟主进程与渲染进程的通讯过程

渲染进程
根目录下添加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>

标签:渲染,win,代码,args,Electron,进程,event
From: https://www.cnblogs.com/as3Gui/p/16706328.html

相关文章

  • electron打包成exe
    目录electron打包成exe的步骤如下1.安装node.js2.全局安装electron-packager打包工具3.创建目录4.打开当前目录命令行打包方式一:命令行直接打包打包方式二:在package.json文......
  • 进程与线程的关系和区别
    进程与线程的关系和区别:(1)定义进程是具有一定独立功能的程序,关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。线程是进程的一个......
  • 低代码平台前端的设计与实现(一)渲染模块的基本实现
    这两年低代码平台的话题愈来愈火,一眼望去全是关于低代码开发的概念,鲜有关于低代码平台的设计实现。本文将以实际的代码入手,逐步介绍如何打造一款低开的平台。低开概念我们......
  • elementui-dialog重新渲染
    父组件key值不同即可重新渲染组件,每次打开dialog修改diaid值刷新数据 <el-dialogv-model="isDia":title="diaTiTle"......
  • java进程占用swap分区问题,导致swap分区快速增满不够用!!
     foriin$(cd/proc;ls|grep"^[0-9]"|awk'$0>100');doawk'/Swap:/{a=a+$2}END{print'"$i"',a/1024"M"}'/proc/$i/smaps2>/dev/null;done|sort-k2nr|......
  • Unity基础笔记(5)—— Unity渲染基础与动画系统
    Unity渲染基础与动画系统Unity渲染基础一、摄像机1.摄像机概念和现实中的摄像机很接近,Unity中Camera组件负责将游戏画面拍摄然后投放到画面上Camera拍摄到的画......
  • 进程、进程组、session
    进程属于一个进程组,进程组属于一个会话,会话可能有也可能没有控制终端session(会话)是用户登录系统以后所需的context(上下文)processgroup(进程组)是一组相关联的进......
  • 关闭占用指定端口的进程
    netstat-aon|findstr"8080"tasklist|findstr"6640"taskkill/imjava.exe-f一、查看端口8080的进程号C:\Users\Administrator>netstat-aon|findstr"8080"TCP......
  • 小程序 : mustache语法 和 条件渲染 和 列表渲染
    <!--pages/04_learn_wxml/index.wxml--><h1>Mustache语法</h1><view>{{message}}</view><view>{{firstname+""+lastname}}</view><view>{{date}}</view>......
  • 3dsmax+vray5进行分布式渲染
    环境我的两台电脑软件是一样的:win11+3dsmax2020+vray5update2.2。台式机1硬件是12900+RTX3080Ti,台式机2硬件是12900KF+RTXA4000。两台电脑都是在同一个......