一、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) // 输出 "mian1pingping" event.sender.send('asynchronous-reply', 'pong')//在main process里向web page发出message })
创建index.js并添加代码
const {ipcRenderer} = require('electron') function init(){ //监听web page里发出的message ipcRenderer.on('asynchronous-reply', (event, arg) => { alert("web2" + arg);// 输出 "web2pong" }) } function say_hello(){ //在web page里向main process发出message ipcRenderer.send('asynchronous-message', 'ping') }
三、具体代码,如下图:
1.项目结构
tasks.json
{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "type": "gulp", "task": "run", "group": { "kind": "build", "isDefault": true } } ] }
index.html
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="index.js"></script> </head> <body onload="init();"> <p>Hello World</p> <button onclick="say_hello();">Hello RunJS!</button> </body> </html>
index.js
const {ipcRenderer} = require('electron') function init(){ //监听web page里发出的message ipcRenderer.on('asynchronous-reply', (event, arg) => { alert("web2" + arg);// 输出 "web2pong" }) } function say_hello(){ //在web page里向main process发出message ipcRenderer.send('asynchronous-message', 'ping') }
main.js
const electron = require('electron');// 控制应用生命周期的模块 const {app} = electron;// 创建本地浏览器窗口的模块 const {BrowserWindow} = electron; // 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的// 时候该窗口将会自动关闭 let win; function createWindow() { // 创建一个新的浏览器窗口 win = new BrowserWindow({width: 1104, height: 620});//570+50 // 并且装载应用的index.html页面 win.loadURL(`file://${__dirname}/html/index.html`); // 打开开发工具页面 win.webContents.openDevTools(); // 当窗口关闭时调用的方法 win.on('closed', () => { // 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里 // 存放窗口对象,在窗口关闭的时候应当删除相应的元素。 win = null; }); } // 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。// 有些API只能在该事件发生后才能被使用。 app.on('ready', createWindow); // 当所有的窗口被关闭后退出应用 app.on('window-all-closed', () => { // 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他 // 窗口打开 if (win === null) { createWindow(); } }); // 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。// 也可以把这些代码放在另一个文件中然后在这里导入。 //通信模块,mian process与renderer process(web page) const {ipcMain} = require('electron')//监听web page里发出的message ipcMain.on('asynchronous-message', (event, arg) => { console.log("mian1" + arg) // 输出 "mian1pingping" event.sender.send('asynchronous-reply', 'pong')//在main process里向web page发出message })
gulpfile.js
// 获取依赖 var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron-prebuilt'); // 创建 gulp 任务 gulp.task('run', function () { childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'}); });
package.json
{ "name": "package.json", "version": "1.4.0", "description": "hello world", "main": "app/main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "NS", "license": "ISC", "devDependencies": { "electron-prebuilt": "^1.4.13", "gulp": "^3.9.1" } }
测试:
执行过程:
1.页面加载完成,执行init(),监听主进程里发出的message,
2.点击Hello RunJS!按钮,渲染进程向主进程发送message
3.主进程接受消息,在控制台输出“mainping”,并向渲染进程发送message
4.渲染进程响应主进程发送的message,弹框显示web2pong