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

如果可以实现记得点赞分享,谢谢老铁~

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和

Node.js 嵌入到了一个二进制文件中,因此它允许你仅需一个代码仓库,就可以撰写支持 Windows、macOS 和 Linux

的跨平台应用。

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

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

index.tsx

js 复制代码
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/>
  );
};

上述代码块中,通过

powershell 复制代码
window.ipcRenderer.send('buttonClicked'); // 自定义事件名发送事件

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

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

electron.js

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项目:

powershell 复制代码
npm run build

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

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

powershell 复制代码
npm run electron:dev

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

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

powershell 复制代码
npm run electron:build

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

相关推荐
今天也想MK代码2 天前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
yqcoder2 天前
electron 中 ipcRenderer 的常用方法有哪些?
前端·javascript·electron
yqcoder2 天前
electron 中 ipcRenderer 作用
前端·javascript·electron
伍嘉源3 天前
关于electron进程管理的一些认识
前端·javascript·electron
yqcoder3 天前
electron 设置最小窗口缩放
前端·javascript·electron
yqcoder5 天前
区分 electron 全屏和最大化
前端·javascript·electron
li.siyuan5 天前
electron + vue 打包完成后,运行提示 electrion-updater 不存在
前端·vue.js·electron
努力挣钱的小鑫5 天前
【客户端开发】electron 中无法使用 js-cookie 的问题
前端·javascript·electron
蓝胖子不是胖子5 天前
尝鲜electron --将已有vue/react项目转换为桌面应用
vue.js·react.js·electron
非晓为骁5 天前
windows 下 electron-builder ERR_ELECTRON_BUILDER_CANNOT_EXECUTE 报错处理
javascript·windows·electron