Resumen de ejemplos
En esta sección, hemos recolectado un conjunto de guías para las características comunes que puedes implementar en tu aplicación de Electron. Cada guía contiene un ejemplo práctico con una aplicación de ejemplo mínima e independiente. La manera más fácil de ejecutar estos ejemplos es descargando Electron Fiddle.
Una vez que Fiddle está instalado, puedes seleccionar el botón de "Abrir en Fiddle" que encontrarás debajo de los ejemplos de código como el siguiente:
- main.js
- preload.js
- index.html
const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</p>
</body>
</html>
¿Cómo se hace...?
Puedes encontrar el listado completo de "¿Cómo se hace?" en la barra lateral. Si hay algo que te gustará hacer y no está documentado, ¡por favor únete a nuestro servidor de Discord e infórmalo!