前言

Electron是基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建出三个 Mac、Windows 和 Linux平台的应用程序。

背景

现在越来越多的公司内部OA软件是用Electron环境开发，而我们公司是提供原生SDK集成以增加投屏相关功能，Electron环境下要集成原生SDK功能，如何使用Node.js去调用，以及如何打包到Electron项目中？本文主要讲解如何封装Mac原生SDK给Electron环境集成调用，Electron如何调用封装好的SDK。

Mac的Electron开发环境配置

1.安装node.js 12.0.0版本，下载网址https://nodejs.org/download/release/v12.0.0/。也可以运行 `ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 并 sudo brew install node来安装node.js

2.安装电子版5.0.2，使用命令运行 npm install --save-dev electron@5.0.2 -g

3.运行npm install node-gyp -g安装node-gyp

4.运行npm install bindings -g安装bindings

封装Electron的SDK

Mac SDK是Framework库形式，对外暴露接口是OC。所以我们需要node-addon-api模块做桥接，通过js-->node c++--> C++-->OC实现代码调用。我们可以用Addons的开发规则来实现一个.node文件，就可以直接JS调用.node来实现功能。

生成.node的需依靠node-gyp工具,node-gyp通过binding.gyp文件配置编译.node，因此，先了解 node-gyp很有必要,编译出可用的.node文件。

binding.gyp文件配置如下

{
'variables':{
    'module_name': "castsdk",
    'module_mac': "./../sdk/mac",
  },
  "targets": [
    {
      'target_name':"<(module_name)",
     'conditions':[
       [
          'OS=="mac"',
          {
            "sources": [
            "./lib/node_add_on/cast_node_addon.cc",
            "./lib/node_add_on/cast_node_bridge.mm",
            ],
            'mac_framework_dirs':[
             './../sdk/mac/CastSDK',
            ],
            'link_settings':{
            'libraries':[
              # "-Wl,-rpath,@loader_path/../../../opencv-build/opencv/build/lib"
              "HPOfficeCastWork.framework",
            ],
            },
            "xcode_settings":{
                    "DEBUG_INFORMATION_FORMAT": "dwarf-with-dsym",
                    "BUILD_DIR":"<(module_mac)",
                    "OTHER_CPLUSPLUSFLAGS" : [ '-ObjC++', "-std=c++11", "-stdlib=libc++",  '-fvisibility=hidden','-frtti'],
                    "OTHER_LDFLAGS": [ "-stdlib=libc++"],
                    "DEPLOYMENT_POSTPROCESSING": "YES",
            },
            "include_dirs": [
              "<!@(node -p \"require('./demo/node_modules/node-addon-api').include\")",
            ],
            'defines': [ 'NAPI_DISABLE_CPP_EXCEPTIONS' ],
            "cflags!": ["-fno-exceptions"],
            "cflags_cc!": ["-fno-exceptions"],
          }
        ]
      ]
    }
  ]
}

JS调用.node

封装sdk.js文件，对外提供js接口，内部调用node c++

    let addon_path = node_path || ('./../sdk/mac/castsdk.node');   
    // 导入node插件
    let addon = require(addon_path);
    // 创建对象
    var obj = new addon.CHPCastNodeBridge();

    StartCast: function (pincode) {
          // 可调用node c++
          var rtn = obj.Start(pincode);
          console.log("Start rtn:"+rtn);
          return rtn
    },    
    ...

Electron SDK已完成。

集成Electron SDK

1、导入SDK库和JS代码

在项目里拖入sdk文件夹(原生Framework和资源)和cast_sdk.js文件，cast_sdk.js是对外提供调用接口。

2、添加依赖库

在项目package.json配置如下，路径根据实际情况修改。
尤为注意的postinstall-mac，需要把原生SDK库拷贝到Electron.app/Contents/Frameworks下，npm start之前运行
packager-mac是打包添加的脚本，作用也是拷贝原生SDK库到.app内

"scripts": {
  "start": "./node_modules/.bin/electron .",
  "test": "echo \"Error: no test specified\" && exit 1",
  "packager-mac": "electron-packager ./ castsdkapp --platform=darwin --arch=x64 --out ./OutApp --electron-version=5.0.2 --overwrite && yes|cp -R  -H ../lib ./OutApp/castsdkapp-darwin-x64/castsdkapp.app/Contents/Resources/ && rm -rf ../sdk/win32 && rm -rf ../sdk/win64 && yes|cp -R  -H ../sdk ./OutApp/castsdkapp-darwin-x64/castsdkapp.app/Contents/Resources/ && yes|cp -R  -H ../sdk/mac/Resources ./OutApp/castsdkapp-darwin-x64/castsdkapp.app/Contents/&& yes|cp -R  -H ../sdk/mac/CastSDK/* ./OutApp/castsdkapp-darwin-x64/castsdkapp.app/Contents/Frameworks && yes|cp -R  -H ../sdk/mac/Resources ./OutApp/castsdkapp-darwin-x64/castsdkapp.app/Contents/Frameworks/castsdkapp\\ Helper.app/Contents/",
  "postinstall-mac": "yes|cp -R  -H ../sdk/mac/CastSDK/ ./node_modules/electron/dist/Electron.app/Contents/Frameworks && yes|cp -R  -H ../sdk/mac/Resources ./node_modules/electron/dist/Electron.app/Contents/ && yes|cp -R  -H ../sdk/mac/Resources ./node_modules/electron/dist/Electron.app/Contents/Frameworks/Electron\\ Helper.app/Contents/"
},
"devDependencies": {
  "electron-packager": "^12.0.0",
  "electron-rebuild": "^1.5.10",
  "electron": "^5.0.2",
  "node-addon-api": "^1.0.0"
},
"dependencies": {
  "electron": "^5.0.2",
  "electron-rebuild": "^1.5.10",
  "electron-packager": "^12.0.0"
}

3、初始化Electron SDK

加载node模块

//项目代码里导入对cast_sdk.js的引用
const CASTSDKMOD = require('../lib/cast_sdk.js');
//node加载路径
const node_path = './../sdk/mac/castsdk.node';
// 获取cast_nodejs_SDK
const castsdk = CASTSDKMOD.CastSDK.getInstance(node_path);

设置C++回调JS接口

SetCallback: function (callback) {
...
}
参数说明
callback:js function
return:-1设置失败，0设置成功

示例
// 回调接口
function callBack(type, success, errType,param) {
    //在这里处理所有回调事件
    console.log('callBack call',type,success,errType,param);
}
// 设置C++回调JS接口，
var ret = castsdk.SetCallback(callBack);

4、基本功能使用

示例

StartCast: function (pincode) {
...
}
参数说明
pincode:投屏码，字符串类型
return:-1调用失败，0调用成功，投屏是否成功在代理回调返回

示例
var ret = castsdk.StartCast(pincode);

...
集成Electron SDK就已经完毕。

传送门

Electron SDK封装，调用和打包的Demo源代码地址:cast-mac-sdk-electron
1.运行sh build_nodeaddon_mac.sh以重新构建node文件。
2.运行sh run_demo_mac.sh以运行Electron演示demo。
3.运行sh build_app_mac.sh以打包App。

随手点个赞有利于更多技术分享哦。

↓
↓
↓

MacOS原生SDK，如何封装给Electron环境集成调用