Directorio de artículos
1. Metas
Aprende el ejemplo oficial y crea HelloWorld paso a paso.
Comprender la estructura básica de Electron.
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
2. Marco del proyecto
Instalar hilo.
Crear paquete.json.
Instalar electrón.
npm install --global yarn
yarn init -y
yarn add electron --dev
Cree un script de inicio.
"scripts": {
"start": "electron ."
}
Ejecutar el script debería dar un error.
Porque no hay entrada js.
3. Caso introductorio
Crear índice.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
En el directorio principal, cree main.js.
const {
app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('./src/index.html')
}
app.whenReady().then(() => {
createWindow()
})
Cambie la entrada en package.json a main.js.
"main": "main.js",
Inicie el guión.
4. Mejora algunos detalles
Salir después de cerrar todas las ventanas
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
Abrir una ventana al inicio (compatible)
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
5. Precarga
(Para ser agregado)
6. Generar exe
Herramientas: https://www.electronforge.io/
Esta es una herramienta de proceso completo, por lo que la próxima vez puede usarla para crear ElectronApp directamente.
yarn add --dev @electron-forge/cli
yarn electron-forge import
npx run make
Efecto:
exe en la carpeta de salida.
7. Construcción rápida
Hay muchas formas de compilar rápidamente, elijo la que incluye el exe, Electron Forge.
yarn create electron-app my-app
Herramientas completas:
También hay herramientas de depuración durante el desarrollo:
