Cómo empaquetar una página web en una aplicación de escritorio (página frontal web
Con el auge de HTML5 y el dominio de JavaScript, una tecnología llamada multiplataforma se está volviendo cada vez más popular. ¿Por qué es tan popular? Debido a que los desarrolladores de software solo necesitan escribir el programa una vez, se puede ejecutar en Windows, Linux, Mac, IOS, Android y otras plataformas, lo que reduce en gran medida la carga de trabajo de los programadores y permite que los productos de la empresa se iteren rápidamente. La tecnología multiplataforma alguna vez no se consideró prometedora, pero ahora se está desarrollando rápidamente con el desarrollo de los teléfonos móviles y el hardware informático. Todo esto está casi impulsado por la tecnología HTML5. Por supuesto, el lenguaje JavaScript es el que más contribuye.
Las tecnologías multiplataforma más conocidas basadas en HTML5 incluyen PhoneGap y Cordova, que se utilizan a menudo para desarrollar aplicaciones web, también están Egret, Cocos-creator, Unity, etc., que se utilizan a menudo para desarrollar aplicaciones web. desarrollar juegos; y también están nw.js basado en Node.js, utilizado para desarrollar aplicaciones de escritorio, y Electron, un artefacto que es más potente que nw.js para desarrollar aplicaciones de escritorio utilizando tecnología web.
En realidad, todo lo anterior es una tontería, ahora vayamos al tema: ¡Cómo usar Electron para empaquetar páginas web en archivos ejecutables exe!
Supuestos:
1. Ha instalado y configurado node.js (instalación global)
2. Ha instalado electron mediante la instalación npm (instalación global). )
3. Ya ha escrito la página web front-end (html, css, javascript, etc., o la página web escrita en base al marco front-end)
4. Consulte los tres puntos anteriores. Si no comprende, vaya rápidamente a Baidu. . .
Si tiene las suposiciones anteriores, continúe leyendo:
1. Busque la carpeta del proyecto de su página web front-end y cree nuevos package.json, main.js e index. html tres archivos (nota: index.html entre ellos está la página de inicio de su página web)
El directorio de su proyecto/
├── paquete.json
├── main.js
└── index.html
2 Agregue el siguiente contenido a package.json
{
"nombre": "nombre-aplicación",
"versión": "0.1.0",
"main": "main.js"}
3. Agregue el siguiente contenido a main.js. Este archivo main.js es el valor de la clave "principal" en package.json anterior, por lo que puede modificarse según sea necesario
const {app , BrowserWindow } = require('electron')const path = require('path')const url = require('url')// Mantenga una referencia global del objeto de la ventana; si no lo hace, la ventana // se cerrará automáticamente cuando el objeto JavaScript se recoja como basura. let winfunction createWindow () {
// Crea la ventana del navegador.
win = new BrowserWindow({width: 800, height: 600} )
// y carga el index.html de la aplicación.
win.loadURL(url.format({
pathname： path.join (__dirname, 'index.html'),
protocolo: 'archivo:',
barras diagonales: verdadero
}))
/ / Abre DevTools.
// win.webContents.openDevTools()
// Emitido cuando la ventana está cerrada.
win.on( 'closed ', () =gt; {
// Elimina la referencia al objeto de ventana, normalmente almacenarías windows
// en una matriz si tu aplicación admite múltiples ventanas, esto es el momento
// en el que debes eliminar el elemento correspondiente.
win = null
})}// Este método se llamará cuando Electron haya terminado /
/ inicialización y está listo para crear ventanas del navegador.// Algunas API solo se pueden usar después de que ocurra este evento.app.on('ready', createWindow)// Salir cuando todas las ventanas estén cerradas.app.on('window-all -closed', () =gt; {
// En macOS es común que las aplicaciones y su barra de menú
// permanezcan activas hasta que el usuario salga explícitamente con Cmd Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () =gt; {
// En macOS es común volver a crear una ventana en la aplicación cuando
// se hace clic en el ícono del Dock y no hay otras ventanas abiertas. .
if (win === null) {
createWindow()
}})// En este archivo puedes incluir el resto de tu aplicación. proceso principal específico // código. También puede colocarlos en archivos separados y solicitarlos aquí.
4. Si el nombre del archivo de la página de inicio de su página web no es "index.html", agréguelo. main.js Cambie 'index.html' por el nombre de la página de inicio de su página web
5. Abra DOS, cd al directorio de su proyecto (o mueva directamente el botón derecho del mouse a un espacio en blanco en su proyecto). directorio, luego haga clic aquí para abrir la ventana de comandos. Si no puede entender esto, por desgracia, chico Baidu)
6 En DOS en el paso anterior, ingrese ?npm install electron-packager -g para. instalar el nuestro globalmente Empaquetado artefacto
npm?install?electron-packager?-g
7 Después de instalar el empaquetado artefacto, aún en el DOS del paso anterior, ingresa ?electron- aplicación packager - -win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules para comenzar a empaquetar
electron-packager app --win --out. presenterTool -- arch=x64
--version 1.4.14 --overwrite --ignore=node_modules
¿Qué significa este comando? La parte azul la puede modificar usted mismo:
electron-packager.?¿El nombre del archivo ejecutable?-
-win --out? ¿Nombre de la carpeta empaquetada? --arch=x64 bit o 32 bit? --¿número de versión? --overwrite=node_modules
8. Se generará una nueva carpeta, haga clic en ella, busque el archivo exe, haga doble clic en él y verá que la página web se convierte en una aplicación de escritorio.
Lo anterior es el método de empaquetado más simple. En cuanto a cómo modificar el tamaño de la ventana, cómo agregar una barra de menú, cómo llamar a la API del sistema, etc., estudiaré lentamente Electron por usted.
Si tu empaquetado siempre falla y te resulta molesto, y no tienes requisitos para funciones extendidas,
Hay una página index.html que he pasado con el contenido de Hola y mundo. El marco Electron está empaquetado como una aplicación de escritorio en el entorno de Windows.
Ahora simplemente copie su proyecto front-end web en el directorio /resources/app/project, haga doble clic en el archivo exe para ejecutar su página web como una aplicación de escritorio.