electron实现类似浏览器与vscode的多标签窗体开发笔记

electron实现类似浏览器与vscode的多标签窗体开发笔记

vscode就是基于electron开发，他的每一个编辑器就是一个broswerview，独立进程管理，今天我也来用electron实现一个类似vscode或浏览器的多tab标签独立船体新增删除切换效果。

看看效果

1、安装

mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --save-dev

2、main.js

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

let mainWindow;
let views = [];
let tabCount = 0;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  // 打开开发者工具
  // mainWindow.webContents.openDevTools();

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

  ipcMain.on('create-tab', (event, args) => {
    createTab(args.url);
  });

  ipcMain.on('switch-tab', (event, args) => {
    switchTab(args.index);
  });

  ipcMain.on('close-tab', (event, args) => {
    closeTab(args.index);
  });

  ipcMain.on('close-other-tabs', (event, args) => {
    closeOtherTabs(args.index);
  });

  ipcMain.on('file-dropped', (event, args) => {
    createTab(`file://${args.filePath}`);
  });
}

function createTab(url) {
  const view = new BrowserView({
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  
  mainWindow.addBrowserView(view);
  view.setBounds({ x: 0, y: 50, width: 800, height: 550 });
  view.webContents.loadURL(url);

  views.push(view);
  mainWindow.webContents.send('tab-created', { index: views.length - 1, url });
}

function switchTab(index) {
  const view = views[index];
  mainWindow.setBrowserView(view);
  view.setBounds({ x: 0, y: 50, width: 800, height: 550 });
}

function closeTab(index) {
  const view = views[index];
  mainWindow.removeBrowserView(view);
  view.webContents.destroy();
  views.splice(index, 1);

  // 更新索引并通知渲染进程更新
  mainWindow.webContents.send('tabs-updated', { views: views.map((_, idx) => idx) }...

点击查看剩余70%