Cómo crear aplicaciones Electron en Webpack
Este artículo presenta principalmente el uso práctico de Webpack para crear aplicaciones Electron. Ahora lo comparto contigo y te doy una referencia.
Electron le permite utilizar tecnología de desarrollo web para desarrollar aplicaciones de escritorio multiplataforma. Está dirigido por Github y es de código abierto. Los conocidos editores Atom y VSCode se desarrollan con Electron.
Electron es una combinación de Node.js y el navegador Chromium. Utiliza la página web que muestra el navegador Chromium como GUI de la aplicación e interactúa con el sistema operativo a través de Node.js. Cuando opera en una ventana de una aplicación de Electron, en realidad está operando en una página web. Cuando su operación deba completarse a través del sistema operativo, la página web interactuará con el sistema operativo a través de Node.js.
Las ventajas de desarrollar aplicaciones de escritorio de esta manera son:
Al reducir el umbral de desarrollo, solo necesita dominar la tecnología de desarrollo web y Node.js. Una gran cantidad de tecnologías de desarrollo web. y la biblioteca lista para usar se puede reutilizar en Electron;
Dado que el navegador Chromium y Node.js son multiplataforma, Electron puede escribir un código para ejecutarlo en diferentes sistemas operativos.
Cuando se ejecuta una aplicación Electron, comienza iniciando un proceso principal. El inicio del proceso principal se logra ejecutando un archivo JavaScript de entrada a través de Node.js. El contenido de este archivo de entrada main.js es el siguiente:
const { app, BrowserWindow } = require('electron). ')
// Mantenga una referencia global al objeto de ventana. Si no hace esto,
// Cuando el objeto JavaScript se recolecte como basura, la ventana se abrirá automáticamente. cerrado
dejar ganar
//Abrir la ventana principal
función createWindow() {
// Crear una ventana del navegador
win = new BrowserWindow ({ ancho: 800, alto: 600 })
// Carga el index.html de la aplicación
const indexPageURL = `file:// ${__dirname}/dist/index. html`;
win.loadURL(indexPageURL);
// Cuando se cierre la ventana, se activará este evento
win.on('closed' , () => {
// Elimina la referencia del objeto de ventana
win = null
})
}
// Electron llamará a esta función al crear la ventana del navegador.
app.on('ready', createWindow)
//Salir cuando todas las ventanas estén cerradas
app.on('window-all-closed' , () => {
// En macOS, la mayoría de las aplicaciones permanecerán activas a menos que el usuario salga explícitamente con Cmd + Q
// La mayoría de las aplicaciones permanecerán activas
if (process.platform !== 'darwin') {
app.quit()
}
}) Después del proceso principal es iniciado, siempre residiendo en segundo plano y ejecutándose, la ventana que ve y opera no es el proceso principal, sino un subproceso de ventana recién iniciado por el proceso principal.
La aplicación tiene una serie de eventos del ciclo de vida desde el inicio hasta la salida. La función electron.app.on() se utiliza para monitorear los eventos del ciclo de vida y reaccionar en momentos específicos. Por ejemplo, utilice BrowserWindow para mostrar la ventana principal de la aplicación en el evento app.on('ready').
La ventana que se inicia es en realidad una página web y cargará la dirección de la página web pasada en loadURL cuando se inicia. Cada ventana es un proceso de página web independiente y la comunicación entre ventanas requiere el uso del proceso principal para pasar mensajes.
En general, desarrollar aplicaciones de Electron es muy similar a desarrollar aplicaciones web. La diferencia es que el entorno operativo de Electron tiene un navegador integrado y API de Node.js al desarrollar páginas web. API proporcionadas por el navegador. Además, también puede utilizar la API proporcionada por Node.js.
Conéctese a Webpack
A continuación, cree una aplicación Electron simple. Es necesario mostrar una ventana principal después de iniciar la aplicación. Hay un botón en la ventana principal. para mostrar una nueva ventana Una ventana y usar React para desarrollar páginas web.
Dado que cada ventana de la aplicación Electron corresponde a una página web, es necesario desarrollar dos páginas web, a saber, index.html de la ventana principal y login.html de la ventana recién abierta. En otras palabras, el proyecto consta de 2 aplicaciones de una sola página, que es muy similar al proyecto de 3-10 Gestión de múltiples aplicaciones de una sola página. Transformémoslo en una aplicación de Electron.
Las áreas que deben cambiarse son las siguientes:
Cree un nuevo archivo de entrada main.js para el proceso principal en el directorio raíz del proyecto, con un contenido consistente con lo anterior. ;
El código de la página web de la ventana principal es el siguiente:
importar React, { Component } de 'react';
importar { render } de 'react-dom';
importar { remoto } desde 'electrón';
importar ruta desde 'ruta';
importar './index.css ';
clase Aplicación extiende Componente {
// Cuando se hace clic en el botón
handleBtnClick() {
// dirección URI de la página correspondiente a la nueva ventana
const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
// El tamaño de la nueva ventana
let win = new remoto.BrowserWindow({ ancho: 400, alto: 320 })
win.on(' close', function () {
// La ventana se cierra Borrar recursos
win = null
})
// Cargar página web
win.loadURL(modalPath)
// Ventana de visualización
win.show()
}
render() {
return (
Índice de página
)
}
}
render(
Se ha modificado el código de la parte de la página. A continuación, se modificará el código de construcción. Aquí se deben realizar los siguientes puntos en la construcción:
Construya dos páginas web que se puedan ejecutar en el navegador, correspondientes a las interfaces de las dos ventanas;
Porque JavaScript código en la página web Puede haber llamadas a módulos nativos de Node.js o módulos electrónicos, es decir, el código de salida depende de estos módulos. Sin embargo, dado que estos módulos tienen soporte integrado, el código creado no puede empaquetar estos módulos.
Es muy sencillo completar los requisitos anteriores porque Webpack tiene soporte integrado para Electron. Solo necesita agregar una línea de código al archivo de configuración de Webpack, de la siguiente manera:
target: 'electron-renderer', esta configuración se mencionó en 2-7 Otros elementos de configuración-Target, lo que significa Let Webpack crea el código JavaScript para el proceso de renderizado de Electron, que es el código de página web requerido por estas dos ventanas.
Una vez completadas las modificaciones anteriores, vuelva a ejecutar la compilación del paquete web y los códigos necesarios para las páginas web correspondientes se enviarán al directorio dist en el directorio raíz del proyecto.
Para ejecutarse como una aplicación de Electron, necesita instalar nuevas dependencias:
# Instale el entorno de ejecución de Electron en el proyecto
npm i -D electron se instaló correctamente Luego ejecute electron en el directorio del proyecto. Podrá ver con éxito la aplicación de escritorio iniciada. El efecto se muestra a continuación:
Lo anterior es lo que compilé para todos. será útil para todos en el futuro.
Artículos relacionados:
Cómo vue+springboot implementa problemas entre dominios de inicio de sesión único (tutorial detallado)
En vue, el desplazamiento devuelve la página y recuerda la posición de desplazamiento Cómo implementar
Cómo ver una copia profunda en vue
Cómo implementar cookies de lectura y escritura en JavaScript
Cómo implementar múltiples archivos en Descargar el subprograma WeChat