Comment créer des applications Electron dans Webpack

Cet article présente principalement la construction réelle des applications Electron avec Webpack. Maintenant, je le partage avec vous et vous donne une référence.

Electron vous permet d'utiliser la technologie de développement Web pour développer des applications de bureau multiplateformes. Il est dirigé par Github et est open source. Les éditeurs Atom et VSCode familiers sont développés à l'aide d'Electron.

Electron est une combinaison de Node.js et du navigateur Chromium. Il utilise la page Web affichée par le navigateur Chromium comme interface graphique de l'application et interagit avec le système d'exploitation via Node.js. Lorsque vous opérez sur une fenêtre dans une application Electron, vous opérez en réalité sur une page Web. Lorsque votre opération doit être effectuée via le système d'exploitation, la page Web interagira avec le système d'exploitation via Node.js.

Les avantages de développer des applications de bureau de cette manière sont :

1. Abaissez le seuil de développement, il vous suffit de maîtriser la technologie de développement Web et Node.js, un grand nombre des technologies de développement Web et des bibliothèques prêtes à l'emploi peuvent être réutilisées dans Electron

2. Étant donné que le navigateur Chromium et Node.js sont tous deux multiplateformes, Electron peut écrire le même code sur différents systèmes d'exploitation. systèmes fonctionnent.

Lors de l'exécution d'une application Electron, elle commence par lancer un processus principal. Le démarrage du processus principal est réalisé en exécutant un fichier JavaScript d'entrée via Node.js. Le contenu de ce fichier d'entrée main.js est le suivant :

const { app, BrowserWindow } = require('electron')
// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win
// 打开主窗口
function createWindow() {
 // 创建浏览器窗口
 win = new BrowserWindow({ width: 800, height: 600 })
 // 加载应用的 index.html
 const indexPageURL = `file://${__dirname}/dist/index.html`;
 win.loadURL(indexPageURL);
 // 当 window 被关闭，这个事件会被触发
 win.on('closed', () => {
  // 取消引用 window 对象
  win = null
 })
}

// Electron 会在创建浏览器窗口时调用这个函数。
app.on('ready', createWindow)

// 当全部窗口关闭时退出
app.on('window-all-closed', () => {
 // 在 macOS 上，除非用户用 Cmd + Q 确定地退出
 // 否则绝大部分应用会保持激活
 if (process.platform !== 'darwin') {
  app.quit()
 }
})

Une fois le processus principal démarré, il sera lancé. réside toujours en arrière-plan et s'exécute en arrière-plan. La fenêtre que vous voyez et utilisez n'est pas le processus principal, mais un sous-processus de fenêtre nouvellement démarré par le processus principal.

L'application comporte une série d'événements du cycle de vie du démarrage à la sortie. Utilisez la fonction electronic.app.on() pour surveiller les événements du cycle de vie et réagir à des moments spécifiques. Par exemple, utilisez BrowserWindow pour afficher la fenêtre principale de l'application dans l'événement app.on('ready').

La fenêtre démarrée est en fait une page Web Lorsqu'elle est démarrée, elle chargera l'adresse de la page Web transmise dans loadURL. Chaque fenêtre est un processus de page Web distinct et la communication entre les fenêtres nécessite l'utilisation du processus principal pour transmettre les messages.

En général, le développement d'applications Electron est très similaire au développement d'applications Web. La différence est que l'environnement d'exploitation Electron dispose de navigateurs intégrés et d'API Node.js lors du développement. pages Web En plus d'utiliser l'API fournie par le navigateur, vous pouvez également utiliser l'API fournie par Node.js.

Connectez-vous à Webpack

Ensuite, créez une application Electron simple. Il est nécessaire d'afficher une fenêtre principale après le démarrage de l'application. Il y a un bouton dans la fenêtre principale. fenêtre Cliquez dessus. Une nouvelle fenêtre s'affiche après le bouton et React est utilisé pour développer la page Web.

Comme chaque fenêtre de l'application Electron correspond à une page web, deux pages web doivent être développées, à savoir index.html de la fenêtre principale et login.html de la fenêtre nouvellement ouverte. En d'autres termes, le projet se compose de 2 applications d'une seule page, ce qui est très similaire au projet de 3-10 Gestion de plusieurs applications d'une seule page. Transformons-le en une application Electron.

Les emplacements qui doivent être modifiés sont les suivants :

Créez un nouveau fichier d'entrée main.js pour le processus principal dans le répertoire racine du projet. Le contenu est cohérent avec celui mentionné ci-dessus ;

La page Web de la fenêtre principale Le code est le suivant :

import React, { Component } from 'react';
import { render } from 'react-dom';
import { remote } from 'electron';
import path from 'path';
import './index.css';
class App extends Component {
 // 在按钮被点击时
 handleBtnClick() {
  // 新窗口对应的页面的 URI 地址
  const modalPath = path.join('file://', remote.app.getAppPath(), 'dist/login.html');
  // 新窗口的大小
  let win = new remote.BrowserWindow({ width: 400, height: 320 })
  win.on('close', function () {
   // 窗口被关闭时清空资源
   win = null
  })
  // 加载网页
  win.loadURL(modalPath)
  // 显示窗口
  win.show()
 }
 render() {
  return (
   <p>
    <h1>Page Index</h1>
    <button onClick={this.handleBtnClick}>Open Page Login</button>
   </p>
  )
 }
}
render(<App/>, window.document.getElementById(&#39;app&#39;));

La partie la plus critique est d'utiliser l'API fournie par la bibliothèque d'électrons pour ouvrir une nouvelle fenêtre dans l'événement de clic sur le bouton et chargez l'adresse du fichier de la page Web.

Le code de la partie page a été modifié. Ensuite, le code de construction sera modifié. Les points suivants doivent être effectués dans la construction ici :

Construire deux pages Web pouvant être exécutées dans le navigateur, correspondant aux interfaces des deux fenêtres

1. <🎜 ; >Parce que dans Le code JavaScript de la page Web peut appeler le module natif Node.js ou le module électronique, c'est-à-dire que le code de sortie dépend de ces modules. Cependant, étant donné que ces modules ont un support intégré, le code construit ne peut pas empaqueter ces modules.

2. Il est très facile de remplir les exigences ci-dessus car Webpack dispose d'un support intégré pour Electron. Ajoutez simplement une ligne de code au fichier de configuration Webpack, comme suit :

target: 'electron-renderer',

Cette configuration a été mentionnée dans 2-7 Autres éléments de configuration-Target, ce qui signifie Laisser Webpack construire le Code JavaScript pour le processus de rendu Electron, qui est le code de la page Web requis par ces deux fenêtres.

Une fois les modifications ci-dessus terminées, réexécutez la version Webpack. Le code requis pour la page Web correspondante sera affiché dans le répertoire dist sous le répertoire racine du projet.

Pour fonctionner en tant qu'application Electron, vous devez installer de nouvelles dépendances :

# 安装 Electron 执行环境到项目中
npm i -D electron

Après une installation réussie, exécutez electronic dans le répertoire du projet. Vous pourrez voir avec succès le fichier. application de bureau lancée. , l'effet est le suivant :

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment vue+springboot implémente les problèmes inter-domaines d'authentification unique (tutoriel détaillé)

Comment implémenter le retour du scroller à la page en vue et mémoriser la position de défilement

Comment afficher la copie complète dans vue

Comment lire et écrire des cookies en JavaScript

Comment télécharger plusieurs fichiers dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!