Electron 12 学习（六）DLL 调用安装与配置

你的名字 2022-10-14 05:25 220阅读 0赞

1.  注意：
    
     *  `32位DLL仅能在32位Node、32位Electron上运行。`
     *  `64位DLL仅能在64位Node、64位Electron上运行。`
     *  `若要切换Node版本，需要删除组件重新下载，删除.electron-gyp文件夹`
2.  下载 Visual Studio 2019 Community：  
    [https://visualstudio.microsoft.com/zh-hans/vs/][https_visualstudio.microsoft.com_zh-hans_vs]
3.  安装`使用C++的桌面开发`：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]
4.  打开软件，新建项目，搜索 dll，选择`具有导出项的(DLL)动态链接库`：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]
5.  添加一个函数：
    
        int sum(int a, int b) { 
            return a + b;
        }
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]
6.  导出函数：
    
        extern "C" _declspec(dllexport) int sum(int a, int b);
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]
7.  解决方案配置：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]
8.  生成解决方案：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8]
9.  安装`python`及构建环境（ `以管理员身份运行`）：
    
        npm i -g node-gyp rebuild
        npm i -g --production windows-build-tools
10. 项目安装`ffi-napi`：
    
        npm i ffi-napi
11. 新增`vue.config.js`文件：
    
        module.exports = {
          pluginOptions: {
            electronBuilder: {
              nodeIntegration: true,
              externals: ['ffi-napi'],
              builderOptions: {
                extraResources: [
                  {
                    from: "./dll/arithmeticoperations.dll",
                    to: "../dll/arithmeticoperations.dll"
                  }
                ]
              }
            }
          }
        }
12. 修改`App.vue`：
    
        <template>
          <img alt="Vue logo" src="./assets/logo.png">
        
          <br>
          <input id="numA" type="text"/>
          <input id="numB" type="text"/>
          <button @click="sum">求和</button>
          <input id="numC" type="text" disabled/>
          <br>
        
          <HelloWorld msg="Welcome to Your Vue.js App"/>
        </template>
        
        <script> import HelloWorld from './components/HelloWorld.vue' const ffi = require('ffi-napi') const path = require('path') const fs = require("fs") // 获取 DLL 路径 // eslint-disable-next-line no-undef let dll_path = path.join(__static, 'dll/arithmeticoperations.dll') // 修正开发环境的路径 dll_path = dll_path.replace('\\public\\', '\\') // 修正生产环境的路径 dll_path = dll_path.replace('\\resources\\app.asar\\', '\\') export default { name: 'App', components: { HelloWorld }, methods: { sum() { fs.access(dll_path, function (err) { if (err) { alert('DLL 文件不存在：'+ dll_path) } else { console.log('DLL 文件已存在：', dll_path) } }) const dll = new ffi.Library(dll_path, { 'sum': [ 'int', ['int', 'int'] ] }) const result = dll.sum( parseInt(document.getElementById("numA").value), parseInt(document.getElementById("numB").value) ) document.getElementById('numC').value = result.toString() } } } </script>
        
        <style> @import "../src/style/app.scss"; </style>
13. 文件目录：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9]
14. 计算：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10]
15. 注意：  
    由于截图与代码编写先后顺序的问题，请以源码为准（源码包含根据32位、64位系统自动选择对应的DLL）。
16. DLL 源码：  
    [GitHub][]  
    [Gitee][]  
    [CodeChina][]  
    DLL解决方案：  
    [GitHub][GitHub 1]  
    [Gitee][Gitee 1]  
    [CodeChina][CodeChina 1]
17. 源码：  
    [GitHub][GitHub 2]  
    [Gitee][Gitee 2]  
    [CodeChina][CodeChina 2]

[https_visualstudio.microsoft.com_zh-hans_vs]: https://visualstudio.microsoft.com/zh-hans/vs/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70]: /images/20221014/377284b069a34a89abd81878fd145540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 1]: /images/20221014/01ce8ed6c6544dcc81053799ef4f23fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 2]: /images/20221014/ac84ebe3f9a84fedbf2636a0002093c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 3]: /images/20221014/582557ba13824c1c998a5c9453afb771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 4]: /images/20221014/55f0a5955df5442f8902a936b2c42aa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 5]: /images/20221014/c480c9ecec22405ba41730a1024b3a32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 6]: /images/20221014/092f679d498f4b74b571c6dc5f3aea10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 7]: /images/20221014/bb3b4fbeac6e4e6999230e27c6771db4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 8]: /images/20221014/388d842d94ce4544b39eb32b233a6dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 9]: /images/20221014/ff930b6c56704d30b6ed7a640ec1af7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNTk2NTI3_size_16_color_FFFFFF_t_70 10]: /images/20221014/e7c2667890c34bb192cd14dff3396624.png
[GitHub]: https://github.com/xuxiaowei-com-cn/arithmetic-operations
[Gitee]: https://gitee.com/xuxiaowei-com-cn/arithmetic-operations
[CodeChina]: https://codechina.csdn.net/xuxiaowei-com-cn/arithmetic-operations
[GitHub 1]: https://github.com/xuxiaowei-com-cn/arithmetic-operations/releases
[Gitee 1]: https://gitee.com/xuxiaowei-com-cn/arithmetic-operations/releases
[CodeChina 1]: https://codechina.csdn.net/xuxiaowei-com-cn/arithmetic-operations/-/releases
[GitHub 2]: https://github.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E5%85%AD%EF%BC%89DLL_%E8%B0%83%E7%94%A8%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE
[Gitee 2]: https://gitee.com/xuxiaowei-com-cn/Electron-12-Study/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E5%85%AD%EF%BC%89DLL_%E8%B0%83%E7%94%A8%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE/
[CodeChina 2]: https://codechina.csdn.net/xuxiaowei-com-cn/Electron-12-Study/-/tree/Electron_12_%E5%AD%A6%E4%B9%A0%EF%BC%88%E5%85%AD%EF%BC%89DLL_%E8%B0%83%E7%94%A8%E5%AE%89%E8%A3%85%E4%B8%8E%E9%85%8D%E7%BD%AE