nodejs项目有一部分是js开发，这部分js在main.js中加载，即在主进程中加载 

现在页面在Electron渲染进程中，
要想在页面中访问main.js主进程中的方法，可以进行以下设置 
  

main.js:引入 ipcMain

 
const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')

const createWindow = () => {
    const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        preload: path.join(__dirname, 'preload.js')
    }
    })
    win.loadFile('index.html')
}
app.whenReady().then(() => {
    ipcMain.handle('ping', () => 'pong')
    createWindow()
})
  

渲染进程中在preload.js通过ipcRenderer调用main.js主进程的方法

 
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    ping: () => ipcRenderer.invoke('ping')
    // 除函数之外，我们也可以暴露变量
})
  

renderer.js中调用

 
const func = async () => {
    const response = await window.versions.ping()
    console.log(response) // 打印 'pong'
}

func()
  

window-all-closed事件

 
// quitting the app when no windows are open on non-macOS platforms
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

app事件

 
The main process also controls your application's lifecycle through Electron's app module. 
This module provides a large set of events and methods that you can use to 
add custom application behavior (for instance, programmatically quitting your application, 
modifying the application dock, or showing an About panel).

其他事件参考
https://www.electronjs.org/zh/docs/latest/api/app

 

https://www.electronjs.org/zh/docs/latest/tutorial/ipc

main.js:主进程通过ipcMain.on定义一个事件

 
ipcMain.on('set-title', (event, title) => {
  const webContents = event.sender
  console.log("webContents")
  console.log(webContents)
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
})

// 加载 index.html
mainWindow.loadFile('index.html')
   
主进程的日志会打印在IDE控制台

渲染器预加载脚本preload.js设置electronAPI.setTitle与主进程中的set-title绑定

 
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})
    

渲染器页面调用渲染器的方法

 
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
  const title = titleInput.value
  window.electronAPI.setTitle(title)
})
    

main.js

 
const { app, BrowserWindow, ipcMain, dialog } = require('electron/main')
const path = require('node:path')

async function handleFileOpen () {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (!canceled) {
    return filePaths[0]
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

    

 
使用 ipcMain.handle 监听事件
在主进程中，我们将创建一个 handleFileOpen() 函数，
它调用 dialog.showOpenDialog 并返回用户选择的文件路径值。

每当渲染器进程通过 dialog:openFile 通道发送 ipcRender.invoke 消息时，此函数被用作一个回调。 
然后，返回值将作为一个 Promise 返回到最初的 invoke 调用。
    

preload.js

 
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})
    

renderer.js

 
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')

btn.addEventListener('click', async () => {
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})
    

 
出于保留历史的目地，会有一些其他的方法。我们建议尽可能使用 ipcRenderer.invoke 。
    

main.js中添加菜单

 
const menu = Menu.buildFromTemplate([
  {
    label: app.name,
    submenu: [
      {
        click: () => mainWindow.webContents.send('update-counter', 1),
        label: 'Increment'
      },
      {
        click: () => mainWindow.webContents.send('update-counter', -1),
        label: 'Decrement'
      }
    ]
  }
])
Menu.setApplicationMenu(menu)

 
click 处理函数通过 update-counter 通道向渲染器进程发送消息（1 或 -1）。
click: () => mainWindow.webContents.send('update-counter', -1)

preload.js

 
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value))
})

renderer.js

 
const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue.toString()
})

回调

 
从 ipcRenderer.on 回调中将回复发送回主进程。

preload.js

 
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
  counterValue: (value) => ipcRenderer.send('counter-value', value)
})

renderer.js

 
const counter = document.getElementById('counter')

window.electronAPI.onUpdateCounter((value) => {
  const oldValue = Number(counter.innerText)
  const newValue = oldValue + value
  counter.innerText = newValue.toString()
  window.electronAPI.counterValue(newValue)
})

main.js

 
// ...
ipcMain.on('counter-value', (_event, value) => {
  console.log(value) // will print value to Node console
})
// ...
  

 
https://www.electronjs.org/zh/docs/latest/tutorial/message-ports

  

 
Electron 应用程序的结构非常相似。 
作为应用开发者，你将控制两种类型的进程：主进程 和 渲染器进程。 
这类似于上文所述的 Chrome 的浏览器和渲染器进程。

主进程

每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。 
主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。


窗口管理

The main process' primary purpose is to create and
 manage application windows with the BrowserWindow module

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。 
You can interact with this web content from 
the main process using the window's webContents object.

    

 
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('https://www.bing.com')

const contents = win.webContents
console.log(contents)
    

 
Note: A renderer process is also created for web embeds such as the BrowserView module. 
嵌入式网页内容也可访问 webContents 对象。

由于 BrowserWindow 模块是一个 EventEmitter， 
所以您也可以为各种用户事件 ( 例如，最小化 或 最大化您的窗口 ) 添加处理程序。

当一个 BrowserWindow 实例被销毁时，与其相应的渲染器进程也会被终止。