Electron03-桌面文件夹

练习使用Electron，在此记录学习过程

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 」

需求：点击按钮，在用户选择的目录里新建一个 hello-electron 文件夹，并在其中生成 readme.txt，内容为用户输入的任意文字。
技能点：主进程调用 dialog.showOpenDialog 选择目录；渲染 → 主单向通信；fs.mkdirSync + fs.writeFileSync。

参考步骤：

渲染页放一个和
preload.js 暴露 createFolder(text, folderPath)
主进程 ipcMain.on('create-folder', async (e, text, folderPath)=>{...})

1. 主进程代码 (main.js)

javascript 复制代码

const {app, BrowserWindow, dialog, ipcMain} = require('electron');
const path = require('path');
const fs = require('fs');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    });
    // 窗口加载之后要加载的内容
    mainWindow.loadFile('./pages/index/index.html')
    mainWindow.openDevTools()  //自动打开调试窗口
}

// 处理选择目录的请求
ipcMain.handle('select-directory', async () => {
    const result = await dialog.showOpenDialog(mainWindow, {
        properties: ['openDirectory'],
        title: '选择要创建项目的目录'
    });

    if (!result.canceled) {
        return result.filePaths[0];
    }
    return null;
});

// 处理创建文件夹和文件的请求
ipcMain.handle('create-project', async (event, {directory, content}) => {
    try {
        const projectPath = path.join(directory, 'hello-electron');

        // 创建文件夹
        fs.mkdirSync(projectPath, {recursive: true});

        // 创建 readme.txt 文件
        const readmePath = path.join(projectPath, 'readme.txt');
        fs.writeFileSync(readmePath, content, 'utf8');

        return {success: true, projectPath};
    } catch (error) {
        return {success: false, error: error.message};
    }
});

app.on('ready', () => {
    createWindow()
    //兼容核心代码1
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

2. 渲染进程代码 (index.html)

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 在 HTML 头部添加或修改 CSP -->
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline' file:; script-src-elem 'self' file:;">
    <title>Electron 项目创建器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        label {
            font-weight: bold;
            color: #333;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            font-family: Arial, sans-serif;
        }

        button {
            padding: 10px 20px;
            background-color: #007acc;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #005a9e;
        }

        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        .status {
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Electron 项目创建器</h1>

    <div class="input-group">
        <label for="directory">选择目录：</label>
        <button id="selectDirectory">选择目录</button>
        <div id="selectedDirectory" class="info" style="display: none;"></div>
    </div>

    <div class="input-group">
        <label for="content">Readme 内容：</label>
        <textarea id="content" placeholder="请输入要写入 readme.txt 的内容..."></textarea>
    </div>

    <button id="createProject" disabled>创建项目</button>

    <div id="status"></div>
</div>

<script src="./render.js"></script>
</body>
</html>

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. 使用说明

安装依赖：

bash 复制代码

npm install

运行应用：

bash 复制代码

npm start

使用步骤 ：
- 点击"选择目录"按钮选择要创建项目的目录
- 在文本框中输入readme文件的内容
- 点击"创建项目"按钮
- 系统会在选择的目录下创建 hello-electron 文件夹，并在其中生成 readme.txt 文件

6. 技能点实现说明

✅ 主进程调用 dialog.showOpenDialog ：在 main.js 中通过 ipcMain.handle 处理目录选择

✅ 渲染 → 主单向通信 ：使用 ipcRenderer.invoke() 和 ipcMain.handle() 实现双向通信

✅ fs.mkdirSync + fs.writeFileSync ：在 main.js 的 create-project 处理器中使用