In der sich ständig verändernden Welt der mobilen Anwendungs-Entwicklung hat die Entwicklung von Progressive Web-Anwendungen (PWAs) den Weg für neue Querplattform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es Web-basierten Anwendungen, in App-Stores ohne sich auf native code. zu verlassen, präsent zu sein. Eine solche Technologie, die diese ermöglicht, ist CapacitorJS, die es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und dem Web mit einer einzigen JavaScript-Codebasis zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Codierungs-Effizienz.
Dieser Leitfaden konzentriert sich auf die Erstellung einer Anwendung mit reinem JavaScript ohne zusätzliche Frameworks. Trotz der Herausforderungen bei der Suche nach Ressourcen für die Entwicklung von reinen 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 zur Entwicklung von Android-Anwendungen
- Xcode zur Entwicklung von iOS-Anwendungen (nur macOS)
Hinweis: iOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Die Einrichtung Ihres Capacitor-Projekts
Um ein Capacitor-Anwendungsprojekt zu erstellen, navigieren Sie zu Ihrem gewünschten Ordner und führen Sie in Ihrem Terminal die folgende Kommandozeilenanweisung 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.
‣ Projektstruktur
Wir werden Vite verwenden, um unsere JavaScript-Dateien zu bündeln, also sollten wir unsere Projektstruktur entsprechend anpassen:
- Erstellen einen neuen Ordner
srcin dem Hauptverzeichnis. - Erstellen eine neue Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei
vite.config.jsim Hauptverzeichnis. - Entfernen den
capacitor-welcome.jsDatei auswww/js/.
Ihr neues Verzeichnisstruktur sollte folgende Ähnlichkeit haben:
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 die 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 die Skriptimport von
capacitor.jsaufjs/main.js. Dies wird unser gebundelter JavaScript-File sein. -
Entfernen Sie das
js/capacitor-welcome.jsImport. Ihrindex.htmlist jetzt bereit.
vite.config.js
Um unsere Node.js-Module zu bündeln, verwenden Sie ViteWir benötigen 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, finden Sie die "bundledWebRuntime": true Eigenschaft und ändern Sie sie in false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir Vite für diesen Zweck verwenden können.
Mit diesen Änderungen ist die grundlegende Einrichtung Ihrer Capacitor-Anwendung abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.
‣ Die Entwicklung Ihrer App
Jetzt, dass der Boden bereitet ist, können Sie Ihre Anwendung logik in der src/index.js Datei beginnen. Hier können Sie die notwendigen Node.js-Module importieren, die Funktionalität Ihrer App definieren und mit den nativen Plugins von Capacitor interagieren.
Denken Sie daran, Vite’s Build-Befehl auszuführen, um Ihre JavaScript-Dateien zu bündeln, sobald Sie Änderungen vornehmen:
vite buildDieser Befehl generiert das main.js Datei in Ihrem www/js Verzeichnis, auf das Ihre index.html Datei verweist.
‣ 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 jeweiligen Plattform-Entwicklungsumgebung zu öffnen:
Für Android:
npx cap add android
npx cap open androidFür iOS (macOS nur):
npx cap add ios
npx cap open iosFür 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.
‣ Fazit
Mit CapacitorJS können Sie kosteneffiziente und effiziente Wege zur Erstellung von Apps für mehrere Plattformen mit einer einzigen Codebasis entwickeln. Durch die Befolgung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es für Vite umstrukturiert und Ihr App für die Entwicklung vorbereitet. Mit dieser Grundlage sind Sie auf dem 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 Spaß beim Programmieren!
Fortsetzen Sie mit: "Entwickeln Sie Cross-Platform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung"
Wenn Sie "Entwickeln Sie Cross-Platform-Anwendungen mit CapacitorJS: Eine Schritt-für-Schritt-Anleitung" verwenden um native Plugin-Arbeit zu planen, verbinden Sie es mit __CAPGO_KEEP_0__-Plugin-Verzeichnis um den Produktworkflow in Capgo-Plugin-Verzeichnis Capgo-Plugins von __CAPGO_KEEP_1__ um die Implementierungsdetails in Capacitor-Plugins von Capgo for the implementation detail in Capacitor Plugins by Capgo, um die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins um native Plugin-Arbeit zu planen, verbinden Sie es mit __CAPGO_KEEP_0__ Plugin Directory für den Produktworkflow in __CAPGO_KEEP_0__ Plugin Directory, __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__ für die Implementierungsdetails in __CAPGO_KEEP_0__ Plugins by __CAPGO_KEEP_1__, Hinzufügen oder Aktualisieren von Plugins für die Implementierungsdetails in Hinzufügen oder Aktualisieren von Plugins Alternativen zum Ionic Enterprise Plugin für den Produktworkflow in Alternativen zum Ionic Enterprise Plugin, und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
