electron使用ffi-napi環境搭建
附打包好的ffi-napi可以直接放到項目目錄下使用,避免以后麻煩
一、安裝node.js
Node.js官網:https://nodejs.org/zh-cn/download,選擇LTS長期穩定版本即可
需要注意Node.js 區分32和64位,32位版本只能加載32位的DLL,64位的版本只能加載64位的DLL
建議下載x64,nodejs的位數決定后續electron以及node-gyp的位數,我剛開始想編譯win32但是一直編譯不通過報錯
報錯:npm error ‘“call”’ 不是內部或外部命令,也不是可運行的程序列或批處理文件。
安裝教程參考:https://www.runoob.com/nodejs/nodejs-install-setup.html
本來我在這里勾選了自動安裝Visual Studio Build Tools和Python。但是后面發現下載需要3G,太大了,而且我本來電腦上裝了VS2017,我想用自帶的,所以后面又取消安裝了。不知道這里直接安裝的話,會不會就少了后續很多麻煩。。。。
cmd命令行查看安裝已成功
二、安裝Electron
方法一:使用node原始包管理工具npm安裝。-g 全局安裝
npm install -g electron
方法二:使用淘寶提供的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用cnpm安裝
cnpm install -g electron
安裝報錯:
CERT_HAS_EXPIRED 錯誤通常是指在使用 HTTPS 協議進行請求時,SSL 證書已過期,導致請求失敗
解決https改為http
注意:直接使用npm install electron他會下載npm包管理中的較新版本的electron(例如v34.2.0)
在electron20.3.8之后調用C++動態庫會出現
Error: Error in native callback
原因:Electron 21 及更高版本將啟用 V8 內存隔離區,這將對一些原生模塊產生影響。
解決方案:降低electron版本,目前論壇大部分使用20.3.8(20.3.8版本太舊,我使用npm到國外官方網站下載,一直下載不成功…最后使用cnpm安裝成功的)
cnpm install electron@20.3.8
三、安裝ffi-napi
安裝python
選擇最新版本python3.13.2 64位
下載地址:https://devguide.python.org/versions/
安裝時記得勾選寫入環境變量
安裝VS
VS2022 Community下載地址:https://visualstudio.microsoft.com/zh-hans/thank-you-downloading-visual-studio/?sku=Community
我安裝的是vs2022 community(官方網站上寫的,不知道專業版可不可行)
查看ffi-napi官網描述如下:
安裝 Visual C++ 構建環境:
對于 Visual Studio 2019
或更高版本,請使用Visual Studio CommunityDesktop development with C++中的工作負載。對于
Visual Studio 2019 之前的版本,請使用選項安裝Visual Studio 構建工具Visual C++ buildtools
論壇上看到的
我的系統時win10,并且我安裝VS2017時已經安裝了Windows 10 SDK, 所以我取消了默認的windows 11 SDK的安裝
安裝ffi-napi
此時安裝的軟件各個版本如下所示:
安裝ffi-napi時會用到node-gyp編譯工具,他對vs版本匹配非常嚴格
安裝成功!!!!!
四、引用ffi-napi模塊
- 主進程中:main.js
const { app, BrowserWindow, ipcMain} = require('electron');
const ffi = require('ffi-napi');
const ref = require('ref-napi');
const path = require('path');const dllPath = path.join(__dirname, './test_api-x64.dll');
//test為dll中導出的接口,第一個int為返回值類型,第二、三個是參數類型
const libm = ffi.Library(dllPath, {'test': ['int',[ 'int','int']]
});// 處理 IPC 消息
ipcMain.on('call-test', (event, args) => {const { a, b } = args;console.log('調用DLL函數 test,參數:', a, b);try {const result = libm.test(a, b);event.sender.send('test-result', { a, b, result });} catch (error) {console.error('DLL調用失敗:', error);event.sender.send('error', { message: 'DLL調用失敗', details: error.message });}
});
- 渲染進程render.js
const { ipcRenderer } = require('electron');const button_test = document.getElementById('button_test');
const textBox_result = document.getElementById('textBox');button_test.addEventListener('click', () => {const a = 5;const b = 6;ipcRenderer.send('call-test', { a, b });
});ipcRenderer.on('test-result', (event, data) => {textBox_result.value = `test(${data.a}, ${data.b}) = ${data.result}`;
});ipcRenderer.on('error', (event, data) => {alert(`錯誤: ${data.message}`);
});
五、其他問題
我在安裝過程中遇到了各種各樣的問題,這里記錄一下,看是否用得到
1. 安裝ffi-napi報錯。npm install ffi-napi
gyp ERR! find VS gyp ERR! find VS msvs_version not set from command
line or npm config gyp ERR! find VS running in VS Command Prompt,
installation path is: gyp ERR! find VS “C:\Program Files
(x86)\Microsoft Visual Studio\2017\Professional\VC\Tools\MSVC” gyp
ERR! find VS - will only use this version gyp ERR! find VS could not
use PowerShell to find Visual Studio 2017 or newer gyp ERR! find VS
looking for Visual Studio 2015 gyp ERR! find VS - not found gyp ERR!
find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS gyp ERR! find VS
************************************************************** gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the “Desktop development with C++”
workload. gyp ERR! find VS For more information consult the
documentation at: gyp ERR! find VS
https://github.com/nodejs/node-gyp#on-windows gyp ERR! find VS
************************************************************** gyp ERR! find VS gyp ERR! configure error gyp ERR! stack Error: Could not
find any Visual Studio installation to use gyp ERR! stack at
VisualStudioFinder.fail
(D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)
gyp ERR! stack at
D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16
gyp ERR! stack at VisualStudioFinder.findVisualStudio2013
(D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)
gyp ERR! stack at
D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14
gyp ERR! stack at
D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16
gyp ERR! stack at
D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
gyp ERR! stack at
D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
gyp ERR! stack at ChildProcess.exithandler
(child_process.js:390:5) gyp ERR! stack at ChildProcess.emit
(events.js:400:28) gyp ERR! stack at maybeClose
(internal/child_process.js:1088:16) gyp ERR! System Windows_NT
10.0.19045 gyp ERR! command “D:\soft\nodejs\node.exe” “D:\soft\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js”
“rebuild” gyp ERR! cwd D:\DemoCode\electronFFI\node_modules\ffi-napi
gyp ERR! node -v v14.21.3 gyp ERR! node-gyp -v v5.1.1 gyp ERR! not ok
npm WARN enoent ENOENT: no such file or directory, open
‘D:\DemoCode\electronFFI\package.json’ npm WARN electronFFI No
description npm WARN electronFFI No repository field. npm WARN
electronFFI No README data npm WARN electronFFI No license field.npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ffi-napi@4.0.3
install:node-gyp-build
npm ERR! Exit status 1 npm ERR! npm ERR!
Failed at the ffi-napi@4.0.3 install script. npm ERR! This is probably
not a problem with npm. There is likely additional logging output
above.npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\weidongcao\AppData\Roaming\npm-cache_logs\2025-02-11T07_45_19_949Z-debug.log
這里是說node-gyp找不到vs build tools,先確認你是否安裝了vs build tools,如果已經安裝了,網上搜索會讓你配置各種環境變量,都沒什么用,其實就是當前node-gyp版本和vs版本不匹配
2. 編譯x86報錯:’“call”’ 不是內部或外部命令,也不是可運行的程序或批處理文件。
這個感覺是32位下的一個bug,我目前沒有找到解決方案
3. 如果安裝失敗,管理員運行試一下
4. 實在不行就官網拉ffi-napi源碼,自己編譯
源碼地址:https://github.com/node-ffi-napi/node-ffi-napi
在ffi-napi目錄下直接編譯
node-gyp clean
node-gyp configure --msvs_version=2022
node-gyp build
提示安裝addon
npm install node-addon-api