如何通过双击文件管理器中的文件在Electron应用中打开关联文件

嘿，作为Electron新手碰到这个需求太正常啦！我来一步步带你实现双击文件管理器里的文件，直接在你的Electron应用中打开它的功能～

1. 主进程处理系统级文件打开事件 #

Electron的主进程负责对接系统级事件，比如文件双击触发的打开请求。不同平台的触发逻辑有点不一样，我把兼容多平台的代码给你：

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

let mainWindow;

// 创建窗口的通用函数，支持传入文件路径
function createWindow(filePath = null) {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 开启上下文隔离，更安全
      nodeIntegration: false // 关闭Node.js集成，推荐做法
    }
  });

  mainWindow.loadFile('index.html');

  // 如果有文件路径，等页面加载完成后传给渲染进程
  if (filePath) {
    mainWindow.webContents.on('did-finish-load', () => {
      mainWindow.webContents.send('open-file', filePath);
    });
  }
}

// macOS：监听系统的文件打开事件
app.on('open-file', (event, filePath) => {
  event.preventDefault(); // 阻止系统默认行为
  if (mainWindow) {
    // 窗口已存在，激活窗口并发送文件路径
    mainWindow.show();
    mainWindow.webContents.send('open-file', filePath);
  } else {
    // 窗口未创建，带着文件路径启动窗口
    createWindow(filePath);
  }
});

// Windows：处理第二个实例（双击文件会启动新的应用实例）
app.on('second-instance', (event, commandLine) => {
  // 命令行参数的最后一个就是双击的文件路径
  const filePath = commandLine.pop();
  if (mainWindow) {
    // 窗口已存在，恢复最小化、聚焦并发送文件路径
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();
    mainWindow.webContents.send('open-file', filePath);
  } else {
    createWindow(filePath);
  }
});

app.whenReady().then(() => {
  // 启动时如果有命令行参数（比如Windows双击文件），提取文件路径
  const filePath = process.argv.length > 1 ? process.argv.pop() : null;
  createWindow(filePath);

  // macOS dock点击图标时的处理
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

2. 通过IPC把文件路径传给渲染进程 #

渲染进程没办法直接获取系统事件，所以需要用Electron的IPC机制把文件路径传递过去。先写preload.js（用来安全暴露API给渲染进程）：

const { contextBridge, ipcRenderer } = require('electron');

// 暴露给渲染进程的API
contextBridge.exposeInMainWorld('electronAPI', {
  onOpenFile: (callback) => ipcRenderer.on('open-file', (event, filePath) => callback(filePath))
});

然后在你的渲染进程页面（比如index.html）里，监听这个事件并处理文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的Electron应用</title>
</head>
<body>
  <h1>欢迎使用我的应用</h1>
  <div id="file-info"></div>

  <script>
    // 监听主进程发来的文件路径
    window.electronAPI.onOpenFile((filePath) => {
      console.log('要打开的文件路径：', filePath);
      // 这里可以添加读取文件内容的逻辑，比如用IPC让主进程读取后返回内容
      document.getElementById('file-info').textContent = `正在打开文件：${filePath}`;
    });
  </script>
</body>
</html>

3. 打包时配置文件关联 #

如果要让打包后的应用被系统识别为某类文件的默认打开程序，需要在打包工具（比如electron-builder）里配置文件关联。在package.json里添加如下配置：

"build": {
  "appId": "com.yourcompany.yourapp", // 替换成你的应用ID
  "mac": {
    "category": "public.app-category.utilities",
    "fileAssociations": [
      {
        "ext": ["txt", "md"], // 你要关联的文件扩展名
        "name": "文本文件",
        "role": "Editor"
      }
    ]
  },
  "win": {
    "target": "nsis",
    "fileAssociations": [
      {
        "ext": ["txt", "md"],
        "description": "文本文件",
        "icon": "icon.ico" // 可选：关联文件的图标路径
      }
    ]
  },
  "linux": {
    "target": "AppImage",
    "fileAssociations": [
      {
        "ext": ["txt", "md"],
        "description": "文本文件"
      }
    ]
  }
}

4. 开发模式下测试 #

开发阶段可以用命令行模拟双击文件的场景：

• macOS：open -n ./node_modules/.bin/electron . -- /path/to/your/test-file.txt
• Windows：electron . "C:\path\to\your\test-file.txt"
• Linux：./node_modules/.bin/electron . /path/to/your/test-file.txt

这样一套流程走下来，你的应用就能完美支持双击文件打开啦！要是某一步有疑问，随时说～

内容的提问来源于stack exchange，提问作者Abdul Rehman Mehar