In der sich entwickelnden Welt der mobilen Anwendungsentwicklung hat die Entwicklung von Progressive Web-Anwendungen (PWAs) den Weg für neue Cross-Platform-Runzeitumgebungen geebnet. Diese Runzeitumgebungen ermöglichen es, webbasierte Anwendungen in App-Stores ohne sich ausschließlich auf native code zu verlassen. CapacitorJS, das es Entwicklern ermöglicht, eine einfache Website als Anwendung auf Android, iOS und der Webseite mit einem einzigen JavaScript-Codebase zu deployen. Diese Vorgehensweise reduziert die Entwicklungskosten erheblich und erhöht die Codierungs-Effizienz.
Dieses 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 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 zur Android-App-Entwicklung
- Xcode zur iOS-App-Entwicklung (nur macOS)
Hinweis: Die iOS-App-Entwicklung ist nur auf einem macOS-Gerät möglich.
‣ Einrichten Ihres Capacitor-Projekts
Um eine Capacitor-Anwendung zu erstellen, navigieren Sie zu Ihrem gewünschten Ordner und führen Sie die folgende 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 strukturieren wir unser Projekt entsprechend:
- Erstellen ein neues Verzeichnis
srcim Hauptverzeichnis. - Erstellen ein neues Skriptdatei
index.jsinsrc/. - Erstellen die Vite-Konfigurationsdatei
vite.config.jsim Hauptverzeichnis. - Löschen das
capacitor-welcome.jsDatei auswww/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‣ Anpassung an Pure JavaScript
Lassen Sie uns einige Dateien anpassen, um mit Pure 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 Körper. -
Aktualisieren Sie den Skriptimport von
capacitor.jszujs/main.jsDies wird unser gebundenes JavaScript-File sein. -
Entfernen Sie das
js/capacitor-welcome.jsimportieren. Ihrindex.htmlist jetzt fertig.
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 nimmt 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 auf false. Diese Anpassung stellt sicher, dass Capacitor die Dateien nicht bündelt, sodass wir Vite stattdessen für diesen Zweck verwenden können.
Mit diesen Änderungen ist die grundlegende Einrichtung Ihres Capacitor-Anwendungsprojekts abgeschlossen, und Sie sind bereit, Ihre App mit reinem JavaScript zu entwickeln.
‣ Ihre Anwendung entwickeln
Jetzt, da der Boden bereitet ist, können Sie Ihre Anwendung logik in dem src/index.js Datei schreiben. 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 praktische 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 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
Die Entwicklung von Cross-Platform-Anwendungen mit CapacitorJS mithilfe von reinem JavaScript ist eine kosteneffiziente und effiziente Möglichkeit, Apps für mehrere Plattformen mit einer einzigen Codebasis zu erstellen. Durch die Befolgung dieser Anleitung haben Sie Ihr Projekt eingerichtet, es umgestellt und für Vite und Ihre App 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 nativen Plugins von Capacitor zu nutzen, um die Funktionalität Ihrer App zu verbessern. Viel Spaß beim Programmieren!
Fortsetzen Sie mit Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide
Wenn Sie native Plugin-Arbeit planen und mit __CAPGO_KEEP_0__ verbinden möchten, verbinden Sie es mit dem __CAPGO_KEEP_0__ Plugin Directory Für den Produktworkflow im __CAPGO_KEEP_0__ Plugin Directory __CAPGO_KEEP_0__ ist ein Plugin für __CAPGO_KEEP_0__ Capgo ist ein Plugin für Capgo Capgo ist ein Plugin für Capgo Capacitor Plugins von Capgo zur Implementierungsdetail in Capacitor Plugins von Capgo Hinzufügen oder Aktualisieren von Plugins zur Implementierungsdetail in Hinzufügen oder Aktualisieren von Plugins Alternativen zu Ionic Enterprise Plugins zum Produktworkflow in Alternativen zu Ionic Enterprise Plugins, und Capgo Native Builds zum Produktworkflow in Capgo Native Builds.
