用JavaScript写个桌面级应用(三)

三. 主进程和渲染进程之间的通信
electron框架主进程（Main Process）与嵌入的网页（web page，也就是renderer process）之间的通信.
为什么需要通信呢?
因为electron的机制就是这样的,electron的API分为三种类别,一类是只能在主进程上用的, 一类是在渲染进程上用的, 最后的就是可以在两种进程上都可以用的.
接下来看具体实现:

1.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'

2.web page( 渲染进程index.html和testp.js index.html要引用testp.js哦 )里添加代码:

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

代码.png

3.html里添加代码:
在body标签里添加 onload = init()事件

在页面里添加个按钮,添加点击监听事件

 
 
 
 
 
 
 
Hello World
 点我
 
 

4.最后效果自己看!!!!!!!!

文章记得分享哦~
一天一更
如有需要,请点个关注... --> web魔集