Stories

Detail Return Return

electron 監聽鼠標雙擊事件 - Stories Detail

iohook依賴太麻煩了,不是重新編譯就是降級。我覺得我hold不住。
發現了這個:
在Electron主進程中使用uiohook-napi插件需要結合Electron的主進程生命週期和原生模塊特性。
主要也是通過手動編譯原生模塊:npx electron-rebuild -f -w uiohook-napi或者是在package.json中設置

  "scripts": {
    "start": "electron .",
    "serve": "vue-cli-service serve",
    "build": "vite build",
    "rebuild": "electron-rebuild -f -w uiohook-napi"
  },

然後執行npm run rebuild即可,正常顯示結果如下

 C:\Users\volvo\Desktop\electronExercise\electron-app> npm run rebuild

> phone-number-capture@1.0.0 rebuild
> electron-rebuild -f -w uiohook-napi

| Building module: robotjs, Completed: 0(node:8072) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
\ Building module: robotjs, Completed: 0在此解決方案中一次生成一個項目。若要啓用並行生成,請添加“-m”開關。
| Building module: robotjs, Completed: 0  robotjs.cc
/ Building module: robotjs, Completed: 0C:\Users\volvo\Desktop\electronExercise\electron-app\node_modules\robotjs\src\os.h(26,1): warning C4005: “STRICT”: 宏重定義 [C:\Users\volvo\Desktop\electronExercise\electr
on-app\node_modules\robotjs\build\robotjs.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.19041.0\shared\minwindef.h(23): message : 參見“STRICT”的前一個定義 [C:\Users\volvo\Desktop\electronExercise\electron-app\no
de_modules\robotjs\build\robotjs.vcxproj]
- Building module: robotjs, Completed: 0  deadbeef_rand.c
\ Building module: robotjs, Completed: 0  mouse.c
- Building module: robotjs, Completed: 0  keypress.c
- Building module: robotjs, Completed: 0  keycode.c
| Building module: robotjs, Completed: 0  screen.c
- Building module: robotjs, Completed: 0  screengrab.c
/ Building module: robotjs, Completed: 0  snprintf.c
\ Building module: robotjs, Completed: 0  MMBitmap.c
/ Building module: robotjs, Completed: 0  win_delay_load_hook.cc
- Building module: robotjs, Completed: 0  正在生成代碼
  Previous IPDB not found, fall back to full compilation.
- Building module: robotjs, Completed: 0  All 244 functions were compiled because no usable IPDB/IOBJ from previous compilation was found.
  已完成代碼的生成
| Building module: robotjs, Completed: 0  robotjs.vcxproj -> C:\Users\volvo\Desktop\electronExercise\electron-app\node_modules\robotjs\build\Release\\robotjs.node
√ Rebuild Complete
PS C:\Users\volvo\Desktop\electronExercise\electron-app> npm start

以下是完整的集成步驟和注意事項:

一、環境準備與安裝

  1. 安裝依賴
    在Electron項目中,需將uiohook-napi安裝為主進程依賴,並確保安裝electron-rebuild處理原生模塊編譯:

    npm install uiohook-napi --save
    npm install electron-rebuild --save-dev
  2. 配置Electron Rebuild
    由於Electron使用自定義的Node.js版本,需重新編譯原生模塊:

    // package.json
    "scripts": {
      "rebuild": "electron-rebuild -f -w uiohook-napi"
    }

    執行命令:

    npm run rebuild

二、主進程集成示例

以下是在Electron主進程中使用uiohook-napi的完整示例:

// main.js (Electron主進程文件)
const { app, BrowserWindow, ipcMain } = require('electron');
const { uIOhook, UiohookKey } = require('uiohook-napi');

// 確保原生模塊已正確加載
try {
  // 初始化鈎子實例
  const hook = uIOhook;
  
  // 事件監聽示例:監聽鼠標雙擊
  hook.on('click', (e) => {
    if (e.clicks === 2) {
      console.log('主進程檢測到鼠標雙擊');
      // 向渲染進程發送消息
      mainWindow.webContents.send('mouse-double-click', {
        x: e.x,
        y: e.y
      });
    }
  });
  
  // 事件監聽示例:監聽鍵盤按鍵
  hook.on('keydown', (e) => {
    if (e.keycode === UiohookKey.F1) {
      console.log('主進程檢測到F1按鍵');
    }
  });
  
  // 應用準備就緒後啓動鈎子
  let mainWindow;
  app.whenReady().then(() => {
    mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
      }
    });
    
    mainWindow.loadFile('index.html');
    
    // 啓動輸入鈎子
    try {
      hook.start();
      console.log('輸入鈎子已啓動');
    } catch (error) {
      console.error('啓動鈎子失敗:', error);
      // 處理權限問題(如macOS需要系統權限)
    }
  });
  
  // 應用關閉時停止鈎子並釋放資源
  app.on('will-quit', () => {
    hook.stop();
    console.log('輸入鈎子已停止');
  });
  
  // 監聽渲染進程消息(示例)
  ipcMain.on('request-hook-status', (event) => {
    event.returnValue = hook.isRunning();
  });

} catch (error) {
  console.error('uiohook-napi加載失敗:', error);
  // 可能需要重新執行electron-rebuild
}

三、關鍵步驟解析

  1. 模塊加載與初始化

    • 在主進程中直接引入uiohook-napi,利用其提供的uIOhook實例管理輸入鈎子。
    • 需在app.whenReady()之後啓動鈎子,確保Electron環境已準備完畢。
  2. 事件監聽與進程通信

    • 通過hook.on(event, listener)監聽輸入事件(如clickkeydown)。
    • 使用ipcMainwebContents.send實現主進程與渲染進程的消息傳遞,例如將鼠標雙擊事件的座標發送給界面。
  3. 資源釋放

    • app.on('will-quit')中調用hook.stop()停止鈎子,避免程序退出後鈎子仍在運行。

四、跨平台注意事項

  1. 權限問題

    • macOS:需在系統偏好設置中授予“輔助功能”權限,否則鈎子可能無法捕獲事件。
    • Windows/Linux:通常無需額外權限,但需確保原生模塊正確編譯。
  2. 原生模塊編譯

    • 若遇到找不到模塊編譯失敗錯誤,需確認electron-rebuild已正確執行,或嘗試手動指定Electron版本:

      electron-rebuild -f -w uiohook-napi --electron-version=25.0.0
  3. 鈎子衝突

    • 避免在多個進程中同時啓動鈎子,可能導致系統輸入監聽異常。

五、渲染進程通信示例

若需在界面中響應輸入事件,可在渲染進程中接收主進程消息:

// 渲染進程(index.html對應的JS文件)
const { ipcRenderer } = require('electron');

ipcRenderer.on('mouse-double-click', (event, data) => {
  console.log('渲染進程接收到雙擊事件,座標:', data.x, data.y);
  // 更新界面或執行其他操作
});

// 向主進程查詢鈎子狀態
const isHookRunning = ipcRenderer.sendSync('request-hook-status');
console.log('鈎子運行狀態:', isHookRunning);
user avatar seth9shi Avatar delia_5a38831addb7b Avatar zhuweitao Avatar feng_5ff988f3bbb1d Avatar shenyongweiwudemaozi Avatar muzijun_68c14af5563a2 Avatar
Favorites 6 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.