Electron框架下使用Nan模块开发C++插件

最近接到PC桌面端视频开发的任务，之前一直使用C++外加angularJS的模式开发，
个人感觉架构略显笨重，尤其是在修改C++时，可是相当的繁琐，成本太高，客户受不了了，
最近发现了一个新玩意Electron即可以集成最近火热的Vue，又可以以插件的方式追加C++插件，
可以使业务功能极大的解耦。

网上关于Electron基本入门的文档比较多，一搜一大片，自己慢慢搞定好了，本文主要记录
在追加C++插件过程中遇到的大坑，供入门者参考。

，新建一个文件夹dongjin，建立以下三个文件
package.json

{
  "name": "dongjin",
  "version": "1.0.0",
  "description": "Electron的C++插件",
  "main": "main.js",
  "dependencies": {
    "electron": "^3.0.8"
  },
  "devDependencies": {
    "electron-packager": "^12.2.0"
  },
  "scripts": {
    "test": "npm test",
    "start": "electron ."
  },
  "author": "yaohj",
  "license": "ISC"
}

main.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')
let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

index.html

<!DOCTYPE html>
<html>
<script>
window.onload = function() {
    document.write('第一个在Electron中开发的C++插件');
}
</script>
</html>

在文件夹的根目录执行下面的命令

electron .
或者
npm start

基本的Electron程序跑起来了~~

，下面开始追加C++插件的代码
为了代码清晰，在dongjin/native目录下追加C++程序

demo.cc（偷个懒，这里引用了网络上一段代码）

#include <nan.h>

void Add(const Nan::FunctionCallbackInfo<v8::Value>& info) {

  if (info.Length() < 2) {
    Nan::ThrowTypeError("Wrong number of arguments");
    return;
  }

  if (!info[0]->IsNumber() || !info[1]->IsNumber()) {
    Nan::ThrowTypeError("Wrong arguments");
    return;
  }

  double arg0 = info[0]->NumberValue();
  double arg1 = info[1]->NumberValue();
  v8::Local<v8::Number> num = Nan::New(arg0 + arg1);

  info.GetReturnValue().Set(num);
}

void Init(v8::Local<v8::Object> exports) {
  exports->Set(Nan::New("add").ToLocalChecked(),
               Nan::New<v8::FunctionTemplate>(Add)->GetFunction());
}

NODE_MODULE(demo, Init)

修改一下dongjin/index.html

<!DOCTYPE html>
<html>
<script>
var demo = require('./build/Release/demo.node')
window.onload = function() {
    document.write('add(5, 8) => ' + demo.add(5, 8));
}
</script>
</html>

在dongjin目录下追加binding.gyp

{
  "targets": [
    {
      "target_name": "demo",
      "sources": [ "native/demo.cc" ],
      "include_dirs": [
        "<!(node -e \"require('nan')\")"
      ]
    }
  ]
}

编译运行环境配置
安装python2.7（官网下载下来，安装就好）
安装组件node-gyp，non（全加到全局模块中好了）

npm install -g node-gyp
npm install -g non

开始编译运行
编译

node-gyp configure
node-gyp build（网上很多资料这个地方没有写明白，这种编译出来的demo.node不能在electron中运行，在nodeJS中调用可以）
node-gyp build --target=3.0.8 --arch=x64 --dist-url=https://atom.io/download/electron（用这个编译后的demo.node可以再electron中运行） 
或者
node-gyp rebuild --target=3.0.8 --arch=x64 --dist-url=https://atom.io/download/electron（有时候build不好用，用rebuild就可以了，目前还没搞明白为什么，请求高手指点）

运行

electron .（大功告成，已经能够通过JS调用C++代码了）

另外，生成的build目录中有个文件binding.sln，直接用Visual Studio打开写C++代码就可以了。

扫描二维码关注公众号，回复： 4614278 查看本文章

总结：
过程中坑太多了，上面是经过几百次试验后，得到的最简洁的步骤

Electron框架下使用Nan模块开发C++插件

Electron框架下使用Nan模块开发C++插件

猜你喜欢