electron-vue跨平台桌面应用开发实战教程(七)——ffi调用C++(macOS平台)

electron功能很强大,但是有一些跟操作系统底层交互的功能,electron无法实现,这个时候我们就可以调用原生来配合完成对应功能,本文主要讲解在macOS平台下,调用C++的dylib文件

在开始之前我们要安装

1.node-gyp
npm install node-gyp -g

使用ffi-napi调用dll(c++)

1. 安装ffi-napi

执行

npm install ffi-napi --save

2. 准备C++动态链接库libdemo.dylib文件

libdemo.dylib文件可以去gitee中获取,也可以自己编译

gcc -g -shared  demo.cpp -o libdemo.dylib

electron-vue-demos gitee 地址

3. 调用libdemo.dylib文件中的方法

这里dll是找的别的写好的,dylib是我自己写的

let cpplib
if (process.platform === 'darwin') {
  // 在使用libdemo的时候最好自己编译下cpp,命令gcc -g -shared  demo.cpp -o libdemo.dylib
  let libPath
  // 在这儿需要判断下是开发环境还是打包环境,在mac上这两个环境用的路径不一样
  if (process.env.NODE_ENV === 'development') {
    libPath = path.resolve('resources/dll/libdemo')
  } else {
    libPath = path.join(__dirname, '..') + '/dll/libdemo'
  }

  cpplib = ffi.Library(libPath, {
    Add: ['double', ['double', 'double']]
  })
} else if (process.platform === 'win32') {
  cpplib = ffi.Library(path.resolve('resources/dll/MyDLL'), {
    Add: ['float', ['float', 'float']],
    Hello: ['string', []],
    StrLength: ['int', ['string']]
  })
}

这里需要注意的点就是mac获取dylib的路径,开发环境和打包环境的路径是不一样的,在这儿需要特殊处理下

调用方法

// dll和dylib提供了不同的方法,所以在这儿不能通用,但是写了各自的调用方法
      if (process.platform === 'win32') {
        console.log('fii.Library Hello result:', cpplib.Hello())
        console.log('fii.Library Add result:', cpplib.Add(1, 2))
        console.log('fii.Library Add result:', cpplib.StrLength('hello world'))
      }
      if (process.platform === 'darwin') {
        console.log(cpplib.Add(12345, 54321))
      }

更多内容请关注公众号
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron是一个基于Chromium和Node.js的框架,可以帮助开发者使用Web技术(HTML,CSS,JavaScript)来构建跨平台桌面应用程序。VueCli是一个基于Vue.js的命令行工具,可以帮助开发者快速构建Vue.js项目。使用Electron7+VueCli4开发跨平台桌面应用的过程如下: 1. 安装Node.js和npm 在安装ElectronVueCli之前,需要先安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,npm是Node.js的包管理器。安装Node.js和npm可以让你在本地开发环境中运行和管理ElectronVueCli。 2. 安装Electron安装Electron之前,需要先创建一个空目录作为项目根目录,然后在命令行中切换到该目录下,执行以下命令: ``` npm init -y npm install electron --save-dev ``` 以上命令会创建一个package.json文件,并将Electron安装到本地项目中。 3. 创建Electron应用 在项目根目录下创建一个名为main.js的文件,这是Electron应用的主进程文件。在main.js中添加以下代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(() => { createWindow() }) ``` 以上代码创建了一个Electron窗口,并加载了一个名为index.html的文件。在项目根目录下创建一个名为index.html的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 以上代码创建了一个包含“Hello World!”文本的HTML页面。 4. 安装VueCli 在命令行中执行以下命令安装VueCli: ``` npm install -g @vue/cli ``` 以上命令会全局安装VueCli。 5. 创建Vue.js应用 在项目根目录下执行以下命令创建一个Vue.js应用: ``` vue create renderer ``` 以上命令会创建一个名为renderer的子目录,并在其中初始化一个Vue.js项目。 6. 集成Vue.js应用 在main.js中添加以下代码将Vue.js应用集成到Electron应用中: ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, preload: path.join(__dirname, 'preload.js') // 加载preload.js文件 } }) // 加载renderer/index.html文件 win.loadFile(path.join(__dirname, 'renderer', 'dist', 'index.html')) } app.whenReady().then(() => { createWindow() }) ``` 以上代码添加了一个preload.js文件,并将Vue.js应用的入口文件设置为renderer/dist/index.html。 7. 编译Vue.js应用 在renderer目录下执行以下命令编译Vue.js应用: ``` npm run build ``` 以上命令会生成一个名为dist的子目录,并在其中包含一个编译后的Vue.js应用。 8. 运行应用 在命令行中执行以下命令启动Electron应用: ``` npm start ``` 以上命令会启动Electron应用,并在Electron窗口中显示“Hello World!”文本和一个Vue.js应用。通过Electron7+VueCli4开发跨平台桌面应用,你可以使用Web技术来构建跨平台桌面应用程序,为用户提供更好的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值