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

您所在的位置：网站首页 › 前端调用c程序 › Electron学习笔记01(electron环境和调用C#)

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

2024-06-08 07:06| 来源: 网络整理| 查看: 265

一、Eelectron简介

二、环境配置

三、搭建项目

四、调用C#代码

五、调用C# dll

六、调试C# 代码

七、调用C++的dll

一、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。

设置镜像源为淘宝的，这样下载包时会快些

yarn config set registry https://registry.npm.taobao.org -g yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ -g

这里我使用cnpm install yarn -g来全局安装yarn。

cnpm install yarn -g

安装后在命令行输入yarn --version来查看一下版本。

yarn --version

三、搭建项目

由于使用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(使用yarn start替代)就可以运行项目了，但发现electron框架还是用的2.0版本（也可打开package.json文件，在devDependencies节点里看到electron2.0）实际官网推荐可以用3.0版了。在终端输入yarn outdated，也可看到最新稳定版是3.0.10，如下图

输入yarn upgrade [email protected]来更新这个包，更新完后再打开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(使用yarn start替代)后发现界面虽启动了，但报JS错。需添加nodeIntegration:true，如下图（注意每次yarn install好像会清掉穿上dist，得手动又做一次）

再次运行yarn run dev(使用yarn start替代)成功。可在界面上看到已升级为Electron:8.1.1了。

yarn start

在electron-quick-start项目中使用yarn start代替yarn run dev。

四、调用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添加这个包

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(使用yarn start替代)运行项目，但会报如下错误

说这个edge模块不是对应node.js 10.2 这时我们可以安装electron-edge的兼容版 electron-edge-js 输入yarn remove electron-edge移除它

yarn remove electron-edge

输入yarn add electron-edge-js安装兼容版

yarn add electron-edge-js

把代码var edge = require('electron-edge')改为var edge = require('electron-edge-js') 输入yarn run dev(使用yarn start替代)运行项目后在终端打印出了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 public async Task 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 public async Task 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(使用yarn start替代)有报如下错误 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表示成功。

【本文地址】

公司简介

联系我们