【Electron】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'

web page裏添加代碼

const {ipcRenderer} = require('electron')
//監聽mian process裏發出的message
ipcRenderer.on('asynchronous-reply', (event, arg) => {
    // alert("web2" + arg);// prints "pong"  在electron中web page裏的console方法不起作用，因此使用alert作爲測試方法
  })

 //在web page裏向main process發出message
  ipcRenderer.send('asynchronous-message', 'ping') // prints "pong"   
  // ipcRenderer.sendSync('synchronous-message', 'ping') // prints "pong"   
  // alert("web1" + 'ping');

二、具體項目中代碼，如下圖：
1、mian process 裏 mian.js

2、web page 裏
①、 html文件

②、js文件

3、最後成功界面