Annuaire d'articles
1. Objectifs
Apprenez l'exemple officiel et construisez HelloWorld étape par étape.
Comprendre la structure de base d'Electron.
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
2. Cadre du projet
Installez le fil.
Créez package.json.
Installez l'électron.
npm install --global yarn
yarn init -y
yarn add electron --dev
Créez un script de démarrage.
"scripts": {
"start": "electron ."
}
L'exécution du script devrait donner une erreur.
Parce qu'il n'y a pas d'entrée js.
3. Cas d'introduction
Créez index.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>
Dans le répertoire principal, créez 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()
})
Remplacez l'entrée de package.json par main.js.
"main": "main.js",
Démarrez le scénario.
4. Améliorer certains détails
Quitter après avoir fermé toutes les fenêtres
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
Ouvrir une fenêtre au démarrage (compatible)
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
5. Précharge
(Être ajouté)
6. Générer un exe
Outils : https://www.electronforge.io/
Il s'agit d'un outil de processus complet, donc la prochaine fois, vous pourrez l'utiliser pour créer directement ElectronApp.
yarn add --dev @electron-forge/cli
yarn electron-forge import
npx run make
Effet:
exe dans le dossier de sortie.
7. Construction rapide
Il existe de nombreuses façons de construire rapidement, je choisis celle qui contient l'exe, Electron Forge.
yarn create electron-app my-app
Outils complets :
Il existe également des outils de débogage pendant le développement :
