当前位置：首页 > article >正文

Electron 项目启动外部可执行文件的几种方式

article 2024/11/16 22:10:18

Electron 项目启动外部可执行文件的几种方式

序言

在开发 Electron 应用程序时，有时需要启动外部的可执行文件（如 .exe 文件）。这可能是为了调用系统工具、运行第三方软件或者集成现有的应用程序。
Electron 提供了多种方式来启动外部可执行文件，每种方法都有其适用场景和优缺点。本文将详细介绍这些方法，并提供详细的代码示例，帮助你在实际开发中选择最适合的方式来启动外部可执行文件。

1. 设置项目环境

首先，确保你已经安装了 Electron 和 child_process 模块。如果还没有安装，可以使用以下命令进行安装：

npm install electron --save-dev

2. 使用 `child_process.spawn` 启动外部可执行文件

child_process.spawn 是 Node.js 提供的一个方法，用于异步启动子进程。它非常适合启动长时间运行的进程，并且可以方便地处理标准输入、输出和错误流。

示例代码

const { app, BrowserWindow } = require('electron');
const { spawn } = require('child_process');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    mainWindow.loadFile('index.html');
}

app.on('ready', async () => {
    await createWindow();

    // 启动外部可执行文件
    function startExternalApp() {
        const child = spawn('notepad.exe'); // 示例：启动记事本

        child.stdout.on('data', (data) => {
            console.log(`stdout: ${data}`);
        });

        child.stderr.on('data', (data) => {
            console.error(`stderr: ${data}`);
        });

        child.on('close', (code) => {
            console.log(`子进程退出，退出码 ${code}`);
        });
    }

    // 绑定按钮事件
    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.webContents.send('init-start-button');
    });

    mainWindow.webContents.on('start-app', () => {
        startExternalApp();
    });
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron Start External App</title>
</head>
<body>
    <h1>Electron Start External App Example</h1>
    <button id="start-button">Start External App</button>

    <script>
        const { ipcRenderer } = require('electron');

        document.getElementById('start-button').addEventListener('click', () => {
            ipcRenderer.send('start-app');
        });

        ipcRenderer.on('init-start-button', () => {
            console.log('Start button initialized');
        });
    </script>
</body>
</html>

3. 使用 `child_process.exec` 启动外部可执行文件

child_process.exec 方法也用于启动子进程，但它更适合执行简单的命令行操作，并且会等待命令执行完毕后返回结果。

示例代码

const { app, BrowserWindow } = require('electron');
const { exec } = require('child_process');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    mainWindow.loadFile('index.html');
}

app.on('ready', async () => {
    await createWindow();

    // 启动外部可执行文件
    function startExternalApp() {
        const command = 'notepad.exe'; // 示例：启动记事本

        exec(command, (error, stdout, stderr) => {
            if (error) {
                console.error(`exec error: ${error}`);
                return;
            }

            console.log(`stdout: ${stdout}`);
            console.error(`stderr: ${stderr}`);
        });
    }

    // 绑定按钮事件
    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.webContents.send('init-start-button');
    });

    mainWindow.webContents.on('start-app', () => {
        startExternalApp();
    });
});

4. 使用 `shell.openPath` 或 `shell.openExternal` 启动外部可执行文件

shell.openPath 和 shell.openExternal 是 Electron 提供的方法，用于打开文件、目录或 URL。这些方法适用于不需要与外部进程进行交互的情况。

示例代码

const { app, BrowserWindow, shell } = require('electron');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    mainWindow.loadFile('index.html');
}

app.on('ready', async () => {
    await createWindow();

    // 启动外部可执行文件
    function startExternalApp() {
        const filePath = 'C:\\path\\to\\your\\app.exe'; // 替换为实际路径

        // 使用 shell.openPath 打开文件
        shell.openPath(filePath).then(() => {
            console.log('文件已打开');
        }).catch(err => {
            console.error(`打开文件时发生错误: ${err}`);
        });

        // 使用 shell.openExternal 打开文件
        shell.openExternal(filePath).then(() => {
            console.log('文件已打开');
        }).catch(err => {
            console.error(`打开文件时发生错误: ${err}`);
        });
    }

    // 绑定按钮事件
    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.webContents.send('init-start-button');
    });

    mainWindow.webContents.on('start-app', () => {
        startExternalApp();
    });
});

5. 使用 `child_process.fork` 启动外部 Node.js 脚本

child_process.fork 方法用于启动一个新的 Node.js 进程，并且可以方便地进行进程间通信。

示例代码

假设你有一个 Node.js 脚本 child.js：

// child.js
console.log('子进程启动');
process.on('message', (msg) => {
    console.log(`收到消息: ${msg}`);
    process.send('子进程响应');
});

在主进程中启动这个脚本：

const { app, BrowserWindow } = require('electron');
const { fork } = require('child_process');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    mainWindow.loadFile('index.html');
}

app.on('ready', async () => {
    await createWindow();

    // 启动外部 Node.js 脚本
    function startExternalScript() {
        const child = fork('child.js');

        child.on('message', (msg) => {
            console.log(`收到消息: ${msg}`);
        });

        child.send('主进程消息');
    }

    // 绑定按钮事件
    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.webContents.send('init-start-button');
    });

    mainWindow.webContents.on('start-app', () => {
        startExternalScript();
    });
});