← Volver

Recomendaciones Electron

Publicado el 13 de diciembre de 2025

Electron

Clonar proyecto minimal de GitHub:

git clone https://github.com/electron/minimal-repro

Cargar ventana cuando este listo:

 mainWindow.once("ready-to-show", () => {
    mainWindow.show();
  });

Monitorizar cambios:

sudo npm install --save-dev nodemon
  "scripts": {
    "start": "nodemon --watch . --ext js,html,css --exec electron ."
  },

Mostrar ventana sin frame:

  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 700,
    backgroundColor: "aqua",
    show: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    resizable: false,
    frame: false,
  })

Hacer ventana draggable:

body{
    -webkit-app-region: drag;
}

Hacer pantalla completa:

  setTimeout(()=> {
      mainWindow.setFullScreen(true);
    },1000);

Setear tamaño y posición:

  mainWindow.setSize(600, 400);
  mainWindow.setPosition(100, 100);

Ventana modal:

  const modal = new BrowserWindow({
    width: 400,
    height: 300,
    parent: mainWindow,
    modal: true,
    show: false,
  })

Seleccionar opciones al cerrar ventana:

  mainWindow.on("close", (event) => {
    const choice = dialog.showMessageBoxSync(mainWindow, {
      type: "question",
      buttons: ["Cancel", "Close"],
      message: "Are you sure you want to quit?",
    });

    if (choice === 0) {
      event.preventDefault();
    }
  });

Eventos de ventana:

  mainWindow.on("closed", () => {
    console.log("Closed window");
  });

  mainWindow.on("focus", () => {
    console.log("Focus window");
  });

  mainWindow.on("blur", () => {
    console.log("Blur window");
  });
  
  mainWindow.on("resize", () => {
    console.log("Window resized!");
  });
  
  mainWindow.on("move", () => {
    console.log("Window moved");
  });

Eventos de app:

app.on("window-all-closed", function () {
  console.log("Window all closed event triggered");
  if (process.platform !== "darwin") app.quit();
});

app.on("before-quit", () => {
  console.log("Before quit event is triggered.");
});

app.on("will-quit", () => {
  console.log("Will quit event is triggered.");
});