在Electron應(yīng)用程序中，可以使用ipcRenderer和ipcMain模塊進(jìn)行進(jìn)程間通信。官方文檔中也給出了javascript的版本，下面是Typescipt的實(shí)現(xiàn)步驟，以及過(guò)程中遇到的問(wèn)題。
在主進(jìn)程中監(jiān)聽(tīng)消息
在主進(jìn)程中，使用ipcMain來(lái)設(shè)置IPC監(jiān)聽(tīng)器：
import { ipcMain } from 'electron';
ipcMain.on('setTitle', (event, title) => {
const webContents = event.sender;
const win = BrowserWindow.fromWebContents(webContents)
win?.setTitle(title);
});
ipcMain.handle('ping', (event, value) => {
return `${value} pong`;
});
通過(guò)preload.ts暴露ipcRenderer相關(guān)API
默認(rèn)情況下，前端不直接訪問(wèn)Electron模塊，不直接使用ipcRenderer，而是通過(guò)preload
import { contextBridge, ipcRenderer } from "electron";
//通過(guò)contextBridge 向渲染進(jìn)程暴露一個(gè)全局的window.electronAPI
contextBridge.exposeInMainWorld('electronAPI', {
modifyTitle: (newTitle: string) => { ipcRenderer.send('setTitle', newTitle) },
ping: async (data: string) => {
const result = await ipcRenderer.invoke('ping', data);
return result;
}
});
renderer.ts 渲染器使用 preload.ts里的接口
在渲染進(jìn)程中使用window.electronAPI中的函數(shù)
window.electronAPI?.modifyTitle(newTitle);
const result = await window.electronAPI?.ping("ping");
以上是 ipcMain - preload - renderer 三者的示例， 下面是Typescript實(shí)現(xiàn)的步驟：
最終的文件目錄結(jié)構(gòu)
|-- src
|-- main.ts
|-- preload.ts
|-- renderer.ts
|-- index.html
|-- package.json
|-- tsconfig.json
- Typescript項(xiàng)目初始化
# 安裝typescript
yarn global add typescript
# 查看是否有 tsc 命令
tsc -v
# init
tsc --init
# 得到一個(gè)tsconfig.json的模板，需要修改兩處
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
}
}
- main.ts 里 引入前端入口頁(yè)面，以及 預(yù)加載文件 preload.ts
const mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
mainWindow.loadFile(path.join(__dirname, "../index.html"));
- preload.ts 做為橋梁，暴露ipcRenderer 給前端
// 聲明 window.electronAPI, 不然前端會(huì)訪問(wèn)不到 electronAPI
declare global {
interface Window {
electronAPI: any;
}
}
contextBridge.exposeInMainWorld('electronAPI', {
});
- index.html 里 引入 renderer.ts, 注意路徑
<!-- 注意路徑 -->
<script src="./dist/renderer.js"></script>
- package.json里運(yùn)行script, 也是要注意路徑
scripts: {
"start": "tsc && electron ./dist/main.js"
}
完整源碼在 https://github.com/vuerust/electron-typescript-starter
如果覺(jué)得我的文章對(duì)您有用，請(qǐng)隨意打賞。您的支持將鼓勵(lì)我繼續(xù)創(chuàng)作！
