Tutorial de Electron

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

Electron es un marco de código abierto diseñado específicamente para crear 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) + shell de aplicación de escritorio.

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

Antes de aprender Electron, basta con dominar estas cosas:

  • Conocer un pocoJavaScript。
  • Saber usarNode.jsynpmpara ejecutar scripts.
  • Entender algo 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 e interacción implementada con JavaScript. Electron es como empaquetar un navegador para que pueda ejecutarse de forma independiente, sin que el usuario tenga que abrirlo manualmente.

Componentes técnicos：

  • 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 llamar a funciones nativas del sistema operativo, como menús, diálogos, etc.

¿Por qué elegir Electron?

Ventajas de desarrollo

1. Stack tecnológico unificado

  • Desarrollo con tecnologías web familiares
  • Los desarrolladores front-end 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, puedes usar Chrome DevTools
  • Comunidad activa, resolución rápida de problemas

Ejemplo

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

En Electron, solo necesitas:

npm install electron

Crea 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á tu interfaz de 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