Electron学习笔记

主进程 - Main Preocess

• 可以使用和系统对接的Electron API -创建菜单，长传文件等
• 创建 渲染进程 - Renderer Process
• 全面支持 Node.js
• 只有一个，作为整个程序的入口点

渲染进程 - Renderer Prodess

• 可以有多个，每个对应一个窗口
• 每个都是一个单独的进程
• 全面支持Node.js 和 DOM API
• 可以使用一部分Electron 提供的API

进程之间的通讯方式

• 使用IPC在进程之间进行通讯

Domo

main.js

const {app ,BrowserWindow , ipcMain} = require('electron')

app.on('ready',() => {
	// 创建主窗口
	const mainWindow = new BrowserWindow({
		width: 800,
	    height: 600,
        webPreferences: {
        	// 可以使用node.js 的 API
        	nodeIntegration: true
        }
    })
    // 调用文件
    mainWindow.loadFile('index.html')
    // 第一个是事件对象（复杂结构），第二个接受的事件数据
    ipcMain.on('message',(e,arg)=>{
    	console.log(arg)
    	// e.sender -触发该事件的发送者 === mainWindow
    	e.sender.send('reply', 'hello from main') 
    })

	// 创建子窗口
	const secondWindow = new BrowserWindow({
		width: 800,
	    height: 600,
        webPreferences: {
        	// 可以使用node.js 的 API
        	nodeIntegration: true
        },
        parent:mainWindow  // 依赖父窗口，当父窗口关闭，子窗口也关闭
    })
    // 调用文件
    secondWindow.loadFile('second.html')
})

renderer.js

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  ipcRenderer.send('message', 'hello from renderer') // 事件名称，事件数据
  ipcRenderer.on('reply', (e, arg) => {
    document.getElementById('message').innerHTML = arg;
  })
})