¿Qué es el electrón?
Electron es un marco para crear aplicaciones de escritorio utilizando JavaScript, HTML y CSS. Incrustar Chromium y Node.js en el binario de Electron le permite mantener una base de código JavaScript y crear aplicaciones multiplataforma que se ejecutan en Windows macOS y Linux.
Ejemplo de ejecución de Electron Fiddle
Electron Fiddle es un programa de espacio aislado desarrollado por Electron y respaldado por sus mantenedores. Recomendamos encarecidamente instalarlo como herramienta de aprendizaje para experimentar con las API de Electron o las funciones de creación de prototipos durante el desarrollo.
entorno de creación de andamios
mkdir my-electron-app && cd my-electron-app
npm init
paquete.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
Descargar Electron.js
Dirección del almacén de Electron.js Github: https://github.com/electron/electron/releases
Para instalar npm install electron, debe abrir el acelerador (pro-test)
npm install --save-dev electron
Errores como ELIFECYCLE, EAI_AGAIN, ECONNRESET y ETIMEDOUT durante las descargas son signos de este tipo de problemas de red.
En redes más lentas, es mejor usar --verbosela bandera para mostrar el progreso de la descarga:
npm install --verbose electron
ejecutar el proceso principal
El punto de entrada a cualquier aplicación de Electron es el archivo principal. Este archivo controla el proceso principal, que se ejecuta en un entorno Node.js completo, y es responsable de controlar el ciclo de vida de su aplicación, mostrar la interfaz de usuario nativa, realizar operaciones especiales y administrar el proceso de renderizado.
Durante la ejecución, Electron buscará este archivo de acuerdo con el valor configurado en el campo principal de la configuración del paquete.json en la aplicación, que deberías haber configurado en el paso de scaffolding de la aplicación.
Para inicializar este archivo principal, cree un archivo vacío llamado main.js en la raíz de su proyecto.
Introducir el paquete de entorno electrónico en main.js
const {
app, BrowserWindow } = require('electron')
Configure el script de inicio para que se ejecute de acuerdo con package.json:npm run start
"scripts": {
"start": "electron-forge start",
}
Crear páginas HTML
Antes de que podamos crear una ventana para nuestra aplicación, necesitamos crear el contenido cargado en esa ventana. En Electron, el contenido que se muestra en cada ventana puede ser un archivo HTML local o una URL remota.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
</body>
</html>
La ventana carga la página HTML.
Ahora que tiene una página, cárguela en la ventana de la aplicación. Para hacer esto, necesitará dos módulos Electron:
app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序 窗口。
Dado que el proceso principal ejecuta Node.js, puedes importarlos como módulos CommonJS en la parte superior del archivo main.js:
const {
app, BrowserWindow } = require('electron')
Agregue createWindow()un método para cargar index.html en una nueva instancia de BrowserWindow.
const createWindow = () => {
const win = new BrowserWindow({
width: 800, height: 600
})
win.loadFile('index.html')
}
Llame a la función createWindow() para abrir su ventana
En Electron, la ventana del navegador se crea solo después de que se activa el evento listo del módulo de la aplicación. Puede escuchar este evento utilizando la API app.whenReady(). whenReady()Llame a createWindow() en caso de éxito .
app.whenReady().then(() => {
createWindow() })
ciclo de vida de la ventana
Salga de la aplicación cuando todas las ventanas estén cerradas (Windows y Linux)
En Windows y Linux, al cerrar todas las ventanas generalmente se cierra la aplicación por completo.
Para hacer esto, debe escuchar el evento "ventana completamente cerrada" del módulo de la aplicación. Si el usuario no está ejecutando el programa en macOS (darwin), llame a app.quit().
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
procesos.plataforma valores posibles
'aix' 'darwin' 'freebsd' 'linux' 'openbsd' 'sunos' 'win32'
precargar script
Acceda a Node.js desde el renderizador mediante scripts precargados.
Ahora, lo último que debe hacer es enviar el número de versión de Electron y sus dependencias a su página web.
Es trivial acceder a esta información en el proceso principal a través del objeto de proceso global de Node. Sin embargo, no puede editar el DOM directamente en el proceso principal porque no tiene acceso al contexto del documento del renderizador. ¡Existen en procesos completamente diferentes!
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${
dependency}-version`, process.versions[dependency])
}
})
Para agregar este script al proceso de renderizado, pase el script de precarga en la ruta a la opción webPreferences.preload en su constructor BrowserWindow existente.
const {
app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
Para cualquier interacción con su contenido web, desea agregar scripts a su proceso de renderizado. Dado que el renderizador se ejecuta en el entorno web normal, puede agregar un
<script src="./renderer.js"></script>
depuración de ventana abierta
de acuerdo a:shift + ctrl + i
modelo de proceso
Para resolver este problema, el equipo de Chrome decidió hacer que cada pestaña se representara en su propio proceso, limitando así el daño que el código incorrecto o malicioso en una página web podría causar a toda la aplicación. Luego, un único proceso del navegador controla estos procesos de pestañas, así como todo el ciclo de vida de la aplicación. El siguiente diagrama de los cómics de Chrome visualiza este modelo:
Arquitectura multiproceso de Chrome
Las aplicaciones electrónicas están estructuradas de manera muy similar. Como desarrollador de aplicaciones, controlará dos tipos de procesos: el proceso principal y el proceso de renderizado. Esto es similar a los procesos del navegador y del renderizador de Chrome descritos anteriormente.
El proceso principal Hilo principal
Cada aplicación de Electron tiene un único proceso principal, que sirve como punto de entrada a la aplicación. El proceso principal se ejecuta en un entorno Node.js, lo que significa que tiene la capacidad de requerir módulos y utilizar todas las API de Node.js.
Gestión de ventanas
El objetivo principal del proceso principal es crear y gestionar ventanas de aplicaciones utilizando el módulo BrowserWindow.
Cada instancia de la clase BrowserWindow crea una ventana de aplicación y carga una página web en un proceso de representación independiente. Puede interactuar con el contenido web desde el proceso principal utilizando el objeto webContent de la ventana.
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
width: 800, height: 1500 })
win.loadURL('https://github.com')
const contents = win.webContents
console.log(contents)
Nota: Los procesos de renderizado también se crean para incrustaciones web, como el módulo BrowserView. El contenido web incrustado también tiene acceso al objeto webContents.
Dado que el módulo BrowserWindow es un EventEmitter, también puede agregar controladores para varios eventos de usuario (como minimizar o maximizar su ventana).
Cuando se destruye una instancia de BrowserWindow, su proceso de representación correspondiente también finaliza.
API nativa
Para que las funciones de Electron no se limiten a encapsular contenido web, el proceso principal también agrega una API personalizada para interactuar con el sistema operativo del usuario. Electron tiene varios módulos que controlan la funcionalidad nativa del escritorio, como menús, cuadros de diálogo e íconos de bandeja.
proceso de renderizado
Cada aplicación de Electron genera un proceso de renderizado separado para cada ventana del navegador abierta. Como sugiere el nombre, el renderizador es responsable de renderizar el contenido web. De hecho, el código que se ejecuta en el proceso de renderizado debe cumplir con los estándares web (al menos en la medida en que se usa Chromium actualmente).
Por lo tanto, toda la interfaz de usuario y las funciones de la aplicación en una ventana del navegador deben escribirse utilizando las mismas herramientas y especificaciones que se utilizan en el desarrollo web.
Si bien explicar las especificaciones de cada página está fuera del alcance de esta guía, lo mínimo que necesita saber es:
以一个 HTML 文件作为渲染器进程的入口点。
使用层叠样式表 (Cascading Style Sheets, CSS) 对 UI 添加样式。
通过 <script> 元素可添加可执行的 JavaScript 代码。
Además, esto también significa que el renderizador no tiene acceso directo a require u otras API de Node.js. Para incluir módulos NPM directamente en el renderizador, debe utilizar las mismas herramientas de empaquetado que utiliza para el desarrollo web (por ejemplo, paquete web o paquete).
Para facilitar el desarrollo, se puede utilizar un entorno Node.js completo para generar un proceso de renderizado. Históricamente, esta era la opción predeterminada, pero por razones de seguridad se ha desactivado.
Precargar script de precarga
Los scripts de precarga incluyen código que se ejecuta en el proceso de renderizado y comienza a cargarse antes que el contenido de la página web. Aunque estos scripts se ejecutan en el entorno del renderizador, tienen más permisos porque pueden acceder a la API de Node.js.
Los scripts de precarga se pueden adjuntar al proceso principal en la opción webPreferences del constructor BrowserWindow.
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
webPreferences: {
preload: 'path/to/preload.js'
}
})
Debido a que el script de precarga comparte la misma interfaz global de Windows que el navegador y tiene acceso a la API de Node.js, mejora el renderizador al exponer API arbitrarias en la ventana global para que las utilice su contenido web.
Aunque el script de precarga y el renderizador al que está adjunto comparten un objeto de ventana global, no puede adjuntar ningún cambio directamente a la ventana desde él, porque contextIsolation es el valor predeterminado.
precarga.js
window.myAPI = {
desktop: true }
renderizador.js
console.log(window.myAPI)
aislamiento de contexto contextoAislamiento
El aislamiento de contexto significa que los scripts de precarga están aislados del entorno de ejecución principal del renderizador para evitar la filtración de API privilegiadas en el código de contenido web.
En su lugar, usaremos el módulo contextBridge para implementar interacciones de forma segura:
precarga.js
const {
contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
desktop: true
})
renderizador.js
console.log(window.myAPI)