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

客官°小女子只卖身不卖艺 2022-04-13 08:31 149阅读 0赞

## 一、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**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70]  
接着输入`cd my_electronvue1`进入项目文件夹中。  
再输入`yarn install`来安装项目依赖的包，需要一点时间。  
用VSCode打开项目，在终端输入`yarn run dev`就可以运行项目了，但发现electron框架还是用的2.0版本（也可打开package.json文件，在devDependencies节点里看到electron2.0）  
实际官网推荐可以用3.0版了。  
在终端输入`yarn outdated`，也可看到最新稳定版是3.0.10，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 1]  
输入`yarn upgrade electron@3.0.10`来更新这个包，更新完后再打开package.json文件就可看到electron版本已是3.0.10，2020年更新时版本已是8.1.1升级后再运行会报错，如下图  
![在这里插入图片描述][20200324160529843.png]  
去淘宝镜像网站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，得手动又做一次）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 2]  
再次运行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之前)  
![在这里插入图片描述][20181128153420580.png]  
在终端输入`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)
      })

具体如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 3]  
最后输入yarn run dev运行项目，但会报如下错误  
![在这里插入图片描述][2018112816202165.png]  
说这个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，项目结构如下图  
![在这里插入图片描述][20181128162034375.png]  
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的结果。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 4]  
结果如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 5]

## 六、调式C\# 代码 ##

（2020年3月新增）修改代码，在SystemInformation.vue中写入如图所示代码，表示从渲染进进程里去调用主进程里的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 6]  
修改代码index.js，先删掉之前在createWindow()写的add(3, function (error, result)。。。。这部份代码，然后修改如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 7]  
用vs2017附加进程来调式C\#代码，找到项目名称为electronclient的进程附加![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 8]  
点击调用C\#按钮，可以看到已成功进到断点处  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 9]  
大功告成。

其它  
如查yarn run dev有报如下错误 process is not defined  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 10]  
编辑.electron-vue/webpack.web.config.js  
和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，  
添加templateParameters，修改后如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 11]

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

## 七、调用C++的dll ##

C++测试代码如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 12]  
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())

如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 13]  
得到结果3 和 hello表示成功。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70]: /images/20220413/aea6d28d7bcb4865b667b0104dd3da07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 1]: /images/20220413/d1829974f03544e7b2b47b33c4f2a2e7.png
[20200324160529843.png]: /images/20220413/d53c1c55d3a14f6d8121a56b9d0f9d2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 2]: /images/20220413/218d00bc4907494dac67e16c041e5a2a.png
[20181128153420580.png]: /images/20220413/470974cf583245a99baf394e663f1b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 3]: /images/20220413/c0fbd38da71448ac8e3672d433b45928.png
[2018112816202165.png]: /images/20220413/ed6c709175a64162a7fbff3e4e6e49a3.png
[20181128162034375.png]: /images/20220413/2e3f21bc01134c74af373a2d47db9389.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 4]: /images/20220413/22274f7ab26d4d518163c6da05266837.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 5]: /images/20220413/19fa0f07fe834576a6c60856efbe7efc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 6]: /images/20220413/099ac982458b4ced9f689454a60cf9f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 7]: /images/20220413/4352d075a20d4164a6993c337dee217e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 8]: /images/20220413/99858164976c4359bc22d207ddde17a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 9]: /images/20220413/2f32fc88cb4b4caaab3f01702cff0973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 10]: /images/20220413/fba70c6eb5704e4b9429bd4e947f0d45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 11]: /images/20220413/dc58b06a42b6406ab962972c275fed02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 12]: /images/20220413/b0dc18b5f7ab4527a2fc335167c11425.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p1bnNoYW5nc2h1aQ_size_16_color_FFFFFF_t_70 13]: /images/20220413/a1be2d3d1ae64935907d889a5c68869a.png