Electron-Egg进阶教程：如何开发自定义插件和工具

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/gh_mirrors/el/electron-egg

Electron-Egg是一个简单、跨平台的企业级桌面软件开发框架，它基于Electron构建，提供了丰富的API和工具，帮助开发者快速构建功能强大的桌面应用。本教程将带你深入了解如何在Electron-Egg中开发自定义插件和工具，扩展应用功能，提升开发效率。

自定义插件开发基础

插件开发环境搭建

首先，确保你已经正确安装了Electron-Egg开发环境。如果还没有安装，可以通过以下命令克隆仓库并安装依赖：

git clone https://gitcode.com/gh_mirrors/el/electron-egg
cd electron-egg
npm install

Electron-Egg使用Vue作为前端框架，因此插件开发也可以利用Vue的生态系统。在frontend/vite.config.js中可以看到已经集成了@vitejs/plugin-vue插件，这为Vue组件的开发提供了支持。

插件目录结构

在Electron-Egg项目中，建议将自定义插件放在electron/service/目录下。这个目录下已经有一个example.js文件，可以作为插件开发的参考。典型的插件目录结构如下：

electron/
  service/
    your-plugin/
      index.js       # 插件入口文件
      config.js      # 插件配置
      utils/         # 工具函数
      components/    # Vue组件（如果需要）

开发自定义工具

自定义命令开发

Electron-Egg提供了执行自定义命令的功能，可以在cmd/bin.js文件中进行配置。例如，已经配置了Go和Python的调试命令：

exec: {
  // 单独调试，air 实现 go 热重载
  go: {
    directory: './go',
    cmd: 'air',
    args: ['-c=config/.air.toml' ],
  },
  // windows 单独调试，air 实现 go 热重载
  go_w: {
    directory: './go',
    cmd: 'air',
    args: ['-c=config/.air.windows.toml' ],
  },
  // Python 调试
  python: {
    directory: './python',
    cmd: 'python',
    args: ['main.py'],
  }
}

你可以按照类似的格式添加自己的自定义命令，例如添加一个Node.js脚本的执行命令：

node_script: {
  directory: './scripts',
  cmd: 'node',
  args: ['my-script.js'],
}

然后通过ee-bin exec node_script命令执行你的自定义脚本。

工具函数开发

在electron/service/目录下创建工具类，例如file-utils.js，实现文件操作相关的工具函数：

class FileUtils {
  static readFile(path) {
    // 实现文件读取逻辑
  }
  
  static writeFile(path, content) {
    // 实现文件写入逻辑
  }
}

module.exports = FileUtils;

然后在其他模块中通过require引入使用：

const FileUtils = require('./service/file-utils');
FileUtils.readFile('path/to/file');

插件与主进程通信

IPC通信基础

Electron-Egg中，主进程和渲染进程通过IPC（Inter-Process Communication）进行通信。在electron/preload/bridge.js中定义了通信桥梁，你可以在这里添加自定义的IPC通信方法。

自定义IPC通信

例如，添加一个获取系统信息的IPC通信：

在bridge.js中添加：

contextBridge.exposeInMainWorld('system', {
  getSystemInfo: () => ipcRenderer.invoke('system:get-info')
});

在主进程中（如electron/controller/example.js）添加处理逻辑：

ipcMain.handle('system:get-info', async (event) => {
  // 获取系统信息的逻辑
  return {
    os: process.platform,
    version: process.getSystemVersion()
  };
});

然后在前端页面中调用：

window.system.getSystemInfo().then(info => {
  console.log(info);
});

插件配置与加载

插件配置

在electron/config/目录下的配置文件（如config.default.js）中，可以添加插件的配置信息：

config.plugin = {
  yourPlugin: {
    enable: true,
    config: {
      // 插件配置项
    }
  }
}

插件加载

在electron/main.js中，应用启动时会加载配置的插件。你可以通过app.register方法注册插件的生命周期钩子：

// 注册自定义插件
const YourPlugin = require('./service/your-plugin');
app.register("ready", YourPlugin.init);

实战案例：开发一个数据导出插件

插件功能设计

我们来开发一个简单的数据导出插件，支持将应用数据导出为CSV格式。

实现步骤

1. 创建插件目录：electron/service/data-exporter/

2. 编写导出逻辑：index.js

const fs = require('fs');
const path = require('path');

class DataExporter {
  static exportCSV(data, filename) {
    const headers = Object.keys(data[0]).join(',');
    const rows = data.map(item => Object.values(item).join(','));
    const csv = [headers, ...rows].join('\n');
    
    const filePath = path.join(app.getPath('downloads'), filename);
    fs.writeFileSync(filePath, csv);
    
    return filePath;
  }
}

module.exports = DataExporter;

3. 添加IPC通信：在bridge.js中添加

contextBridge.exposeInMainWorld('exporter', {
  exportCSV: (data, filename) => ipcRenderer.invoke('exporter:export-csv', data, filename)
});

4. 在主进程中处理：electron/controller/example.js

const DataExporter = require('../service/data-exporter');

ipcMain.handle('exporter:export-csv', async (event, data, filename) => {
  return DataExporter.exportCSV(data, filename);
});

5. 在前端调用：

const data = [
  { name: '张三', age: 20 },
  { name: '李四', age: 25 }
];

window.exporter.exportCSV(data, 'users.csv').then(filePath => {
  alert(`文件已导出至：${filePath}`);
});

插件发布与分享

插件打包

将你的插件目录打包为ZIP文件，确保包含所有必要的文件。

插件分享

可以将你的插件分享到Electron-Egg社区，或者在项目的README.md中添加插件使用说明，帮助其他开发者使用你的插件。

总结

通过本教程，你已经了解了如何在Electron-Egg中开发自定义插件和工具。从环境搭建到实际案例，你可以根据自己的需求扩展应用功能。Electron-Egg提供了灵活的扩展机制，让你能够轻松地为应用添加新功能，提高开发效率。

希望本教程对你有所帮助，祝你在Electron-Egg的开发之路上越走越远！

【免费下载链接】electron-egg A simple, cross platform, enterprise desktop software development framework 项目地址: https://gitcode.com/gh_mirrors/el/electron-egg