electronjs官網 https://www.electronjs.org/zh/
Electron開發PC桌面客戶端的技術選型非常適合已經有web前端開發人員的團隊。能夠很絲滑的過渡。
Electron是什么？
Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架。 嵌入 Chromium 和 Node.js 到 二進制的 Electron ，允許您保持一個JavaScript 代碼庫并創建在Windows，macOS和Linux上運行的跨平臺應用——不需要本地開發經驗。
快速入門
入門教程可以去官網查看 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
如何調用系統本地函數庫
最開始調研了 node-ffi-napi. 然后發現沒有辦法用起來。—— 我的node版本比較高（v21.6.2），其他所有的依賴都是最新版。后來看了這里的討論(https://github.com/node-ffi-napi/node-ffi-napi/issues/273) ，有人推薦了node-ffi-rs 和 koffi。于是選擇了入門比較簡單的koffi。
實例
要實現的功能：使用 Electron 并希望創建一個頁面，里面有一個按鈕用于切換 Photoshop 窗口的顯示與隱藏（隱藏UI窗口，但是photoshop依然可以通過websocket在后臺處理任務），以下是實現步驟和完整代碼：
步驟：
- 在 Electron 中，我們可以使用 Node.js 和 koffi 來調用 Win32 API。
- 在 Electron 的主進程中處理 Photoshop 窗口的顯示與隱藏。
- 在渲染進程中使用 HTML 和 JavaScript 創建一個按鈕，并通過 IPC（進程間通信）與主進程交互，來切換 Photoshop 的顯示狀態。
完整代碼
1. 創建主進程 (main.js)
主進程負責與系統 API（通過 koffi）交互，判斷 Photoshop 是否隱藏，并切換其狀態。
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const koffi = require('koffi');
const os = require('os');let mainWindow;// 創建窗口并加載 HTML 頁面
function createWindow() {mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: false,contextIsolation: true}});mainWindow.loadFile('index.html');
}// 處理 Photoshop 窗口顯示/隱藏
ipcMain.handle('toggle-photoshop', () => {// 確保是在 Windows 系統下才執行if (os.platform() !== 'win32') {console.log('當前操作系統不是 Windows，無法執行操作。');return;}// 加載 user32.dllconst user32 = koffi.load('user32.dll');// 綁定必要的函數const FindWindowA = user32.func('void* FindWindowA(const char*, const char*)');const ShowWindow = user32.func('bool ShowWindow(void*, int)');const IsWindowVisible = user32.func('bool IsWindowVisible(void*)');const SW_HIDE = 0; // 隱藏窗口const SW_SHOW = 5; // 顯示窗口// 找到 Photoshop 窗口句柄const hWnd = FindWindowA('Photoshop', null); // 使用 Photoshop 的類名if (!hWnd) {console.log('未找到 Photoshop 窗口');user32.close();return;}// 檢查窗口是否可見const isVisible = IsWindowVisible(hWnd);if (isVisible) {console.log('Photoshop 窗口已顯示，隱藏中...');ShowWindow(hWnd, SW_HIDE);} else {console.log('Photoshop 窗口已隱藏，顯示中...');ShowWindow(hWnd, SW_SHOW);}// 釋放動態鏈接庫user32.close();
});app.whenReady().then(createWindow);app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});
2. 創建渲染進程 HTML 頁面 (index.html)
在渲染進程中，創建一個按鈕，用戶點擊時觸發與主進程的通信來切換 Photoshop 的顯示狀態。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Photoshop Toggle</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f4;}.button {padding: 10px 20px;font-size: 16px;cursor: pointer;background-color: #4CAF50;color: white;border: none;border-radius: 5px;}.button:hover {background-color: #45a049;}</style>
</head>
<body><button id="toggleButton" class="button">切換 Photoshop 顯示/隱藏</button><script>const { ipcRenderer } = require('electron');// 綁定按鈕點擊事件，調用主進程處理 Photoshop 的顯示/隱藏document.getElementById('toggleButton').addEventListener('click', async () => {await ipcRenderer.invoke('toggle-photoshop');});</script>
</body>
</html>
3. 創建 Preload 腳本 (preload.js)
在 preload.js 中啟用 IPC 通信，以便渲染進程和主進程之間進行交互。
const { contextBridge, ipcRenderer } = require('electron');// 暴露給渲染進程的方法
contextBridge.exposeInMainWorld('electron', {togglePhotoshop: () => ipcRenderer.invoke('toggle-photoshop')
});
代碼說明：
- 主進程（main.js）:
? createWindow 用于創建并加載應用程序的窗口。
? 使用 ipcMain.handle 來處理渲染進程發來的請求（這里是切換 Photoshop 窗口顯示與隱藏）。
? 通過 koffi 庫加載 user32.dll，使用 FindWindowA（windows官網文檔） 查找 Photoshop 窗口的句柄，使用 ShowWindow 切換窗口的顯示與隱藏狀態。 - 渲染進程（index.html）:
? 頁面中有一個按鈕，點擊按鈕后觸發 togglePhotoshop 方法，向主進程請求切換 Photoshop 窗口的顯示狀態。
? 使用 ipcRenderer 向主進程發送請求。 - Preload 腳本（preload.js）:
? 通過 contextBridge 暴露了 togglePhotoshop 方法給渲染進程，使渲染進程可以調用主進程的方法。 - koffi 調用:
? FindWindowA 查找 Photoshop 窗口。
? ShowWindow 切換 Photoshop 窗口的顯示/隱藏狀態。
? IsWindowVisible 用來判斷 Photoshop 當前是否可見。
代碼運行：
- 確保你已經安裝了 Electron 和 koffi 模塊：
npm install electron koffi
- 運行 Electron 應用：
npx electron .
- 打開應用，點擊按鈕切換 Photoshop 窗口的顯示和隱藏。
注意事項：
? 權限：確保你以管理員權限運行 Electron，這樣才能操作系統窗口。
? Photoshop 類名：默認情況下，Photoshop 的類名是 “Photoshop”，如果不行，可能需要通過工具（如 Spy++）確認準確的類名。
