Skip to content

使用自定义协议在 Electron 中访问本地资源

在 Electron 中,你可以使用 protocol 模块注册自定义协议来访问本地资源。以下是一个简单的示例,演示如何注册自定义协议并访问本地 HTML 文件:

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

app.on('ready', () => {
  // 注册自定义协议
  protocol.registerFileProtocol('myapp', (request, callback) => {
    const url = request.url.replace('myapp://', '');
    const filePath = path.join(__dirname, url);
    callback({ path: filePath });
  });

  // 创建窗口并加载自定义协议的 HTML 文件
  const win = new BrowserWindow();
  win.loadURL('myapp://index.html');
});

在上面的代码中,我们使用 protocol.registerFileProtocol 方法注册了一个名为 myapp 的自定义协议。当使用 myapp:// 开头的 URL 时,它将被转换为本地文件路径,并通过回调函数返回给 Electron。

请注意,path.join(__dirname, url) 用于构建文件的绝对路径,这假设你的 HTML 文件与主进程脚本位于同一目录。如果你的文件位于其他目录,你需要相应地调整路径。

然后,我们创建了一个 BrowserWindow 实例,并使用 loadURL 方法加载 myapp://index.html。这将使用我们注册的自定义协议来加载本地的 HTML 文件。

确保将上述代码放在主进程脚本中,并在应用程序准备就绪时触发 ready 事件。

通过这种方式,你可以注册自己的协议来访问本地资源,并在 Electron 中加载它们的 HTML 文件。