Electron V28主进程与渲染进程互相通信总结

本文示例采用Electron+Vue3+TS编写，请读者理顺思路，自行带入自己的项目。
注： 读本文前请先搞懂什么是主进程，什么是渲染进程。

在Electron中有着ipcMain和ipcRenderer、contextBridge模块，以及创建窗口对象上的webContents。很显然ipcMain和窗口对象上的webContents是在主进程中使用的，ipcRenderer和contextBridge（用于向渲染进程暴露API）是在预加载脚本中使用的。
请看下方示例，关键讲解写在代码注释中。

一、主进程发送消息到渲染进程

主进程中发送消息，是使用new 窗口时的对象上的webContents发送消息。例如：
main.js中

let appWindow;
const createWindow = () => {
    appWindow = new BrowserWindow({
        width: 850,
        height: 700,
        webPreferences: {
            preload: path.join(path.resolve(), 'preload/index.js')
        }
    })
	// 创建窗口后，向渲染进程发送平台信息，但是不能直接发送给渲染进程，需要通过预加载脚本进行中转
    appWindow.webContents.send('platform', process.platform)
}

于是在preload/index.js中：

const { contextBridge, ipcRenderer } = require('electron')
// ipcRenderer监听消息名为platform的事件，并在第二个参数回调函数中接收参数
// 回调函数又包含两个参数，一个是事件信息，一个是消息传递的参数
ipcRenderer.on('platform', (_, arg) => {
	// 拿到参数后，我们使用contextBridge向渲染进程中（也就是html或vue界面）暴露名为platform的API，当然名字可自定义其它。
	// 暴露出的API挂载在window对象上
  contextBridge.exposeInMainWorld('platform', arg)
})

于是在vue界面中，我们可以使用以下代码获取平台信息；
index.vue文件

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	const platform = ref<string>('')

	onMounted(() => {
	// 此时可以在window对象上直接读取platform数据值
	  platform.value = window.platform
	})
</script>

二、主进程发送消息，渲染进程进行监听

上面一个示例只有在窗口创建时向渲染进程发送了一个消息，且只发送一次。那假如我现在有个需求是需要监听窗口的变化：最大化、最小化、缩小等等信息。获取窗口最大小的API存在于创建的窗口对象上，那么此时就应该在主进程中监听窗口变化发送消息给渲染进程，并且渲染进程需要监听主进程发送的消息。
主进程 main.js

let appWindow;
const createWindow = () => {
    appWindow = new BrowserWindow({
        width: 850,
        height: 700,
        webPreferences: {
            preload: path.join(path.resolve(), 'preload/index.js')
        }
    })
    // appWindow对象上的on方法监听窗口事件
    appWindow.on('resize', () => {
    	// 当窗口发生变化时，使用webContents.send方法向预加载脚本发送消息，消息名为resizeWindow，并挈带参数为窗口是否最大化
        appWindow.webContents.send('resizeWindow', appWindow.isMaximized())
    })
}

那么在预加载脚本中preload/index.js就有了如下代码：

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

// 首先向渲染进程中暴露出一个名为resizeWindow的API（名字可自定义），并将此API以对象的形式向外暴露，对象中编写一个监听窗口更新的方法，名为onUpdateWindow
// 此更新方法接收一个回调函数，用于在渲染进程中获取参数
// 此用法成为 高阶函数
// 更新方法的方法体为 ipcRenderer监听主进程发送的resizeWindow事件
// 在接受窗口变化事件的第二个参数中接收变化参数并调用callback()函数，将变化值传递进此回调中
contextBridge.exposeInMainWorld('resizeWindow', {
  onUpdateWindow: (callback) => ipcRenderer.on('resizeWindow', (_, value) => callback(value)),
})

在渲染进程中：

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isMaxWin = ref<boolean>(false)

onMounted(() => {
	// 调用window对象上的resizeWindow中的onUpdateWindow,并传递一个函数进去，
	//此函数对应的就是上方的callback，当ipcRenderer监听到事件后调用callback()，
	// 此回调函数就能够接收到窗口是否最大化的值
    window.resizeWindow.onUpdateWindow((value: boolean) => {
        isMaxWin.value = value
    })
})
</script>

三、渲染进程发送消息到主进程

渲染进程向主进程发送消息也是预加载脚本中向渲染进程暴露出一个API，渲染进程中调用此API，触发预加载脚本中对应的函数，此函数可以通过ipcRenderer调用主进程中的方法。

首先预加载脚本中的代码：

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

// 向渲染进程的window对象中绑定languageAPI，此API以对象的形式存在一个setTitle方法
// 此方法接收一个title并在方法体中使用ipcRenderer.invoke调用主进程中名为language:setTitle的监听事件
// 注意：language:setTitle只是自定义的名称，为了更醒目而已，开发者可以自定义其他名称
contextBridge.exposeInMainWorld('language', {
  setTitle: (title) => ipcRenderer.invoke('language:setTitle', title),
})

主进程中的代码：

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

let appWindow;
const createWindow = () => {
    appWindow = new BrowserWindow({
        width: 850,
        height: 700,
        webPreferences: {
            preload: path.join(path.resolve(), 'preload/index.js')
        }
    })
}
// 预加载脚本中invoke对象的监听事件为ipcMain.handle
// 所以此时主进程会监听名为language:setTitle的事件，并在回调函数中的第二个参数接收参数。
ipcMain.handle('language:setTitle', (_, title) => {
	// 设置窗口名称
    appWindow.setTitle(title)
})

在渲染进程中调用预加载脚本中定义的方法：

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale, t } = useI18n()
const changeLanguage = (language: string) => {
  locale.value = language
  // 当在界面中触发此方法时 调用window.language.setTitle方法并传入参数
  window.language.setTitle(t('app.name'))
}
</script>

四、解决预加载脚本暴露在window对象上的数据在ts中报错问题

由于自定义的API名称挂载到了window对象上，window此前并无此API，所以在ts的代码编写中会出现Proerty does not exist on type 'Window & typeof globalThis'的错误，即使代码可以运行。
所以此时我们需要定义.d.ts文件声明Window的API类型。
在项目根目录或者适合你项目的地方创建任意名称的.d.ts文件，并编写文件内容：

declare module '*.vue';

type handleWindowAPI = {
  get: () => Promise<boolean>;
  set: (value: string) => Promise<void>;
}
type languageAPI = {
  setTitle: (title: string) => void;
}
type darkModeAPI = {
  toggle: () => Promise<boolean>;
}
type resizeWindowAPI = {
  onUpdateWindow: (callback: Function) => Promise<boolean>;
}
interface Window {
  platform: string;
  language: languageAPI;
  darkMode: darkModeAPI;
  handleWindow: handleWindowAPI;
  resizeWindow: resizeWindowAPI;
}

之后在tsconfig.json文件中的include属性中加载此ts文件：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  // 这里加载项目所有src下以ts结尾的文件
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

最后提醒！！！

在预加载脚本中向渲染进程中暴露API时，暴露同一个名称的API的代码只能执行一次，否则将会报错：Cannot bind an API on top of an existing property on the window object