如何实现React Web应用与Electron桌面应用的通信及参数传递？

一、自定义URL协议支持传递参数 #

完全可以通过自定义URL协议传递参数，核心思路是把需要的信息（比如进程ID）拼接在协议URL的路径或查询参数中，Electron端解析这些参数后完成存储操作。

二、React Web端构造带参数的唤起URL #

直接将参数拼在自定义协议的URL里，两种常见形式：

• 路径形式：myrecorder://process/1234
• 查询参数形式：myrecorder://?pid=1234&operator=zhangsan

React中通过点击事件触发打开URL：

const openElectronRecorder = (pid) => {
  const targetUrl = `myrecorder://?pid=${pid}`;
  window.open(targetUrl);
};

三、Electron端解析参数并存储 #

1. 处理首次启动的参数 #

在Electron主进程中，从命令行参数里提取自定义URL并解析：

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

// 解析URL参数的工具函数
function parseUrlParams(url) {
  const cleanUrl = url.replace(/^myrecorder:\/\//, '');
  const params = new URLSearchParams(cleanUrl);
  return {
    pid: params.get('pid'),
    // 可扩展其他参数
  };
}

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      preload: './preload.js' // 新版本Electron建议用preload脚本做进程通信
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  // 提取命令行中的自定义URL参数
  const args = process.argv.slice(1);
  const targetUrl = args.find(arg => arg.startsWith('myrecorder://'));
  
  if (targetUrl) {
    const params = parseUrlParams(targetUrl);
    // 调用你的数据库存储逻辑，比如saveProcessIdToDb(params.pid)
    console.log('首次启动收到参数：', params);
  }
  createMainWindow();
});

2. 处理应用已打开时的唤起请求 #

通过单实例锁避免重复启动应用，同时监听second-instance事件获取新参数：

// 申请单实例锁，确保同一时间只有一个应用实例
const hasSingleInstanceLock = app.requestSingleInstanceLock();

if (!hasSingleInstanceLock) {
  app.quit();
} else {
  app.on('second-instance', (event, commandLine) => {
    const targetUrl = commandLine.find(arg => arg.startsWith('myrecorder://'));
    if (targetUrl) {
      const params = parseUrlParams(targetUrl);
      // 存入数据库
      // saveProcessIdToDb(params.pid);
      
      // 恢复并聚焦窗口
      if (mainWindow) {
        if (mainWindow.isMinimized()) mainWindow.restore();
        mainWindow.focus();
      }
    }
  });
}

四、Web端调取存储的数据 #

有两种常见方式：

1. Electron启动本地HTTP服务：在Electron主进程中用Express搭建简单接口，供React Web查询数据库数据：

const express = require('express');
const localServer = express();
const serverPort = 3001;

localServer.get('/api/get-process-record', (req, res) => {
  const pid = req.query.pid;
  // 执行数据库查询逻辑，比如queryRecordByPid(pid)
  res.json({ success: true, data: /* 查询结果 */ });
});

localServer.listen(serverPort, () => {
  console.log(`本地服务运行在端口${serverPort}`);
});

React端通过接口获取数据：

const fetchRecord = async (pid) => {
  const response = await fetch(`http://localhost:3001/api/get-process-record?pid=${pid}`);
  const result = await response.json();
  // 处理返回的数据
};

2. 直接共享数据库：如果数据库支持远程访问，React Web可直接连接数据库查询（需注意权限控制）。

五、Windows注册表配置要点 #

确保注册表中自定义协议的Command值包含"%1"，这样系统会把完整的带参数URL传递给Electron应用：

"Command"="C:\\YourAppPath\\ElectronRecorder.exe" "%1"

内容的提问来源于stack exchange，提问作者Sara Qayyum