In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mithilfe von Quasar. Später werden wir erfahren, wie man sie in eine mobile App umwandelt, mithilfe von Capacitor. 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 Zeit damit verbringen müssen oder ein völlig neues Konzept lernen müssen, wie bei etwas wie React Native.
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-App und dann die Einbindung von Capacitor zur Umwandlung in eine native mobile App. Darüber hinaus werden Sie auch Capgo zum Senden von lebendlichen Updates an Ihre App in Sekunden verwenden.
Über Capacitor
CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jedes Web-Projekt integrieren und es wird Ihre Anwendung in eine native WebView einhüllen, wodurch die native Xcode- und Android-Studio-Projekte generiert werden. Zudem 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 API und seine gestreamte Funktionalität machen es zu einem Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erstellen!
Deine Quasar App vorbereiten
Um eine neue Quasar App zu erstellen, führe bitte folgende Befehl aus:
npm init quasar
Wähle die Option „App mit Quasar CLI“ dann „Quasar v2“.
Um eine native mobile App zu erstellen, benötigen wir eine export von unserem Projekt. Daher fügen wir ein einfaches Skript in unserem package.json hinzu, das verwendet werden kann, um das Quasar-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem du den Befehl ausgeführt hast generatefindest du ein frisches dist Fachordner an der Wurzel deines Projekts.
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Adding Capacitor to Your Quasar App
Um jede Web-App in einen nativen mobilen Container zu packen, müssen wir einige Schritte ausführen, aber danach ist es so einfach wie die Ausführung eines einzigen Befehls. sync Zuerst können wir das
Capacitor Capacitor CLI 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 Capgo wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:
Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:
# 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
iOS beobachten können. und Android Ordner in Ihrem Quasar-Projekt.
Das sind echte native Projekte!
Um auf das Android-Projekt später zuzugreifen, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.
Darüber hinaus sollten Sie in Ihrem Projekt 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"-Einstellung.die muss auf das Ergebnis Ihres Build-Befehls verweisen. Derzeit ist sie ungenau.
Um dies zu korrigieren, öffnen Sie das capacitor.config.json Dokument und aktualisieren Sie die webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Konfiguration
npm run generate
npx cap syncSie können es ausprobieren, indem Sie die folgenden Befehle ausführen: npm run generate Der erste Befehl npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.
alle Web-__CAPGO_KEEP_0__ synchronisiert, damit sie in den richtigen Orten der native Plattformen angezeigt werden können. Capacitor plugins __CAPGO_KEEP_0__-Plugin installieren, es auch ausführen. npx cap sync wieder.
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 zu haben, und für Android-Apps benötigen Sie Android Studio installiert zu haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich im Apple Developer Programm für iOS und im Google Play Console für Android anmelden.
Wenn Sie neu bei der Entwicklung von mobilen Apps sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidSobald Sie Ihre native Projekte eingerichtet haben, 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 Ihren Signierungsaccount einrichten, um Ihre App auf einem echten Gerät bereitzustellen, anstatt 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-Anwendung auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:
Aber halt, 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 bereitzustellen. Dies kann eine praktische Möglichkeit sein, schnell Fehler zu beheben oder kleine Updates an einer App ohne Wartezeit auf das App-Store-Bewertungsverfahren vorzunehmen.
Die Integration von Capgo in Ihre Quasar-Anwendung ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht von Echtzeit-Live-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung führt Sie durch die Integration und Implementierung von Capgo Live Update, um Ihnen eine reibungslose Update-Übermittlung zu ermöglichen.
Registrieren und Zugriff auf die Capgo-Oberfläche:
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:
Vom Befehlszeilenfenster aus, direkt im Root Ihrer Capacitor-Anwendung, führen Sie:
npm i @capgo/capacitor-updater && npx cap sync Um die Erweiterung in Ihr Capacitor-App zu installieren.
Fügen Sie dann Ihrem App diese code als Ersatz für CodePush ein:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies wird dem nativen Plugin mitteilen, dass die Installation erfolgreich war.
Melden Sie sich bei Ihrem Capgo-Konto an.:
Zuerst verwenden Sie den all apikey Ihrer Konto, um sich mit Ihrem CLI anzumelden:
`npx @capgo/cli@latest login YOU_KEY`Fügen Sie Ihre erste App hinzu.:
Lassen Sie uns damit beginnen, indem wir zunächst eine App in Ihrem Capgo-Cloud mit der CLI erstellen.
npx @capgo/cli@latest app addDiese Anweisung wird alle Variablen verwenden, die in der Capacitor-Konfigurationsdatei definiert sind, um die App zu erstellen.
Hochladen Sie Ihre erste 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`Die Versionsbezeichnung wird standardmäßig aus Ihrem package.json-File übernommen.
Überprüfen Sie ein Capgo Wenn das Build vorhanden ist.
Sie können es sogar mit meinem mobilen Sandbox-App.
Machen Sie den Kanal standardmäßig:
Nachdem Sie Ihre App an Capgo gesendet haben, müssen Sie Ihren Kanal standardmäßig machen, damit Apps Updates von Capgo erhalten können.
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 hinzu.
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dann führen Sie ein npm run build && npx cap copy durch, um Ihre App zu aktualisieren.
Live-Update erhalten:
Damit Ihre Anwendung ein Live-Update von Deploy erhalten kann, müssen Sie die App auf einem Gerät oder einem Emulator ausführen. Der einfachste Weg, dies zu tun, besteht darin, 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 das Update durchgeführt hat.
Herzlichen Glückwunsch! 🎉 Sie haben erfolgreich Ihr erstes Live-Update bereitgestellt. 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.
Capacitor-Plugins verwenden
Schauen wir uns nun an, wie man ein Capacitor-Plugin in Aktion verwendet, das wir vorher bereits erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir die folgende Kommandozeilenanweisung 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 in unserer App aufrufen, also ändern wir zunächst das pages/index.vue zu diesem:
<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>Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierung durchführen und die App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte folgende Befehl aus:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie das schöne native Teilen-Dialog sehen!
Als Nächstes können Sie die App mit Capgo Navigation und Übergängen so gestalten, dass sie sich auf iOS und Android anfühlt, und die häufigen iOS-Layout-Probleme lösen, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
Eine native anfühlsame Oberfläche mit Capgo Native Navigation und Übergängen
Ich habe in den letzten Jahren mit Ionic gearbeite, 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-App verwenden Sie stattdessen Capgo-Plugins anstelle von web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — native Navbar, Liquid Glass Tabbar auf iOS und eine verschwommene Tabbar-Style auf Android. Die Quasar-Router-Instanz hält die Routen-Status; der Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Seitenübergänge im WebView-Schichtstil nach Ionic und iOS-Rückwärts-Scrollen am Rand, ohne Ionic-Benutzeroberfläche zu übernehmen.
Installieren Sie beide:
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalts die native Balken respektiert:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine flüssige Glas-Tastenleiste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen 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 routed Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') context:HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Vergleichsseite für Capacitor-Live-Updates. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite alternatives.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertitel genau auf. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen-CTA-Fragen). | HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Appflow-Vergleichs-/Migrationsmarketing. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite ionic-appflow.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertitel genau auf. Nachrichtenschlüssel `appflow_cta_questions` (Appflow-CTA-Fragen). | HTML-Textfragment aus einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Capawesome-Vergleichsseite. Rolle: Langen Marketing- oder Rechtsparagraphen. Gesehen in: Seite capwesome.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertitel genau auf. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome-CTA-Fragen). | Seite/Bereich: Beratungsdienste-Seite. Rolle: Abschnittstitel oder Slogan. Gesehen in: Seite consulting.astro. Bewahren Sie Capgo-Produkt- und -Marken- sowie Entwicklertitel genau auf. Nachrichtenschlüssel `consulting_faq_subtitle` (Beratungsdienste-Faq-Untertitel). | Seite/Bereich: Appflow-Vergleichs-/Migrationsmarketing. Rolle: Kurze Benutzeroberflächenetikette oder Navigationselement. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite solutions/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow-Plugins-oder).
vor der Navigation. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt. Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas Nutzfunktionen und andere Capacitor-freundliche Tailwind-Plugins:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Nutzungen wie pt-safe, pb-safe, und px-safe anstatt, es wie im Reigen zu verteilen env(safe-area-inset-*) von Hand. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Quasar-Einrichtung fehlt, eröffnen Sie einen PR auf GitHub.
iOS-Layoutprobleme beheben (Viewport, sichere Fläche und horizontale Überschreitung)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder passen Sie allein den Viewport-Tag an, hilft es normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird
In index.html (oder Ihrem Quasar-HTML-Template), setzen Sie den Viewport-Meta-Tag in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandeln Sie die iOS-sichere Fläche von einem einzigen Root-Wrapper aus
Erstellen Sie ein einzelnes App-Shell und wenden Sie dort die sichere Flächenabstände an — nicht in mehreren verschachtelten Komponenten:
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);
}Umfasst alle Seite-Inhalte innerhalb .app-shell. Doppeltes sicheres Bereichspuffering in Kopfzeilen, Modalen und Layout-Wrappern führt oft zu einem gekürzten oder zu großartigen UI-Erscheinungsbild.
Mit @capgo/tailwind-capacitor, kannst du denselben Puffer mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Hülle.
Setze Capacitor iOS contentInset auf never erst
In capacitor.config.ts, bevorzuge native disabled Inset und lasse CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Mische Capacitor’s automatisches Inhaltsinset mit CSS env(safe-area-inset-*) Die Padding-Einstellung ist eine häufige Ursache für doppelte Zeilenabstände.
Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine feste 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 wenn möglich. Viele horizontale Überlaufprobleme kommen von w-full , dupliziertem sicherem Bereich-Padding oder einem festschwellenden Container — nicht von der Viewport-Meta-Tags selbst. 100vw / w-screenZusammenfassung
__CAPGO_KEEP_0__ ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, __CAPGO_KEEP_1__ zu teilen und eine konsistente Benutzeroberfläche zu erhalten.
Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.
Und mit der Hinzufügung von CapgoEs ist sogar einfacher, live-Updates in Ihre App hinzuzufügen, um sicherzustellen, dass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne wissen möchten, wie Sie Capgo in Ihrer Next.js-App hinzufü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 __CAPGO_KEEP_0__ verwenden, um native Plugin-Arbeit zu planen, verbinden Sie es mit Capacitor Plugin-Verzeichnis __CAPGO_KEEP_0__ Plugin-Verzeichnis für das Produktworkflow in __CAPGO_KEEP_0__ Plugin-Verzeichnis, Capgo Plugins von __CAPGO_KEEP_1__ Capgo Plugins von __CAPGO_KEEP_1__ für die Implementierungsdetails in Capgo Plugins von __CAPGO_KEEP_1__ Capacitor Plugins von Capgo Capacitor Plugins von Capgo Plugins hinzufügen oder aktualisieren für die Implementierungsdetails in Plugins hinzufügen oder aktualisieren Ionische Unternehmenseigenen Plugin-Alternativen für den Produktworkflow in Ionische Unternehmenseigenen Plugin-Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
