Electron 12 学习(六)DLL 调用安装与配置

Electron 12 学习 专栏收录该内容
12 篇文章 1 订阅
  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/

  3. 安装使用C++的桌面开发
    在这里插入图片描述

  4. 打开软件,新建项目,搜索 dll,选择具有导出项的(DLL)动态链接库
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  5. 添加一个函数:

    int sum(int a, int b) {
        return a + b;
    }
    

    在这里插入图片描述

  6. 导出函数:

    extern "C" _declspec(dllexport) int sum(int a, int b);
    

    在这里插入图片描述

  7. 解决方案配置:
    在这里插入图片描述

  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. 文件目录:
    在这里插入图片描述

  14. 计算:
    在这里插入图片描述

  15. 注意:
    由于截图与代码编写先后顺序的问题,请以源码为准(源码包含根据32位、64位系统自动选择对应的DLL)。

  16. DLL 源码:
    GitHub
    Gitee
    CodeChina
    DLL解决方案:
    GitHub
    Gitee
    CodeChina

  17. 源码:
    GitHub
    Gitee
    CodeChina

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值