一、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、最後成功界面
