7.electron之渲染线程发送事件，主进程监听事件

如果可以实现记得点赞分享，谢谢老铁～

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和
Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux
的跨平台应用。

1.项目效果, 我的目的是打开一个弹窗，点击按钮打开文件管理器，且只能选中文件夹而不是文件的路径

2.这里要分两个进程说，先说渲染进程，也就是我们的业务逻辑层
index.tsx

import { Button } from 'antd';
import { useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';export default () => {const [inputPath, setInputPath] = useState('')const openFileDialog = () => {// 发送事件到主进程try {window.ipcRenderer.send('buttonClicked');// 监听主进程回复的选择的文件路径window.ipcRenderer.on('selected-file', (event, filePaths) => {if (filePaths) {setInputPath(filePaths)}});} catch (error) {console.log('web网页版不支持获取目录，请在桌面端操作')}};return (<div><Input value={inputPath} style={{ width: '92%' }} readOnly /><Button icon={<EllipsisOutlined onClick={openFileDialog} />} /><div/>);
};

上述代码块中，通过

window.ipcRenderer.send('buttonClicked'); // 自定义事件名发送事件

PS：你肯定有个大大的疑问 window.ipcRenderer 这个哪里来的？这个是
主进程里面的预加载js模块，作用在window全局里了，不懂得请点击 上一篇文章
《6.electron之上下文隔离，预加载JS脚本》

3.现在来说一下 主进程是如何监听事件的
electron.js

const {dialog,ipcMain,
} = require("electron");// 监听来自渲染进程的事件,这里的 'buttonClicked' 就是渲染进程中的自定义名字。ipcMain.on('buttonClicked', (event, arg) => {// 在这里处理事件的逻辑dialog.showOpenDialog(mainWindow, {properties: ['openDirectory'], // openDirectory 代表文件夹title: '选择文件夹',buttonLabel: '选择',}).then(result => {if (!result.canceled && result.filePaths.length > 0) {const selectedFolder = result.filePaths[0];// PS： 发送选择的文件路径给渲染进程event.reply('selected-file', selectedFolder);}}).catch(err => {console.error(err);});});

4.运行以下命令来构建React项目：

npm run build

PS:打开build目录下的index.html文件，发现是一片空白😱，F12一下，发现是资源路径不对。解决方案是在package.json中添加"homepage": “./”。添加之后再进行build，打开index.html，就能看到正常页面了。

5.运行以下命令来启动Electron应用程序：

npm run electron:dev

这将启动Electron应用程序，并加载React应用程序的构建文件。

6.运行以下命令来打包Electron应用程序：

npm run electron:build

收工！谢谢老铁们的点赞收藏~