Quelques petits problèmes rencontrés lors de la construction d'un projet Electron

1. Construire un projet Electron

1. Créer un dossier

mkdir electron-desktop

2. Entrez dans le dossier créé

cd electron-desktop

3. Exécutez la commande suivante :

yarn init -y
yarn add electron --dev

        La commande ci-dessus crée un projet vide qui contient un package.json et des dépendances installées dans le répertoire node_modules.

        Au cours du processus de création, j'ai également généré un fichier package-lock.json, ce qui m'a amené à signaler une erreur à la quatrième étape, et le message d'erreur m'a invité à supprimer le fichier :

 Après la suppression, l'erreur est toujours signalée lorsque la commande yarn add est exécutée à nouveau :

Après recherche, j'ai trouvé la solution de contournement suivante:

• Effacez d'abord le cache : npm cache clean --force
• Définissez la source du miroir : npm config set register https://registry.npm.taobao.org
• Si elle n'a pas été définie auparavant, définissez l'adresse miroir : npm config set disturl https://npm.taobao.org/dist
• Définir le miroir électronique : npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

La méthode ci-dessus provient de : l'article original du blogueur CSDN "Ming Tsai's Sunny Afternoon", le lien original : https://blog.csdn.net/qq_41785288/article/details/128323448

Vérifiez que l'installation a réussi :

• npx electron -v

成功后再次执行yarn add，

 2. Écrivez le projet de démarrage

1. Créez le répertoire src et continuez à créer les dossiers main et renderer dans ce répertoire :

        Il existe deux concepts importants dans Electron, le processus principal et le processus de rendu. Dans le processus principal, le code Node.js est utilisé pour appeler l'API encapsulée par Electron pour créer une fenêtre, gérer l'ensemble du cycle de vie de l'application et charger l'interface Web traditionnelle dans le processus de rendu :

• Le répertoire principal est utilisé pour stocker le code lié au processus principal
• Le répertoire de rendu est utilisé pour stocker les codes liés au rendu

2. Créez un fichier index.html dans le répertoire du moteur de rendu et écrivez le contenu du fichier en fonction de vos propres besoins

3. Créez index.js dans le répertoire principal comme entrée du processus principal et chargez le fichier index.html

const { app, BrowserWindow } = require('electron')
const path = require('path')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
})

4. Ajoutez la configuration dans le fichier package.json comme suit :

"main": "src/main/index.js",
"scripts": {
  "start": "electron ."
},

5. Exécutez le projet généré :

npm start

En cas de succès, l'application construite peut être ouverte sur le bureau.

La route est longue et longue, je vais chercher de haut en bas !