Electron es un marco que utiliza tecnologías web (HTML, CSS y JS) para crear aplicaciones de escritorio multiplataforma.

Requisitos del sistema

Linux

  • Pitón versión 2.7.x. Se recomienda verificar su versión de Python ya que algunas distribuciones como CentOS 6.x todavía usan Python 2.6.x.

Mac

  • Pitón versión 2.7.x con soporte para TLS 1.2.
  • Xcode, el IDE para macOS, viene con las herramientas de desarrollo de software necesarias para firmar y compilar código nativo para macOS. Versión 8.2.1 o superior.

  • Soporte de RedHat Build

    • Cerveza casera, uno de los administradores de paquetes de macOS disponibles, se utiliza para instalar herramientas y dependencias adicionales. Se necesita Homebrew para instalar las dependencias de empaquetado de RPM. Paso de instalación de preparación
    • RPM, un administrador de paquetes estándar para múltiples distribuciones de Linux, es la herramienta que se utiliza para crear el paquete RPM de Linux. Para instalar esta herramienta, use lo siguiente Cerveza casera mando:
    brew installrpm

Ventanas

  • Pitón versión 2.7.10 o superior.
  • Potencia Shell, para usuarios de Windows 7, debe tener la versión 3.0 o superior para firma de aplicaciones.
  • Herramientas de depuración para Windows es un conjunto de herramientas para mejorar las capacidades de depuración. Se recomienda instalar con el SDK de Windows 10.0.15063.468.

Inicio rápido

Crear un proyecto

npm i -g cordova
cordova create sampleApp
cd sampleApp
cordova platform add electron

Aviso: si utiliza la CLI de Cordova antes de la versión 9.x, deberá utilizar el cordova-electron argumento en lugar de electron para cualquier comando que requiera el nombre de la plataforma. Por ejemplo:

cordova platform add cordova-electron
cordova run cordova-electron

Vista previa de un proyecto

No es necesario crear la aplicación Electron para obtener una vista previa. Dado que el proceso de construcción puede ser lento, se recomienda pasar el --nobuild marca para deshabilitar el proceso de compilación al obtener una vista previa.

cordova run electron --nobuild

Construir un proyecto

Depurar compilaciones

cordova build electron
cordova build electron --debug

Versión de compilaciones

cordova build electron --release

Personalización de las opciones de la ventana de la aplicación

Electron ofrece muchas opciones para manipular el BrowserWindow. Esta sección cubrirá cómo configurar algunas opciones básicas. Para obtener una lista completa de opciones, consulte la Documentos de Electron – Opciones de la ventana del navegador.

Al trabajar con un proyecto de Cordova, se recomienda crear un archivo de configuración de Electron dentro del directorio raíz del proyecto y establecer su ruta relativa en la opción de preferencia ElectronSettingsFilePath, en el config.xml expediente.

Ejemplo config.xml:

<platformname="electron"><preferencename="ElectronSettingsFilePath"value="res/electron/settings.json"/>platform>

Para anular o establecer cualquier opción de BrowserWindow, en este archivo las opciones se agregan al browserWindow propiedad.

Ejemplo res/electron/settings.json:

"browserWindow": ...

Cómo establecer el tamaño predeterminado de la ventana

Por defecto, el width se establece en 800 y el height ajustado a 600. Esto se puede anular configurando el width y height propiedad.

Ejemplo:

"browserWindow":"width":1024,"height":768

Cómo deshabilitar el tamaño de la ventana

Establecer el resizable flag, puede deshabilitar la capacidad del usuario para cambiar el tamaño de la ventana de su aplicación.

Ejemplo:

"browserWindow":"resizable":false

Cómo hacer que la ventana sea de pantalla completa

Utilizando el fullscreen flag, puede forzar que la aplicación se inicie en pantalla completa.

Ejemplo:

"browserWindow":"fullscreen":true

Cómo admitir las API de Node.js y Electron

Selecciona el nodeIntegration Marcar propiedad a true. De forma predeterminada, esta marca de propiedad se establece en false para admitir bibliotecas populares que insertan símbolos con los mismos nombres que Node.js y Electron ya usan.

Puede leer más sobre esto en Electron docs: No puedo usar jQuery / RequireJS / Meteor / AngularJS en Electron.

Ejemplo:

"browserWindow":"webPreferences":"nodeIntegration":false

Personalización del proceso principal del electrón

Si es necesario personalizar el proceso principal del Electron más allá del alcance de los ajustes de configuración del Electron, se pueden agregar oportunidades directamente al cdv-electron-main.js archivo ubicado en PROJECT_ROOT_DIR/platform/electron/platform_www/. Este es el proceso principal de la aplicación.

❗ Sin embargo, no se recomienda modificar este archivo como proceso de actualización para cordova-electron es eliminar la plataforma anterior antes de agregar la nueva versión.

DevTools

los --release y --debug Las banderas controlan la visibilidad de DevTools. DevTools se muestran de forma predeterminada en Depurar compilaciones (without a flag o con --debug). Si desea ocultar el pase de DevTools en el --release marca al construir o ejecutar la aplicación.

Nota: DevTools se puede cerrar o abrir manualmente con la compilación de depuración.

Construir configuraciones

Configuraciones de construcción predeterminadas

De forma predeterminada, sin configuración adicional, cordova build electron creará paquetes predeterminados para el sistema operativo (SO) host que activa el comando. A continuación, se muestra la lista de paquetes predeterminados para cada sistema operativo.

Linux

Paquete Arco
tar.gz x64

Mac

Paquete Arco
maldición x64
Código Postal x64

Ventanas

Paquete Arco
nsis x64

Personalización de configuraciones de construcción

Si por alguna razón desea personalizar las configuraciones de compilación, las modificaciones se colocan dentro del build.json archivo ubicado en el directorio raíz del proyecto. P.ej PROJECT_ROOT_DIR/build.json. Este archivo contiene todas las configuraciones de compilación para todas las plataformas (Android, Electron, iOS, Windows).

Ejemplo de estructura de configuración

"electron":

Dado que el marco de Electron es para crear aplicaciones multiplataforma, se requieren múltiples configuraciones para cada compilación de SO. los electron nodo, en el build.json archivo, contiene tres propiedades que separan las configuraciones de compilación para cada sistema operativo.

Ejemplo de estructura de configuración con cada plataforma

"electron":"linux":,"mac":,"windows":

Cada nodo del sistema operativo contiene propiedades que se utilizan para identificar qué paquete generar y cómo firmar.

Propiedades del sistema operativo:

  • package es una matriz de formatos de paquetes que se generarán.
  • arch es una serie de arquitecturas para las que se construye cada paquete.
  • signing es un objeto que contiene información de firma. Consulte Configuraciones de firma para obtener más información.

Cualquier propiedad que no esté definida volverá a los valores predeterminados.

Añadiendo un package

los package La propiedad es una lista de matriz de paquetes que se generarán. Si la propiedad está definida, los paquetes predeterminados no se utilizan a menos que se agreguen. El orden de los paquetes no tiene importancia.

El siguiente ejemplo de configuración generará tar.gz, dmg y zip paquetes para macOS.

"electron":"mac":"package":["dmg","tar.gz","zip"]

Paquetes disponibles por sistema operativo

Tipo de paquete Linux Mac OS Ventanas
defecto – dmg
zip		 –
maldición – ✅ –
mas – ✅ –
mas-dev ✅ – –
paquete – ✅ –
7z ✅ ✅ ✅
Código Postal ✅ ✅ ✅
tar.xz ✅ ✅ ✅
tar.lz ✅ ✅ ✅
tar.gz ✅ ✅ ✅
tar.bz2 ✅ ✅ ✅
dir ✅ ✅ ✅
nsis – – ✅
nsis-web – – ✅
portátil – – ✅
aprox. – – ✅ [1]
msi – – ✅
AppImage ✅ – –
quebrar ✅ – –
debutante ✅ – –
rpm ✅ – –
freebsd ✅ – –
pacman ✅ – –
p5p ✅ – –
apk ✅ – –
  • [1] Solo Windows 10 puede crear paquetes de AppX.

Configuración del paquete arch

los arch property es una lista de arreglos de arquitecturas para las que está construido cada paquete. Cuando se define la propiedad, el arco predeterminado no se usa a menos que se agregue.

❗ No todas las arquitecturas están disponibles para todos los sistemas operativos. Por favor revise el Liberaciones de electrones para identificar combinaciones válidas. Por ejemplo, macOS (Darwin) solo es compatible con x64.

Arco disponible

  • ia32
  • x64
  • armv71
  • arm64

El ejemplo anterior generará una x64dmg paquete.

"electron":"mac":"package":["dmg"],"arch":["x64"]

Soporte de compilación multiplataforma

❗ No todas las plataformas admiten esta función y pueden tener limitaciones.

Es posible construir para múltiples plataformas en un solo sistema operativo, pero tiene limitaciones. Se recomienda que el sistema operativo del constructor (SO host) coincida con la plataforma que se está construyendo.

La siguiente matriz muestra cada sistema operativo host y para qué plataformas son capaces de crear aplicaciones.

Anfitrión [1] Linux Mac Ventana
Linux ✅ ❗ [2]
Mac [3] ✅ ✅ ❗ [2]
Ventana ✅

Limitaciones:

El siguiente ejemplo habilita la compilación multiplataforma para todos los sistemas operativos y usa las configuraciones de compilación predeterminadas.

"electron":"linux":,"mac":,"windows":

Configuraciones de firma

Firma de macOS

Hay tres tipos de objetivos de firma. (debug, release, y store). Cada sección tiene lo siguiente propiedades:

llave descripción
derechos Valor de ruta de cadena al archivo de derechos.
derechos heredar Valor de ruta de cadena al archivo de derechos que hereda la configuración de seguridad.
identidad Valor de cadena del nombre del certificado.
requisitos Valor de ruta de cadena del archivo de requisitos.

❗ Esto no está disponible para mas (tienda) configuraciones de firma.
perfil de aprovisionamiento Valor de ruta de cadena del perfil de aprovisionamiento.

Configuración de ejemplo:

"electron":"mac":"package":["dmg","mas","mas-dev"],"signing":"release":"identity":"APACHE CORDOVA (TEAMID)","provisioningProfile":"release.mobileprovision"

Para la firma de macOS, existen algunas excepciones sobre cómo se usa la información de firma. De forma predeterminada, todos los paquetes a excepción de mas y mas-dev, utilizar el debug y release configuraciones de firma.

Usando la configuración de ejemplo anterior, repasemos algunos casos de uso para comprender mejor las excepciones.

Caso de uso 1:

cordova build electron --debug

El comando anterior:

  • Generar un dmg construir y mas-dev construir usando el debug configuraciones de firma.
  • Ignora el mas paquete de destino.

Caso de uso 2:

cordova build electron --release

El comando anterior:

  • Generar un dmg construir usando el release config.
  • Generar un mas construir usando el store config.
  • Ignora el mas-dev paquete de destino.

Firma de Windows

La información de firma se compone de dos tipos. (debug, release). Cada sección tiene las siguientes propiedades:

llave descripción
certificadoArchivo Ruta de cadena al archivo de certificado.
certificadoPassword Valor de cadena de la contraseña del archivo de certificado.

Alternativa: La contraseña se puede establecer en la variable de entorno CSC_KEY_PASSWORD.
certificateSubjectName Valor de cadena del asunto del certificado de firma.

❗ Requerido para la firma de código EV y requiere Windows
certificadoSha1 Valor de cadena del hash SHA1 del certificado de firma.

❗ Requiere Windows
FirmaHashAlgorithms Colección de algoritmos de canto a utilizar. (sha1, sha256)

❗ AppX solo admite compilaciones sha256
additionalCertificateFile Ruta de cadena a los archivos de certificado adicionales.

Configuración de ejemplo:

"electron":"windows":"package":["nsis"],"signing":"release":"certificateFile":"path_to_files","certificatePassword":"password"

Firma de Linux

No existen requisitos de firma para las compilaciones de Linux.

Complementos

Todos los complementos basados ​​en navegador se pueden utilizar con la plataforma Electron.

Al agregar un complemento, si el complemento admite tanto el electron y browser plataforma, la electron se utilizará una porción. Si el complemento falla electron pero contiene el browser implementación, recurrirá a la browser implementación.

Internamente, Electron está usando Chromium (Chrome) como su vista web. Algunos complementos pueden tener condiciones escritas específicamente para cada navegador diferente. En este caso, puede afectar el comportamiento de lo que se pretende. Dado que Electron puede admitir funciones que el navegador no admite, estos complementos posiblemente deban actualizarse para el electron plataforma.