feat:打开目录,读取文件及文件夹内容,在页面并返回成功响应

index.html

@@ -14,6 +14,7 @@
     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag
         me - File 2
     </div>
+    当前文件夹: <strong id="openDir"></strong>
     <script src="src/comment/renderer.js"></script>
 </body>
 </html>

main.js

@@ -4,6 +4,8 @@ const path = require('path')
 const fs = require('fs')
 const https = require('https')
 const {menuRebuild} = require('./src/comment/TopMenu.js')
+
+const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
 // electorn
 const createWindow = () => {
     // Create the browser window.
@@ -16,17 +18,29 @@ const createWindow = () => {
     })
     // 加载 index.html
     win.loadFile('index.html')
-    // win.loadURL('http://localhost/show/sync?current=1&pageSize=5')
     // 打开开发工具
     win.webContents.openDevTools()
     Menu.setApplicationMenu(Menu.buildFromTemplate(menuRebuild(win)))
 }
-const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
+
+const ipcMainOn = () => {
+    // ipcMain.handle('ping', () => 'pong')
+    ipcMain.on('open-dir-result', (_event, value) => {
+        console.log(value)
+    })
+    ipcMain.on('ondragstart', (event, filePath) => {
+        console.log(filePath)
+        event.sender.startDrag({
+            file: path.join(__dirname, filePath),
+            icon: iconName
+        })
+    })
+}
 
 // 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
 // 部分 API 在 ready 事件触发后才能使用。
 app.whenReady().then(() => {
-    // ipcMain.handle('ping', () => 'pong')
+    ipcMainOn()
     createWindow()
     // 在 macOS 系统内, 如果没有已开启的应用窗口
     // 点击托盘图标时通常会重新创建一个新窗口
@@ -41,9 +55,3 @@ app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit()
 })
 
-ipcMain.on('ondragstart', (event, filePath) => {
-    event.sender.startDrag({
-        file: path.join(__dirname, filePath),
-        icon: iconName
-    })
-})

preload.js

@@ -2,9 +2,9 @@
 // 所有的 Node.js API接口 都可以在 preload 进程中被调用.
 // 它拥有与Chrome扩展一样的沙盒。
 const { contextBridge, ipcRenderer } = require('electron/renderer')
-// 读取文件夹中文件，并传给渲染层
-// import { unlink } from 'node:fs/promises';
-contextBridge.exposeInMainWorld('electron', {
+contextBridge.exposeInMainWorld('electronAPI', {
     startDrag : (fileName) => ipcRenderer.send('ondragstart', fileName),
-    listDirFile :(fileName)=>ipcRenderer.send('ondragstart', fileName)
+    openDirectory : (callback) =>
+        ipcRenderer.on('openDirectory', (_event, value) => callback(value)),
+    openDirectoryResult:(value) => ipcRenderer.send('open-dir-result', value)
 })

src/comment/renderer.js

@@ -1,10 +1,17 @@
 // html中使用的js代码 之后用react替换
 document.getElementById('drag1').ondragstart = (event) => {
     event.preventDefault()
-    window.electron.startDrag('drag-and-drop-1.md')
+    window.electronAPI.startDrag('drag-and-drop-1.md')
 }
 
 document.getElementById('drag2').ondragstart = (event) => {
     event.preventDefault()
-    window.electron.startDrag('drag-and-drop-2.md')
-}
+    window.electronAPI.startDrag('drag-and-drop-2.md')
+}
+
+
+const openDir=document.getElementById('openDir');
+window.electronAPI.openDirectory ((value) => {
+    openDir.innerText = JSON.stringify(value)
+    window.electronAPI.openDirectoryResult('ok')
+})