Electron学习笔记01(electron环境和调用C#)

一、Eelectron简介

Electron是一个仅使用javascript,Html和css来快捷搭建跨平台桌面应用的框架，它使用Chromium和Node.js。vscode,github desktop等都是用electron开发的。Electron的中文网址是https://electronjs.org/

二、环境配置

这里我使用electron+vue+vscode来开发，在我这篇文章里已有vue+vscode的配置了https://blog.csdn.net/junshangshui/article/details/80376489，现在都推荐用yarn这个包管理器了，打开yarn的官网https://yarn.org.cn/ 跟据文档学习安装和使用yarn。这里我使用cnpm install yarn -g来全局安装yarn。安装后在命令行输入yarn --version来查看一下版本。
设置镜像源为淘宝的，这样下载包时会快些
yarn config set registry https://registry.npm.taobao.org -g
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g

三、搭建项目

由于使用electron+vue来开发，就可充分利用vue-cli脚手架来搭建项目。
利用electron-vue样版可以生成需要的样版代码，详细使用可看官网https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
下面命令表示使用vue-cli脚手架用electron-vue模版创建一个名为my_electronvue1的项目
vue init simulatedgreg/electron-vue my_electronvue1

然后经过几次询问配置就在我D盘的VueProjects目录中创建好了项目my_electronvue1

接着输入cd my_electronvue1进入项目文件夹中。
再输入yarn install来安装项目依赖的包，需要一点时间。
用VSCode打开项目，在终端输入yarn run dev就可以运行项目了，但发现electron框架还是用的2.0版本（也可打开package.json文件，在devDependencies节点里看到electron2.0）
实际官网推荐可以用3.0版了。
在终端输入yarn outdated，也可看到最新稳定版是3.0.10，如下图

输入yarn upgrade electron@3.0.10来更新这个包，更新完后再打开package.json文件就可看到electron版本已是3.0.10，2020年更新时版本已是8.1.1升级后再运行会报错，如下图

去淘宝镜像网站https://npm.taobao.org/mirrors/electron/下载electron-v8.1.1-win32-x64.zip
然后在当前项目的node_modules\electron\下创建dist文件夹。将下载的解压到刚创建的dist里。
在node_modules\electron\中创建path.txt，内容为electron.exe
再次运行yarn run dev后发现界面虽启动了，但报JS错。需添加nodeIntegration:true，如下图
（注意每次yarn install好像会清掉穿上dist，得手动又做一次）

再次运行yarn run dev成功。可在界面上看到已升级为Electron:8.1.1了。

四、调用C#代码

首先得了解edge.js这个库，它能让node.js和.net代码在一个进程中互操作。
详情可看https://github.com/tjanczuk/edge
在electron中使用的话就要安装electron-edge这个包。
进入官网查看说明https://www.npmjs.com/package/electron-edge
看到说明如下图，当前最高兼容electron1.6.2(node.js 7.4之前)

在终端输入yarn add electron-edge添加这个包，完成后在package.json的dependencies中可看到elctron-edge:6.5.5
了解官网例子后，我打开项目src/main/index.js这个主进程文件,在里面引入electron-edge
var edge = require('electron-edge')
再添加

var helloWorld = edge.func(`
    async (input) => { 
        return "Hellow world " + input.ToString(); 
    }
`)

再在createWindow ()方法里调用这个C#代码

helloWorld('JavaScript', function (error, result) {
    if (error) throw error
    console.log(result)
  })

具体如下图

最后输入yarn run dev运行项目，但会报如下错误

说这个edge模块不是对应node.js 10.2
这时我们可以安装electron-edge的兼容版 electron-edge-js
输入yarn remove electron-edge移除它
输入yarn add electron-edge-js安装兼容版
把代码var edge = require('electron-edge')改为var edge = require('electron-edge-js')
输入yarn run dev运行项目后在终端打印出了Hello world JavaScript

五、调用C# dll

打开VS2017新建一个项目，添加一个net standard2.0的类库ClassLibrary1，再添加一个net framework 4.6的类库ClassLibrary2，项目结构如下图

Class1的代码如下：

using System.Threading.Tasks;
namespace ClassLibrary1
{
    public class Class1
    {
        //electron-edge规定.net暴露给它的方法必须是Func<object,Task<object>>
        public async Task<object> Add(object input)
        {
            int v = (int)input;
            return AddSeven(v);
        }

        private static int AddSeven(int v)
        {
            return v + 7;
        }
    }
}

Person的代码如下：

namespace ClassLibrary2
{
    public class Person
    {
        public int anInteger = 1;
        public double aNumber = 3.1415;
        public string aString = "foo";
        public bool aBoolean = true;
        public byte[] aBuffer = new byte[10];
        public object[] anArray = new object[] { 1, "foo" };
        public object anObject = new { a = "foo", b = 12 };
    }
}

Class2的代码如下：

using System.Threading.Tasks;
namespace ClassLibrary2
{
    public class Class2
    {
        //electron-edge规定.net暴露给它的方法必须是Func<object,Task<object>>
        public async Task<object> GetPerson(dynamic input)
        {
            Person person = new Person();
            return person;
        }
    }
}

编译.net项目，把ClassLibrary1.dll和ClassLibrary2.dll复制到electron项目的static目录里
编辑src/main/index.js文件
先引入（需要用到这个路径操作的功能）

import path from 'path' 

在

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
}

这段代码后添加两个方法（因为要用到__static）

let add = edge.func({
  assemblyFile: path.join(__static, 'ClassLibrary1.dll'),
  typeName: 'ClassLibrary1.Class1',
  methodName: 'Add'
})

let getPerson = edge.func({
  assemblyFile: path.join(__static, 'ClassLibrary2.dll'),
  typeName: 'ClassLibrary2.Class2',
  methodName: 'GetPerson'
})

然后就在createWindow()方法里调用吧

add(3, function (error, result) {
    if (error) throw error
    console.log(result)
  })

  getPerson(null, function (error, result) {
    if (error) throw error
    console.log(result)
  })

最后运行项目，在终端可看到打印出了调用.net的结果。

结果如下图

六、调式C# 代码

（2020年3月新增）修改代码，在SystemInformation.vue中写入如图所示代码，表示从渲染进进程里去调用主进程里的方法

修改代码index.js，先删掉之前在createWindow()写的add(3, function (error, result)。。。。这部份代码，然后修改如下图所示

用vs2017附加进程来调式C#代码，找到项目名称为electronclient的进程附加
点击调用C#按钮，可以看到已成功进到断点处

大功告成。

其它
如查yarn run dev有报如下错误 process is not defined

编辑.electron-vue/webpack.web.config.js
和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，
添加templateParameters，修改后如下图所示：

templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },

七、调用C++的dll

C++测试代码如下

C++的dll生成时注意选择32位还是64位，选错会导致报错:Error: Dynamic Linking Error: Win32 error 193
将C++的Dll1.dll放到static目录下

安装依赖包yarn add ffi-napi
测式代码如下：

const path = require('path')
const ffi = require('ffi-napi')
let cpplib = path.resolve(path.join(__static, 'Dll1.dll'));
let cppDll = ffi.Library(cpplib, {
  Add: ['float', ['float', 'float']],
  Hello: ['string', []]
})
console.log(cppDll.Add(1, 2))
console.log(cppDll.Hello())

如下图

得到结果3 和 hello表示成功。