最近在使用electron实现一个效果，不过对electron不熟悉，所以需要一遍实现功能一边记录，方便后期遇到类似的问题能够快速解决。
node环境版本
v16.20.0
electron版本
"electron": "^21.4.4",
动态效果
Electron 12 及以上版本中，如果你在渲染进程中尝试访问 Electron 的主进程模块，例如 dialog，将不再直接支持。你需要使用预加载脚本将所需的功能从主进程暴露给渲染进程。但是，像 dialog.showOpenDialog 这样的方法需要有一个 BrowserWindow 作为第一个参数。你可以在主进程中定义一个自定义的 IPC 消息来处理这个逻辑，然后在渲染进程中通过 ipcRenderer 调用它。
这里是一些步骤来说明如何实现：
主进程（main.js）
- 引入
ipcMain和dialog。 - 在主进程中监听一个自定义的 IPC 事件（例如
open-dialog），并在那里调用dialog.showOpenDialog。
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
// 创建窗口的代码
ipcMain.on('open-dialog', (event) => {
dialog.showOpenDialog({
properties: ['openDirectory']
}).then(result => {
event.reply('open-dialog-reply', result);
});
});
预加载脚本（preload.js）
在预加载脚本中，仅暴露 ipcRenderer 的发送和接收功能。
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
send: (channel, data) => ipcRenderer.send(channel, data),
on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
});
渲染进程的 JavaScript 文件（renderer.js）
现在，你可以在渲染进程中使用这些 IPC 方法来触发主进程中定义的对话框逻辑。
function chooseSave() {
window.electron.send('open-dialog');
window.electron.on('open-dialog-reply', (result) => {
if (!result.canceled) {
document.getElementById('save').value = result.filePaths[0];
}
});
}
// 其他函数保持不变
请确保你已正确链接了预加载脚本，并且在主进程和渲染进程之间已正确设置了 IPC 通信。
相关项目
实例代码下载
项目运行环境v16.20.0
