网页点击按钮启动Electron-React-Vite-TS应用失败求助

问题分析与解决方案 #

1. 核心错误：React Router Link 无法触发外部协议 #

你使用React Router的<Link>组件跳转自定义协议是错误的——<Link>仅用于单页应用内部路由跳转，不会调用系统的协议处理逻辑，因此会提示「无注册 handler」。

修复方法：
替换为原生<a>标签，或在点击事件中手动调用window.open：

// 方案1：原生a标签
<div className="App-Lauch-Button">
  <a href="myApp://launch?param1=value1&param2=value2" target="_blank">
    <MdOpenInNew />
  </a>
</div>

// 方案2：点击事件（更灵活）
import { useCallback } from 'react';

const LaunchButton = () => {
  const handleLaunch = useCallback(() => {
    window.open('myApp://launch?param1=value1&param2=value2');
  }, []);

  return (
    <div className="App-Lauch-Button" onClick={handleLaunch}>
      <MdOpenInNew />
    </div>
  );
};

2. 自定义协议注册的正确姿势（替换过时API+修正执行顺序） #

protocol.registerBufferProtocol已过时，官方推荐使用protocol.registerStringProtocol；同时你将协议注册放在独立的app.on('ready')回调中，与app.whenReady()的Promise链存在执行顺序冲突，需统一移到app.whenReady()的链式调用里。

修改main.ts的协议注册逻辑：

// 移除独立的app.on('ready')回调，将协议注册移到app.whenReady()内部
app.whenReady().then(() => {
  // 原有代码：设置AppUserModelId、监听browser-window-created事件...

  // 注册自定义协议（替换过时API）
  protocol.registerStringProtocol('myApp', (request, callback) => {
    // 解析协议参数
    const url = new URL(request.url);
    console.log('协议请求路径:', url.pathname);
    console.log('请求参数:', Object.fromEntries(url.searchParams));

    // 唤起/激活应用窗口
    const mainWindow = BrowserWindow.getAllWindows()[0];
    if (mainWindow) {
      mainWindow.show();
      mainWindow.focus();
      // 可通过IPC向渲染进程传递协议参数
      mainWindow.webContents.send('protocol-launch', {
        path: url.pathname,
        params: Object.fromEntries(url.searchParams)
      });
    }

    // 返回协议响应
    callback({ mimeType: 'text/plain', data: Buffer.from('Launched via custom protocol') });
  }).catch(err => {
    console.error('协议注册失败:', err);
  });

  createWindow();

  // 原有代码：activate事件监听...
});

3. 开发环境测试自定义协议的方法 #

开发环境下系统默认不知道myApp://协议关联你的Electron开发进程，需手动处理：

• Windows：手动添加注册表项，将myApp协议指向你的Electron启动路径（如node_modules/.bin/electron.cmd + 项目入口文件路径）。
• macOS：在终端执行open myApp://launch?param1=value1，或直接在浏览器地址栏输入该链接，系统会提示选择应用，选中你的Electron开发进程即可。
• 通用方式：启动Electron后，在主进程控制台打印当前进程路径，手动将协议关联到该路径（不同系统操作逻辑不同）。

注意：开发环境无需编译安装应用，只要完成协议与开发进程的关联即可测试。

4. 打包时的协议配置（补充） #

若最终要打包应用，需在打包工具中声明协议，以electron-builder为例，在package.json中添加：

"build": {
  "protocols": [
    {
      "name": "My Electron App Protocol",
      "schemes": ["myApp"],
      "role": "Viewer"
    }
  ]
}

打包后的应用会自动在系统注册协议，点击链接即可直接唤起。

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