Los jefes tuvieron una idea repentina de empaquetar un sistema backend de administración existente en una aplicación instalable de escritorio. En ese momento, se me ocurrieron dos soluciones, Electron o Webview de Flutter para empaquetar la aplicación. Hablando relativamente, si estoy familiarizado con Electron, "Daría prioridad. Consideré usar Electron y, por supuesto, más tarde también usé Flutter para implementar una versión. El efecto no fue muy diferente. Primero echemos un vistazo a cómo lo implementó Electron.
Preparación
Proyecto de inicialización
Cree una nueva carpeta de proyecto electron-app. Recuerde cambiar la ruta al directorio electron-app en la ventana de línea de comando y ejecutar el comando de inicialización.
shell复制代码npm init -y
La estructura de archivos más reciente debe ser la siguiente, con un archivo package.json adicional.
markdown复制代码- electron-app
- package.json
Abra package.json con un editor
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Preste especial atención a la configuración "principal" interna. Esta configuración apunta a la entrada del proyecto. El archivo correspondiente actualmente es index.js, pero aún no existe en nuestro proyecto, así que cree uno nuevo.
markdown复制代码- electron-app
- index.js
- package.json
Complete el archivo index.js con el siguiente contenido:
js复制代码// index.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
})
// 全屏
win.maximize()
// 载入网页链接
win.loadURL('https://www.jd.com/')
}
// 应用程序准备好后加载窗口
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
En el código anterior, solo necesitamos prestar atención al contenido en createWindow. El método createWindow usa BrowserWindow para crear una ventana de aplicación y cargar un enlace web (página de inicio de JD). Normalmente, deberíamos ver un escritorio JD después de iniciar el programa. .Aplicado.
Instalar dependencias en electron y @electron-forge/cli
css复制代码npm install --save-dev electron @electron-forge/cli
Una vez completada la instalación, continúe modificando la configuración de los scripts en package.json, elimine el contenido original y agregue una configuración de inicio. El comando de inicio de electron-forge solo se puede usar después de instalar @ electron-forge/cli, similar a @vue/cli
json复制代码"scripts": {
"start": "electron-forge start"
},
puesta en marcha
shell复制代码npm run start
Ya terminaste. Felicitaciones, has aprendido a desarrollar aplicaciones de escritorio. Solo necesitas reemplazar el enlace de win.loadURL('https://www.jd.com/') con el enlace que deseas.
Aunque el proyecto está en marcha, todavía tenemos varios problemas que resolver.
- El icono en la esquina superior izquierda del proyecto está mal
- ¿Cómo empaquetarlo en un paquete de instalación exe?
Modificar ICONO
El ícono debe dividirse en dos partes. Uno es el ícono en la esquina superior izquierda de la ventana abierta y el otro es el ícono instalado en el escritorio. Hablaremos sobre el ícono instalado más adelante. Modifiquemos la esquina superior izquierda. primero.
Es muy sencillo, simplemente modifica la configuración de iconos de BrowserWindow.
js复制代码// index.js
// 创建浏览器窗口
const win = new BrowserWindow({
autoHideMenuBar: true,
// 左上角的图标
icon: './images/logo.png',
})
No olvides crear una nueva carpeta de imágenes en el directorio raíz y poner una imagen llamada logo.png.
Paquete de instalación del paquete exe
Usamos el paquete de herramientas electron-builder para crear el paquete de instalación exe.El comando de instalación es el siguiente.
css复制代码npm install --save-dev electron-builder
Modifique package.json y agregue un comando de scripts y cree la configuración.
json复制代码{
"name": "electron-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "electron-forge start",
"build": "electron-builder --win" // 打包命令
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^6.2.1",
"electron": "^25.4.0",
"electron-builder": "^24.6.3"
},
// `electron-builder`配置
"build": {
"productName": "我的应用", // 安装应用后桌面名称
"directories": {
"output": "out" // 输出的文件目录
},
"win": {
"icon": "./ico/logo.ico", // 安装的图标
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./ico/logo.ico",
"uninstallerIcon": "./ico/logo.ico",
"installerHeaderIcon": "./ico/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "我的应用"
}
}
}
Tenga en cuenta que los archivos json no pueden tener comentarios. Recuerde eliminar los comentarios después de copiar el texto anterior.
Todos los íconos anteriores apuntan a un archivo ./ico/logo.ico. El ícono ico es en realidad una colección de imágenes en diferentes formatos, que se utilizan para adaptarse a diferentes tamaños de pantalla. Por supuesto, no lo ampliaremos aquí. Primero obtenga un archivo logo.ico para implementar un paquete instalable.
Puede usar la palabra clave de Baidu "convertir png a ico" y aparecerán un montón de sitios web de conversión en línea. Yo uso [Convertio - File Converter] (https://convertio.co/zh/) y descarto el logotipo. png Ingrese y conviértalo en un archivo logo.ico. Después de descargar el archivo, recuerde colocarlo en el directorio ico.
Empezar a empacar
arduino复制代码npm run build
Una vez completado, vea el directorio de salida.
Bienvenido a discutir más usos del electrón.