【亲测免费】 Electron-Tabs 使用教程

2026-01-16 09:30:24作者：郁楠烈Hubert

Electron-Tabs 是一个用于构建具有多标签页界面的 Electron 应用程序的库。它允许你在 Electron 应用中轻松地添加可切换的标签页功能。

1. 项目目录结构及介绍

在 brrd/electron-tabs 项目中，典型的目录结构如下：

project/
├── main.js         # 主进程脚本，负责初始化Electron应用和创建窗口
├── renderer.js     # 渲染进程脚本，处理与UI交互
├── mainWindow.html # 主窗口HTML文件，包含Electron-Tabs的实例化代码
├── tab.html        # 标签页的HTML模板
└── package.json    # 项目配置文件，包含依赖和脚本

main.js：这是 Electron 的主进程脚本，负责创建应用程序窗口。
renderer.js：渲染进程中的JS文件，通常处理用户的交互。
mainWindow.html：主窗口的HTML文件，包含Electron-Tabs的设置和实例化。
tab.html：每一个标签页的内容模板。
package.json：定义了项目的基本信息、依赖包和运行时脚本。

2. 项目的启动文件介绍

`main.js`

main.js 文件是 Electron 应用的入口点。在这个文件中，你需要实例化一个新的 Electron 窗口，并通过 webPreferences 设置启用 webviewTag，以便能够使用 Electron-Tabs。

示例代码：

const { app, BrowserWindow } = require('electron')
require('@electron/remote/main').initialize()

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: process.env.ELECTRON_PRELOAD_URL,
      webviewTag: true
    }
  })

  mainWindow.loadFile('./mainWindow.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

`mainWindow.html`

mainWindow.html 文件包含了初始化 electron-tabs 的JavaScript代码。例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron-Tabs 示例</title>
  <link rel="stylesheet" href="node_modules/@brrd/electron-tabs/dist/index.css">
</head>
<body>
  <div id="tabs"></div>

  <script src="node_modules/@brrd/electron-tabs/dist/index.min.js"></script>
  <script>
    const ETabs = require('@brrd/electron-tabs');
    
    const tabs = new ETabs(document.getElementById('tabs'), {
      /* 配置选项 */
    });

    // 添加标签页
    tabs.addTab({ title: '标签页1', src: './tab.html' });
    tabs.addTab({ title: '标签页2', src: './tab.html' });
  </script>
</body>
</html>

3. 项目的配置文件介绍

package.json 文件包含项目的基本信息以及依赖项。以下是一个基本的例子：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "A sample Electron application using Electron-Tabs",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "@brrd/electron-tabs": "^0.14.0",
    "electron": "^17.x.x"
  },
  "devDependencies": {}
}

这里的 scripts.start 指定了如何启动应用程序，而 dependencies 列出了必需的库，包括 @brrd/electron-tabs 和 electron。

要启动项目，只需在终端中运行 npm start。这样就会执行 package.json 中指定的 start 脚本，启动 Electron 应用。

electron-tabs

Tab component for Electron

项目地址：https://gitcode.com/gh_mirrors/el/electron-tabs

登录后查看全文

【亲测免费】 Electron-Tabs 使用教程

1. 项目目录结构及介绍

2. 项目的启动文件介绍

main.js

mainWindow.html

3. 项目的配置文件介绍

项目优选

`main.js`

`mainWindow.html`