Electron开发入门(三):main process和web page 通信

一、main process 和 web page 通信 
electron框架主进程(Main Process)与嵌入的网页(web page,也就是renderer process)之间的通信

Main.js里添加代码

//通信模块,mian process与renderer process(web page)
const {ipcMain} = require('electron')
//监听web page里发出的message
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log("mian1" + arg)  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong')//在main process里向web page发出message
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log("mian2" + arg)  // prints "ping"
  event.returnValue = 'pong'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

web page html/js/textp.js里添加代码

const {ipcRenderer} = require('electron')
function init(){
    //监听mian process里发出的message
    ipcRenderer.on('asynchronous-reply', (event, arg) => {
         alert("web2" + arg);// prints "pong"  在electron中web page里的console方法不起作用,因此使用alert作为测试方法
    })
}


function say_hello(){
    //在web page里向main process发出message
    ipcRenderer.send('asynchronous-message', 'ping') // prints "pong"   
     ipcRenderer.sendSync('synchronous-message', 'ping') // prints "pong"   
     alert("web1" + 'ping');
}
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

index.html改为

<!doctype html>
<html>
<head>
    <meta charset="utf-8" /> 
    <title>我的世界</title>
    <script src="js/textp.js"></script>
</head>
<body onload="init()">
    <p>Hello World</p>
    <button onclick="say_hello()">hello Runjs!</button>
</body>
</html>

二、具体项目中代码,如下图: 
1、mian process 里 mian.js 
这里写图片描述

2、web page 里 
①、 html文件 
这里写图片描述

②、js文件 
这里写图片描述

3、最后成功界面 
这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章