In der sich wandelnden Welt der mobilen Anwendungs-Entwicklung hat die Entwicklung von Progressive Web Anwendungen (PWAs) den Weg für neue Cross-Platform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es webbasierten Anwendungen, in App-Stores ohne sich ausschließlich auf native code zu verlassen, präsent zu sein. Ein solches Technologie, das dies erleichtert ist CapacitorJS, das Entwicklern ermöglicht, eine einfache Website als Anwendung über Android, iOS und die Webplattform mit einem einzigen JavaScript-Codebase zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Kodiergeschwindigkeit.
Dieses Leitfaden wird sich auf die Erstellung einer Anwendung mit reinem JavaScript ohne zusätzliche Frameworks konzentrieren. Trotz der Herausforderungen bei der Suche nach Ressourcen für die Entwicklung von reinem JavaScript-Anwendungen im Jahr 2021, sind wir hier, um Ihnen eine umfassende Anleitung zur Erstellung Ihrer Anwendung und zur Nutzung von native Plugins mit CapacitorJS bereitzustellen.
‣ Voraussetzungen
Bevor wir beginnen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:
- Node.js (v14.16.1) oder höher
- NPM (v7.6.2) oder höher
- Android Studio für die Entwicklung von Android-Apps
- Xcode für die Entwicklung von iOS-Apps (nur macOS)
Hinweis: Die Entwicklung von iOS-Apps ist nur auf einem macOS-Gerät möglich.
‣ Die Einrichtung Ihres Capacitor-Projekts
Um eine Capacitor-Anwendung zu erstellen, navigieren Sie zu Ihrem gewünschten Ordner und führen Sie folgenden Befehl in Ihrem Terminal aus:
npm init @capacitor/appFolgen Sie den Anweisungen, um das Paket zu installieren und Ihr Projekt einzurichten. Mit Capacitor v3 sollte Ihr Projektverzeichnis wie folgt aussehen:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.mdMit der ersten Einrichtung abgeschlossen, sind Sie bereit, weiterzumachen.
‣ Projektumstrukturierung
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also sollten wir unser Projekt entsprechend umstrukturieren:
- Erstellen eine neue Ordner
srcim Hauptverzeichnis. - Erstellen eine neue Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei im Hauptverzeichnis.
vite.config.jsLöschen - den Datei aus
capacitor-welcome.jsIhr neues Verzeichnisstruktur sollte folgendermaßen aussehen:www/js/.
Ihr neues Verzeichnisstruktur sollte wie folgt aussehen:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Anpassen an Pure JavaScript
Lassen Sie uns einige Dateien anpassen, um mit reinem JavaScript zu arbeiten:
www/index.html
- Entfernen Sie die Skriptimporte für Ionic PWA-Elemente wenn Sie das App nicht als PWA veröffentlichen:
<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>-
Löschen Sie das
<capacitor-welcome>HTML-Element aus dem Body. -
Aktualisieren Sie den Skriptimport von
capacitor.jsaufjs/main.js. Dies wird unser gebundenes JavaScript-File sein. -
Entfernen Sie die
js/capacitor-welcome.jsimport. Ihrindex.htmlist jetzt bereit.
vite.config.js
Um unsere Node.js-Module mit Vitezu bündeln, benötigen wir eine Konfigurationsdatei, die den Ausgabebereich für unser gebundenes Skript spezifiziert. Die folgende Konfiguration wird das File src/index.js und bündelt es für die Produktion als www/js/main.js:
import { defineConfig } from 'vite';
import path from 'node:path';
export default defineConfig({
build: {
outDir: path.resolve(__dirname, 'www'),
rollupOptions: {
input: './src/index.js',
output: {
format: 'es',
file: path.resolve(__dirname, 'www/js/main.js')
}
}
}
});capacitor.config.json
In der capacitor.config.json Datei, suchen Sie nach der "bundledWebRuntime": true Eigenschaft und ändern Sie sie in false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir stattdessen Vite für diesen Zweck verwenden können.
With diesen Änderungen ist die grundlegende Einrichtung Ihres Capacitor-Anwendungsprojekts abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.
‣ Ihre App entwickeln
Jetzt, dass der Boden bereitet ist, können Sie Ihre Anwendung logik in dem src/index.js Datei beginnen. Hier können Sie alle notwendigen Node.js-Module importieren, die Funktionalität Ihrer App definieren und mit den native Plugins von Capacitor interagieren.
Denken Sie daran, Vites Build-Befehl auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vornehmen:
vite buildDieser Befehl generiert die main.js Datei in Ihrem www/js Verzeichnis, die Ihre index.html Datei referenziert.
‣ Testen und Debuggen
Capacitor bietet eine bequeme Möglichkeit, Ihre Anwendung auf verschiedenen Plattformen zu testen. Verwenden Sie die folgenden Befehle, um Ihre App in der Entwicklungsumgebung der jeweiligen Plattform zu öffnen:
Für Android:
npx cap add android
npx cap open androidFor iOS (macOS nur):
npx cap add ios
npx cap open iosFor Web/PWA:
npx cap serveDiese Befehle ermöglichen Ihnen, Ihre Anwendung in Android Studio, Xcode oder Ihrem Webbrowser auszuführen, wo Sie testen und debuggen können, wie nötig.
‣ Schlussfolgerung
Mit CapacitorJS können Sie kosteneffizient und effizient cross-plattformische Anwendungen mit reinem JavaScript erstellen. Durch die Verwendung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es neu strukturiert und es für die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem richtigen Weg, eine robuste und vielseitige Anwendung zu erstellen.
Denken Sie daran, gründlich auf allen Plattformen zu testen und die Vorteile der Capacitor-Plugins zu nutzen, um die Funktionalität Ihrer App zu verbessern. Viel Erfolg!
Fortsetzen Sie mit: Entwickeln Sie Cross-Plattform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung
Wenn Sie native Plugin-Arbeit planen und mit ihr verbinden möchten, verwenden Sie Entwickeln Sie Cross-Plattform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung um die native Plugin-Arbeit mit dem Capgo Plugin-Verzeichnis zum Produktworkflow in Capgo Plugin-Verzeichnis, zu verbinden. Capacitor Plugins by Capgo for the implementation detail in Capacitor Plugins by Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren, Alternativen zu Ionic Enterprise Plugins für den Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
