electron+vue3+electron-edge-js 调用C#.dll文件

electron-edge-js 用这玩意儿我血压高.....

血压高的谨慎食用…

---

起步

1：安装 Node.js 坏境

这里推荐 14.16.0 版本，因为我在此版本下运行成功，其他版本请自行尝试
链接: Node v14.16.0 (LTS)
进入链接网址后鼠标滚轮往下划一点，根据系统自行选择32位是64位，我的系统是Windows64位所以我选win64位版本的

记得安装 淘宝镜像 cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org
避免每次安装都需要–registry参数，永久设置淘宝镜像
npm config set registry http://registry.npm.taobao.org

2：CMD 安装 Vue Cli

npm install -g @vue/cli

---

3：全局安装 Electron

cnpm install electron -g

一、创建Vue3项目（ele）

vue create ele

注：也可以使用 vue ui 命令进行可视化Vue项目的创建

回车默认Vue3

OK 这样Vue3项目就创建成功了

二、Vue3项目中添加 electron 模块

这里推荐使用 VS CODE 进行项目开发

1：在 VS CODE 中打开项目

2：在终端中输入以下命令

vue add electron-builder

3：然后选择最新版本 ^13.0.0

OK Electron模块添加成功，如下：

此时 为保证项目至此是没有问题的，我们运行项目看看是否运行成功
1：打开 src 目录下的 background.js 文件
2：注释 app.on(‘ready’, async () => { }) 其中一段代码 ，切记保留 createWindow()

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
    // if (isDevelopment && !process.env.IS_TEST) {
    //     // Install Vue Devtools
    //     try {
    //         await installExtension(VUEJS3_DEVTOOLS)
    //     } catch (e) {
    //         console.error('Vue Devtools failed to install:', e.toString())
    //     }
    // }
    createWindow()
})

3：新建终端输入 npm run electron:serve 开始运行，或者在NPM 脚本中直接点击 electron:serve 调试按钮（一个甲壳虫样子的图标 ）开始运行，
运行成功桌面会弹出一个应用程序

OK 运行成功

1.添加 electron-edge-js 模块

链接: electron-edge-js

npm i electron-edge-js

再打开 background.js

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'

// import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'

// 这里引入 electron-edge-js
var edge = require('electron-edge-js');
// 这里引入 path
var path = require('path');

2.加入C#的.dll文件 EdgeClassLibrary.dll

dll文件内容：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace EdgeClassLibrary
{
    public class EdgeClassPrinter
    {
        /// <summary>
        /// electron 测试文件
        /// </summary>
        /// <param name="input">传入的内容</param>
        /// <returns></returns>
        public async Task<object> Add(object input)
        {
            Dictionary<int, string> keyValuePairs = new Dictionary<int, string>
            {
                { 0, input.ToString() }
            };

            return await Task.FromResult(keyValuePairs);
        }
    }
}

生成 .dll 文件后复制到Vue项目 resources 目录下

配置 vue.config.js 文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    pluginOptions: {
        //复制resources下的文件到根目录
        builderOptions: {
        "extraFiles": [
                    // 安装程序时把指定的资源复制到程序根目录
                    "./resources",
                ],
        },
        //引入electron-edge-js模块
        electronBuilder: {
            externals: ['electron-edge-js']
        }
    }
})

3.如何使用

再打开 background.js 在app.on(‘ready’, async () => {})之前添加以下代码

let edgeSend = edge.func({
    assemblyFile: path.join(__dirname, '../resources/EdgeClassLibrary.dll'),// dll 文件地址
    typeName: 'EdgeClassLibrary.EdgeClassPrinter',//类库名.类名
    methodName: 'Add'//方法名
})

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

OK 点击NPM脚本 甲壳虫图标运行项目

OK 项目运行成功并且成功返回

---

总结

总之，坑很多