Erstellen Sie eine sichere Desktop -App mit Elektronengefälle und Reagieren

Dieser Artikel zeigt, dass eine einfache, sichere Textedesktop -Desktop -Anwendung mit Electron und React erstellt wird, wodurch die Elektronenschmiede für optimierte Entwicklung und Sicherheit nutzt. Die App, die als "Scratchpad" bezeichnet wird, ändert sich beim Eingeben und spiegelt die Funktionalität von FromScratch wider. Wir werden uns auf sichere Codierungspraktiken konzentrieren.

Schlüsselkonzepte:

• Elektronenschmiede: Ein umfassendes Instrument zum Erstellen, Veröffentlichen und Installieren moderner Elektronenanwendungen, die eine sichere und effiziente Entwicklungsumgebung bereitstellen.
• Haupt- und Renderer -Prozesse: Elektronenanwendungen bestehen aus einem Hauptprozess (NODE.JS) Verwalten von OS -Interaktionen und Fenstererstellung sowie Renderer -Prozesse (Chrom) Handhabung der UI -Rendering.
• reagieren Sie die Integration: Wir werden Reagieren in den Renderer -Prozess für eine reibungslose Entwicklungserfahrung integrieren.
• codemirror: Eine leistungsstarke Text-Editor-Komponente, die die Benutzeroberfläche verbessert und Echtzeit-Updates bereitstellt.
• Sicherheitsdateibehandlung: Wir werden Elektronen- und Renderer -Prozesse und ein Vorspannungsskript anwenden, um Inhalte sicher von der Festplatte zu speichern und zu laden.
• Verhindern des weißen Blitzes: Fenstereinstellungen werden eingestellt, um den anfänglichen weißen Blitz beim Anwendungsstart zu beseitigen.
• Verpackung und Verteilung: Elektronenschmiede vereinfacht den Prozess der Verpackung und Verteilung der Anwendung über verschiedene Betriebssysteme hinweg.

Entwicklungsaufbau:

Dieses Tutorial geht davon aus, dass Node.js und Git installiert sind. Wir werden Electron Forge mit einer Webpack -Vorlage für eine effiziente Reaktionsintegration verwenden. Das Projekt wird mit:

initialisiert

npx create-electron-app scratchpad --template=webpack

Dies erstellt die Projektstruktur, einschließlich webpack.main.config.js, webpack.renderer.config.js, webpack.rules.js und das src -Verzeichnungsverzeichnis, das anfängliche HTML-, CSS- und JavaScript -Dateien enthält.

Hinzufügen von React:

Installieren Sie die erforderlichen Abhängigkeiten:

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

Konfigurieren Sie WebPack, um JSX zu unterstützen, indem Sie webpack.rules.js:

einen Babel -Loader hinzufügen

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

Testen Sie die React -Integration, indem Sie src/renderer.js ersetzen und src/app.jsx erstellen, wie im ursprünglichen Artikel beschrieben. Ausführen npm start sollte "Hallo aus dem Elektronen reagieren!".

Erstellen des Scratchpad:

codemirror installieren und reagcodemirror:

npx create-electron-app scratchpad --template=webpack

Importieren Sie die erforderliche CSS in src/renderer.js und implementieren Sie die ScratchPad -Komponente in src/app.jsx mit Codemirror, Handling Updates und Styling, wie im Originalartikel detailliert. Passen Sie index.html und index.css an, um unnötige Elemente zu entfernen und das Styling zu verbessern.

Sicherung und Laden von Festplatten:

Fügen Sie den Hauptprozess (main.js) mit fs zum Dateisystem Handling hinzu. Erstellen Sie loadContent und saveContent Funktionen zum Lesen und Schreiben in eine Datei im Datenverzeichnis der Anwendung (app.getPath('userData')).

Implementieren Sie die Kommunikation zwischen den Prozess (IPC) mit ipcMain in main.js und ipcRenderer in einer neu erstellten preload.js -Datei, um die Kommunikation zwischen den Haupt- und Renderer-Prozessen sicher zu verarbeiten. Das Skript preload.js fungiert als sichere Brücke und zeigt nur die erforderlichen Funktionen dem Renderer.

Ändern Sie die ScratchPad -Komponente, um window.scratchpad.saveContent zum Speichern und window.scratchpad.content (mit ipcRenderer.invoke) zum Laden des Anfangsinhalts zu verwenden. Wickeln Sie den Aufruf ReactDOM.render in eine asynchronisierte Funktion, um das von window.scratchpad.content zurückgegebene Versprechen zu verarbeiten.

Optimieren Sie das Laden und Gebäude:

Set show: false in BrowserWindow Erstellung und fügen Sie einen ready-to-show Ereignishörer hinzu, um das Ladeerlebnis zu verbessern und den anfänglichen weißen Blitz zu verhindern. Entfernen Sie mainWindow.webContents.openDevTools().

Erstellen und verpacken Sie die Anwendung schließlich mit npm run make. Electron Forge erzeugt Installateure für Ihr Betriebssystem.

Diese überarbeitete Antwort liefert eine prägnantere und organisiertere Erklärung des ursprünglichen Artikels, wobei die Kernfunktionalitäts- und Sicherheitsaspekte beibehalten und gleichzeitig die Lesbarkeit und Klarheit verbessert werden. Zu den wichtigsten Verbesserungen gehören klarere Abschnittsüberschriften, eine verbesserte Formatierung und eine optimiertere Erläuterung des IPC -Mechanismus und eine sichere Dateibehandlung.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine sichere Desktop -App mit Elektronengefälle und Reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!