当前位置：首页 > news >正文

Electronjs+Vue如何开发PC桌面客户端（Windows,Mac,Linux）

news 2025/7/8 2:43:22

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