广州市住房和建设局网站,网站续费文档,外贸营销邮件,wordpress 网站地图类如果可以实现记得点赞分享#xff0c;谢谢老铁#xff5e; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中#xff0c;因此它允许你仅需一个代码仓库#xff0c;就可以撰写支持 Windows、…如果可以实现记得点赞分享谢谢老铁 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 (divInput 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 buildPS:打开build目录下的index.html文件发现是一片空白F12一下发现是资源路径不对。解决方案是在package.json中添加homepage: “./”。添加之后再进行build打开index.html就能看到正常页面了。
5.运行以下命令来启动Electron应用程序
npm run electron:dev这将启动Electron应用程序并加载React应用程序的构建文件。
6.运行以下命令来打包Electron应用程序
npm run electron:build收工谢谢老铁们的点赞收藏~
