Aperçu des exemples
Dans cette section, nous avons rassemblé un ensemble de guides pour les fonctionnalités courantes que vous pourriez vouloir implémenter dans votre application Electron. Chaque guide contient un exemple pratique avec une application minimale et autonome. La façon la plus simple d'exécuter ces exemples est d'utiliser après l'avoir téléchargé Electron Fiddle.
Une fois Fiddle installé, vous pouvez appuyer sur le bouton « Ouvrir dans Fiddle » que vous trouverez sous les exemples de code comme celui ci:
- 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>
Comment faire...?
Vous pouvez trouver une liste complète de « Comment faire? » dans la barre latérale. Si ce que vous désirez coder n'est pas documenté, veuillez nous le faire savoir sur notre serveur Discord !