# electron_select_directory **Repository Path**: enzoism/electron_select_directory ## Basic Information - **Project Name**: electron_select_directory - **Description**: 使用Electron选择电脑本地的文件夹 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-03 - **Last Updated**: 2025-12-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Electron03-桌面文件夹 > 练习使用Electron，在此记录学习过程 ![](https://i-blog.csdnimg.cn/direct/8fbff840b603411b84edaef371bcdbf1.jpeg) ---- # 1-参考网址 - electron中文官网：https://www.electronjs.org/zh/docs/latest - 禹神Electron视频教程地址：https://www.bilibili.com/video/BV1sE421N7M5 - 禹神Electron博文教程地址：:https://blog.csdn.net/qq_33650655/article/details/140364298 - 当前博客代码实现地址：https://gitee.com/enzoism/electron_select_directory ----- # 2-快速入门 ## 1-快速动手验证 > 上手可以参考禹神Electron博文教程地址：:https://blog.csdn.net/qq_33650655/article/details/140364298 ```shell # 1-init之后就一路回车即可 npm init # 2-按照package.json中的配置添加【index.js或者main.js】 # 3-可以在【index.js或者main.js】加一个打印 console.log("hello electron") # 4-添加start脚本 { "scripts": { "start": "electron ." } } # 5-直接运行项目 ump run start ``` ---- # 3-题目「 Hello Folder 」 ![](https://i-blog.csdnimg.cn/direct/194fd507059a4ce1a03d4086d9e6f411.png) - 需求：点击按钮，在用户选择的目录里新建一个 hello-electron 文件夹，并在其中生成 readme.txt，内容为用户输入的任意文字。 - 技能点：主进程调用 dialog.showOpenDialog 选择目录；渲染 → 主单向通信；fs.mkdirSync + fs.writeFileSync。 ---- 参考步骤： 1. 渲染页放一个 和
``` ## 3. 渲染进程逻辑 (render.js) ```javascript const { ipcRenderer } = require('electron'); let selectedDirectory = ''; // 选择目录按钮点击事件 document.getElementById('selectDirectory').addEventListener('click', async () => { try { const directory = await ipcRenderer.invoke('select-directory'); if (directory) { selectedDirectory = directory; document.getElementById('selectedDirectory').textContent = `已选择: ${directory}`; document.getElementById('selectedDirectory').style.display = 'block'; document.getElementById('createProject').disabled = false; } } catch (error) { showStatus('选择目录失败: ' + error.message, 'error'); } }); // 创建项目按钮点击事件 document.getElementById('createProject').addEventListener('click', async () => { const content = document.getElementById('content').value.trim(); if (!content) { showStatus('请输入readme内容', 'error'); return; } if (!selectedDirectory) { showStatus('请先选择目录', 'error'); return; } try { const result = await ipcRenderer.invoke('create-project', { directory: selectedDirectory, content: content }); if (result.success) { showStatus(`项目创建成功！路径: ${result.projectPath}`, 'success'); // 清空输入 document.getElementById('content').value = ''; } else { showStatus('创建失败: ' + result.error, 'error'); } } catch (error) { showStatus('创建失败: ' + error.message, 'error'); } }); // 显示状态信息 function showStatus(message, type) { const statusDiv = document.getElementById('status'); statusDiv.textContent = message; statusDiv.className = `status ${type}`; statusDiv.style.display = 'block'; // 3秒后自动隐藏 setTimeout(() => { statusDiv.style.display = 'none'; }, 3000); } // 内容输入框变化时启用/禁用创建按钮 document.getElementById('content').addEventListener('input', () => { const content = document.getElementById('content').value.trim(); const createButton = document.getElementById('createProject'); createButton.disabled = !selectedDirectory || !content; }); ``` ## 4. package.json ```json { "name": "electron-project-creator", "version": "1.0.0", "description": "Electron app to create hello-electron projects", "main": "main.js", "scripts": { "start": "electron .", "dev": "electron . --dev" }, "devDependencies": { "electron": "^27.0.0" } } ``` ## 5. 使用说明 1. **安装依赖**： ```bash npm install ``` 2. **运行应用**： ```bash npm start ``` 3. **使用步骤**： - 点击"选择目录"按钮选择要创建项目的目录 - 在文本框中输入readme文件的内容 - 点击"创建项目"按钮 - 系统会在选择的目录下创建 `hello-electron` 文件夹，并在其中生成 `readme.txt` 文件 ## 6. 技能点实现说明 ✅ **主进程调用 dialog.showOpenDialog**：在 `main.js` 中通过 `ipcMain.handle` 处理目录选择 ✅ **渲染 → 主单向通信**：使用 `ipcRenderer.invoke()` 和 `ipcMain.handle()` 实现双向通信 ✅ **fs.mkdirSync + fs.writeFileSync**：在 `main.js` 的 `create-project` 处理器中使用 ----