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

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 当前是否可见。