Tutorial de Electron

Electron (originalmente llamado Atom Shell) es un framework de desarrollo de aplicaciones de escritorio multiplataforma y de código abierto desarrollado por GitHub.

Electron es un framework de código abierto diseñado específicamente para construir aplicaciones de escritorio multiplataforma utilizando tecnologías web (HTML, CSS y JavaScript).

Electron nos permite escribir aplicaciones de escritorio como si fueran páginas web, como archivos .exe en Windows, .app en macOS y ejecutables en Linux.

Electron = Chromium (motor del navegador) + Node.js (capacidades de backend) + caparazón de aplicación de escritorio.

¿Qué conocimientos básicos se necesitan para aprender Electron?

Antes de aprender Electron, es suficiente con dominar estas cosas:

  • Conocer un poco deJavaScript。
  • Saber usarNode.jsynpmpara ejecutar scripts.
  • Entender un poco deHTMLy selectores(por ejemplo#id、.class）；
  • Poder usar la terminalpara ejecutar comandos.

Conceptos clave

Imagina que, cuando normalmente usas un navegador para visitar sitios web, ves páginas construidas con HTML, estilos embellecidos con CSS y funcionalidades interactivas implementadas con JavaScript. Electron es como empaquetar un navegador para que pueda ejecutarse de forma independiente, sin necesidad de que el usuario abra manualmente un navegador.

Composición técnica：

  • Chromium: proporciona el motor de renderizado de páginas, asegurando que la interfaz de tu aplicación se muestre correctamente
  • Node.js: proporciona API a nivel de sistema, permitiéndote acceder a funciones de bajo nivel como el sistema de archivos y la red
  • Native APIs: permite invocar funcionalidades nativas del sistema operativo, como menús, diálogos, etc.

¿Por qué elegir Electron?

Ventajas de desarrollo

1. Pila tecnológica unificada

  • Desarrollo con tecnologías web familiares
  • Los desarrolladores frontend pueden empezar rápidamente
  • Amplios recursos del ecosistema web disponibles

2. Soporte multiplataforma

  • Desarrolla una vez, ejecuta en múltiples plataformas
  • Compatible con Windows, macOS y Linux
  • La interfaz y las funciones se mantienen consistentes en diferentes sistemas

3. Alta eficiencia de desarrollo

  • Función de recarga en caliente, vista previa en tiempo real de los cambios
  • Herramientas de depuración completas, se pueden usar Chrome DevTools
  • Comunidad activa, resolución rápida de problemas

Ejemplo

Supongamos que queremos hacer una aplicación de bloc de notas.

En Electron, solo necesitas:

npm install electron

Crear un archivo main.js:

Ejemplo

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

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  win.loadFile('index.html'); // Aquí está la interfaz de tu página web
});

Luego index.html es una página web normal:

Ejemplo

<h1>Mi bloc de notas de escritorio</h1>
<textarea></textarea>

Ejecutar:

npx electron .

¡Así nuestra página web se convierte en una aplicación de escritorio!

Recursos de referencia

Otras extensiones