In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mit Quasar. Später werden wir lernen, wie man sie in eine mobile App umwandelt, indem man sich auf Capacitor stützt. Wenn Sie möchten, dass Ihre App auf dem Mobilgerät besser aussieht.
Mit Capacitor können Sie Ihre Quasar-Web-App in eine mobile App umwandeln, ohne dass Sie viel Arbeit oder eine komplett neue Art der App-Entwicklung wie bei etwas genanntem React Native lernen müssen.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-App und dann die Einbindung von Capacitor zur Umwandlung in native mobile Apps. Darüber hinaus werden Sie auch Capacitor verwenden, um live Updates an Ihre App in Sekunden zu senden. Über Capgo CapacitorJS ist wirklich ein Game-Changer! Sie können es leicht in jeden Web-Projekt einbinden und es wird Ihre Anwendung in eine native WebView einwickeln, wodurch die native Xcode- und Android-Studio-Projekte für Sie generiert werden. Darüber hinaus bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.
Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken __CAPGO_KEEP_1__ und seine gestreamten Funktionen machen es zu einem Kinderspiel, ihn in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine vollständig funktionierende native App mit __CAPGO_KEEP_2__ zu erreichen!
Vorbereitung Ihrer Quasar-App
With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!
Quasar
__CAPGO_KEEP_0__
npm init quasar
Wählen Sie die Option „App mit Quasar CLI“ und dann „Quasar v2“.
Um eine native mobile App zu erstellen, benötigen wir ein export von unserem Projekt. Daher fügen wir ein einfaches Skript in unserem package.json ein, das zum Bauen und Kopieren des Quasar-Projekts verwendet werden kann:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem Sie die Kommandozeile generateausgeführt haben, sollten Sie ein frisches dist Ordner an Ihrem Projektroot finden.
Dieser Ordner wird später von Capacitor verwendet, aber für den Moment müssen wir ihn korrekt einrichten.
Capacitor in Ihre Quasar-App hinzufügen
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzelnen sync Befehls.
Zuerst können wir das Capacitor CLI als Entwicklungspaket installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf "Enter" drücken, um die Standardwerte für Name und Bundle-ID zu akzeptieren.
Als Nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.
Schließlich können wir die Plattformen hinzufügen und Capacitor wird Ordner für jede Plattform am Root unseres Projekts erstellen:
# Install the Capacitor CLI locally
npm install -D @capacitor/cli
# Initialize Capacitor in your Quasar project
npx cap init
# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platforms
npx cap add ios
npx cap add android
Bis zu diesem Punkt sollten Sie neue iOS und Android Ordner in Ihrem Quasar-Projekt.
Das sind echte native Projekte!
Um später auf das Android-Projekt zuzugreifen, müssen Sie Android Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. Zusätzlich sollten Sie ein capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der
webDir capacitor.config.json Datei und aktualisieren Sie die webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:
npm run generate
npx cap syncDer erste Befehl npm run generate werden Sie einfach Ihr Quasar-Projekt bauen und die statische Ausgabe kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren, damit sie in einer App angezeigt werden können.
Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass Sie, wenn Sie ein neues Capacitor-Plugin installieren, es Zeit ist, npx cap sync erneut auszuführen.
Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir uns das App auf einem Gerät an!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich bei iOS im Apple Developer Programm und bei Android im Google Play Console anmelden.
Wenn Sie neu bei der nativen mobilen Entwicklung sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidEinmal Ihre native Projekte eingerichtet, ist das Bereitstellen Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihre Signierungsaccount einrichten, um Ihre App auf einem echten Gerät bereitzustellen und nicht nur auf dem Simulator. Wenn Sie das noch nicht gemacht haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie sich im Developer Programm angemeldet zu haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:
Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Quasar-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:
Aber halt die Sache, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capgo Live Update
Capgo Live Update ist ein Dienst, der Entwicklern ermöglicht, Updates für ihre mobilen Apps ohne das traditionelle App-Store-Übermittlungsverfahren zu deployen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App ohne das Warten auf das App-Store-Bewertungsverfahren vorzunehmen.
Die Integration von Capgo in Ihre Quasar-App ist ein einfacher Prozess, der Ihnen die Macht gibt, die Leistung von Echtzeit-Live-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung wird Sie durch die Integration und Implementierung von Capgo Live Update führen, um Ihnen eine reibungslose Aktualisierung zu ermöglichen.
Registrieren und Zugriff auf das Capgo-Dashboard:
Es ist Zeit, sich anzumelden und Ihre API-Schlüssel zu erhalten, um Ihre erste Version hochzuladen! Beginnen Sie damit, Registrieren Sie sich für ein Capgo-Konto.
Installieren Sie das Capgo SDK:
Von einer Befehlszeile direkt in den Wurzelordner Ihrer Capacitor-App aus führen Sie:
npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in Ihre Capacitor-App zu installieren.
Und fügen Sie dann Ihrem App diesen code als Ersatz für CodePush hinzu:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies wird dem nativen Plugin mitteilen, dass die Installation erfolgreich war.
Anmelden bei Capgo CLOUD:
Zuerst verwenden Sie den all apikey Verwenden Sie den Schlüssel in Ihrem Konto, um sich mit CLI anzumelden:
`npx @capgo/cli@latest login YOU_KEY`Fügen Sie Ihre erste App hinzu:
Lassen Sie uns mit der Erstellung einer App in Capgo Cloud beginnen, die mit CLI erstellt wurde.
npx @capgo/cli@latest app addDiese Kommandozeilenanweisung wird alle in der Capacitor Konfigurationsdatei definierten Variablen verwenden, um die App zu erstellen.
Hochladen der ersten Version:
Führen Sie den Befehl aus, um Ihre code zu bauen und es an Capgo zu senden mit:
npx @capgo/cli@latest bundle upload`Standardmäßig wird der Versionsnamen der in Ihrem package.json-File sein.
Überprüfen Sie in Capgo wenn das Build vorhanden ist
Sie können es sogar mit meinem mobilen Sandbox-App.
Machen Sie den Kanal standardmäßig:
Nachdem Sie Ihr App an Capgo gesendet haben, müssen Sie Ihren Kanal standardmäßig machen, damit Apps Updates von Capgo erhalten.
npx @capgo/cli@latest channel set production -s default
Konfigurieren Sie die App, um Updates zu validieren:
Fügen Sie diese Konfiguration in Ihr Haupt-JavaScript-File ein.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dann führen Sie ein npm run build && npx cap copy um Ihre App zu aktualisieren.
Empfangen Sie ein Live-Update:
Damit Ihre Anwendung ein Live-Update von Deploy erhält, müssen Sie die App auf einem Gerät oder einem Emulator ausführen. Der einfachste Weg, dies zu tun, besteht darin, einfach die folgende Kommandozeilenanweisung auszuführen, um Ihre lokale App in einem Emulator oder einem mit Ihrem Computer verbundenen Gerät zu starten.
npx cap run [ios | android]Öffnen Sie die App, stellen Sie sie in den Hintergrund und öffnen Sie sie erneut, Sie sollten im Protokoll sehen, dass die App die Aktualisierung durchgeführt hat.
Herzlichen Glückwunsch! 🎉 Sie haben erfolgreich Ihre erste Live-Update implementiert. Dies ist nur der Anfang dessen, was Sie mit Live-Updates erreichen können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Updates-Dokumentation.
Verwendung von Capacitor-Plugins
Schauen wir uns an, wie man ein Capacitor-Plugin in Aktion verwendet, von dem wir bereits mehrmals gesprochen haben. Dazu können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:
npm i @capacitor/shareEs ist nichts Besonderes an dem Teilen-Plugin, aber es bringt trotzdem den native Teilen-Dialog auf. Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() function von unserer App aufrufen, also ändern wir das pages/index.vue
<template>
<div>
<h1>Welcome to Quasar and Capacitor!</h1>
<button @click="share">Share now!</button>
</div>
</template>
<script setup lang="ts">
import { Share } from '@capacitor/share';
async function share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
</script>zum Beispiel so:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog in Aktion sehen!
Als Nächstes können Sie die App so gestalten, dass sie sich auf iOS und Android anfühlt, indem Sie Capgo-Navigation und -Übergänge verwenden und häufige iOS-Anordnungsprobleme beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
Native-fühlende UI mit Capgo Native Navigation und Übergängen
Für Jahre habe ich gearbeitet mit Ionic um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Quasar ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.
haben. Für einen nativen mobilen Look in einer Quasar + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — native Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Ihr Quasar-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Ionic-Style-Seiteneinblendungen und iOS-Rückwärts-Schleuder auf der WebView-Ebene, ohne Ionic-UI zu übernehmen.
Install beide:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalte die native Balken respektieren:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine Glass-Liquid-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschleierten WebView-Hintergrund):
await NativeNavigation.setTabbar({
selectedId: 'home',
labelVisibilityMode: 'labeled',
icons: true,
colors: { dynamic: true },
tabs: [
{ id: 'home', title: 'Home', icon: { svg: '...' } },
{ id: 'settings', title: 'Settings', icon: { svg: '...' } },
],
});
await NativeNavigation.addListener('tabSelect', ({ id }) => {
router.push(`/${id}`);
});Fügen Sie native Seitenübergänge in Ihrem App-Shell hinzu:
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';
initTransitions({ platform: 'auto' });
const router = useRouter();
const outletRef = ref(null);
onMounted(() => {
if (outletRef.value) {
setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
}
});
const openSettings = () => {
setDirection('forward');
router.push('/settings');
};
</script>
<template>
<cap-router-outlet ref="outletRef">
<router-view />
</cap-router-outlet>
</template>Wrap geroutete Seiten in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation. Duplizieren Sie Web-Über- oder Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.
Sehen Sie sich die vollständigen Anleitungen an: Verwenden Sie @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergängen.
Sichere Bereiche mit Tailwind
Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas utilities and other Capacitor-friendly Tailwind plugins:
npm add -D tailwind-capacitor, und src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Quasar-Konfiguration fehlt, pt-safe, pb-safeIn px-safe Nutzen Sie Hilfsmittel wie env(safe-area-inset-*) , und einen PR auf GitHub öffnen.
iOS-Layout-Probleme beheben (Viewport, Safe Area und horizontale Überschreitung)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, hilft das Hinzufügen oder Anpassen des Viewport-Tags normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird
In
(oder Ihrem Quasar-HTML-Template), setzen Sie den Viewport-Metatag in index.html Behandeln Sie iOS-Safe-Area von einem einzigen Root-Wrapper aus <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Erstellen Sie ein einzelnes App-Shell und wenden Sie dort Safe-Area-Padding an — nicht in mehreren verschachtelten Komponenten:
Umgeben Sie alle Seiteninhalte mit
html,
body,
#q-app {
width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.app-shell {
min-height: 100dvh;
width: 100%;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}Zweifach angebrachte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen. .app-shellMit
With @capgo/tailwind-capacitor, Sie können denselben Rand auch mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.
Setzen Sie Capacitor iOS contentInset auf never erst
In capacitor.config.ts, bevorzugen Sie native Eingriffe und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich übernehmen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Die Mischung aus Capacitor’s automatischem Inhaltseingriff mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppelte Abstände.
Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine fixe Pixelbreite oder eine große min-width.
In Safari Web Inspector, führen Sie aus:
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
el,
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: document.documentElement.clientWidth,
}));Mit Tailwind ersetzen Sie w-screen mit w-full wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem fixbreiten Container — nicht von der Viewport-Meta-Tags selbst.
Zusammenfassung
Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.
Und mit der Einführung von CapgoEs ist sogar noch einfacher, live Updates in Ihre App zu integrieren, damit Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihre Next.js App einfügen können, nehmen Sie einen Blick auf das nächste Artikel :
Fortsetzen Sie von Creating Mobile Apps mit live Updates, Quasar und Capacitor.
Wenn Sie Creating Mobile Apps mit live Updates, Quasar und Capacitor. zur Planung von native Plugin-Arbeiten verwenden, verbinden Sie es mit Capgo Plugin-Verzeichnis Capgo Plugins von __CAPGO_KEEP_1__ zur Implementierungsdetail in Capacitor Plugins von Capgo for the implementation detail in Capacitor Plugins by Capgo, zur Implementierungsdetail in Zur Hinzufügung oder Aktualisierung von Plugins Zur Hinzufügung oder Aktualisierung von Plugins Alternativen zum Ionic Enterprise Plugin für den Produktworkflow in Alternativen zum Ionic Enterprise Plugin Capgo Native Builds für den Produktworkflow in Capgo Native Builds
