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.dll
const 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++）确认准确的类名。