In diesem Tutorial beginnen wir mit der Erstellung einer neuen Web-App mithilfe von Quasar. Later on, we’ll learn how to turn it into a mobile app using Capacitor. If you want to make your app look better on mobile.
With Capacitor, you can change your Quasar web app into a mobile app without needing to do lots of hard things or learn a completely new way of making apps like you would with something called React Native.
This tutorial will guide you through the process, starting with a new Quasar app and then incorporating Capacitor to move into the realm of native mobile apps. Additionally, you will use Capgo Capacitor
About Capacitor
Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Quasar-App und dann die Einbindung von
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!
zum Übergang in die Welt der nativen mobilen Apps. Darüber hinaus werden Sie
Capacitor-CLI verwenden, um live-Updates an Ihre App in Sekunden zu senden. Über
npm init quasar
Wählen Sie die Option „App mit Quasar CLI“ dann „Quasar v2“.
Um ein natives Mobilgerät zu erstellen, benötigen wir ein export unseres Projekts. Daher lassen 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 zu Ihrem Quasar-App hinzufügen
To müssen wir, um jede Web-App in einen nativen mobilen Container zu packen, einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen 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 Namen 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 Studio installieren. 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 die
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 wird einfach Ihren Quasar-Projekt bauen und die statische Build kopieren, während der zweite Befehl npx cap sync synchronisiert alle Web code in die richtigen Orte der nativen Plattformen, damit sie in einer App angezeigt werden können.
Zusätzlich kann der Synchronisierungsbefehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren es Zeit ist, npx cap sync wieder zu laufen.
Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir uns das App auf einem Gerät an!
native Apps entwickeln und bereitstellen
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und für Android-Apps benötigen Sie Android Studio installiert. Darüber hinaus benötigen Sie, wenn Sie Ihre App im App-Store verteilen möchten, eine Registrierung im Apple Developer Programm für iOS und im Google Play Console für Android.
Wenn Sie neu bei der Entwicklung von nativen Mobilanwendungen sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:
npx cap open ios
npx cap open androidEinmal haben Sie Ihre native Projekte eingerichtet, ist es leicht, Ihre App auf einem verbundenen Gerät zu deployen. 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 deployen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:
In Xcode müssen Sie Ihre Signierungsaccount einrichten, um Ihre App auf einem realen Gerät zu deployen, anstatt nur auf dem Simulator. Wenn Sie das noch nicht gemacht haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie eine Registrierung im Developer Programm). 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:
Glückwunsch! Sie haben erfolgreich Ihre Quasar-Web-App auf einem Mobilgerät bereitgestellt. Hier ist ein Beispiel:
Ach, es gibt auch einen schnelleren Weg, 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 das Warten auf das App-Store-Bewertungsverfahren vorzunehmen.
Die Integration von Capgo in Ihre Quasar-Anwendung 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 ermöglichen, störungsfreie Updates bereitzustellen.
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, sich für ein Capgo-Konto anzumelden.
Installieren Sie das Capgo-SDK:
Aus einer Befehlszeile direkt in den Wurzelverzeichnis Ihrer Capacitor-Anwendung ausführen:
npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in Ihre Capacitor-Anwendung 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 das all apikey das in Ihrem Konto vorhanden ist, um sich mit CLI anzumelden:
`npx @capgo/cli@latest login YOU_KEY`Fügen Sie Ihre erste App:
Lassen Sie uns mit der Erstellung einer App in Capgo Cloud beginnen, die mit CLI erstellt wird.
npx @capgo/cli@latest app addDiese Kommandozeile 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 erstellen und es an Capgo zu senden mit:
npx @capgo/cli@latest bundle upload`Standardmäßig wird der Versionsname der im package.json-File enthaltene sein.
Überprüfen Capgo wenn das Build vorhanden ist.
Sie können es sogar mit meiner mobil-sandbox-App testen.
Standardkanal festlegen:
Nachdem Sie Ihre App an Capgo gesendet haben, müssen Sie Ihren Kanal als Standard festlegen, damit Apps Updates von Capgo erhalten können.
npx @capgo/cli@latest channel set production -s default
Anwendung konfigurieren, 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 um Ihre Anwendung zu aktualisieren.
Live-Update erhalten:
Damit Ihre Anwendung ein Live-Update von Deploy erhalten kann, müssen Sie die Anwendung 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.
Glückwunsch! 🎉 Sie haben erfolgreich Ihre erste Live-Update veröffentlicht. Dies ist nur der Anfang dessen, was Sie mit Live-Updates erreichen können. Um mehr zu erfahren, besuchen Sie die vollständigen Live-Update-Dokumentation.
Verwendung von Capacitor-Plugins
Lassen Sie uns einen Blick darauf werfen, wie man ein Capacitor-Plugin in Aktion verwendet, von dem wir bereits mehrmals gesprochen haben. Um dies zu tun, 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 benötigen wir jetzt nur noch die Verwendung des Pakets und die Aufruf der entsprechenden share() Funktion aus unserer App, also ändern wir das pages/index.vue in Folgendes:
<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 Synchronisierungsoperation durchführen und das App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte Folgendes aus:
npx cap syncNachdem Sie auf den Button geklickt haben, können Sie das schöne native Share-Dialog in Aktion sehen!
Als Nächstes können Sie die App auf iOS und Android mit Capgo-Navigation und Übergängen noch nativer machen und häufige iOS-Anordnungsprobleme lösen, die zu horizontaler Überschuss oder gekürzten sicheren Bereichen führen.
Natürlicher Anblick mit Capgo-Native-Navigation und -Übergängen
Ich habe in den letzten Jahren mit Ionic Kreuzplattformanwendungen entwickelt, aber die Integration mit Quasar ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.
For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- Für einen nativen mobilen Anblick in einer Quasar + capgo-App verwenden Sie stattdessen capacitor-Plugins anstelle von web-only UI-Kits wie Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
- @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions"— Ionic-Style-Seiteneinblendungen und iOS-Rückseite-Schub auf der WebView-Schicht, 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 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 Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrundtaste):
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>Umfasst die gerouteten Seiten in cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation auf. Duplizieren Sie Web-Über- oder Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.
Sehen Sie sich die vollständigen Anleitungen an: Mit @capgo/capacitor-native-navigation und Mit @capgo/capacitor-Übergängen verwenden.
Sichere Bereiche mit Tailwind
Für sichere Bereiche auf Geräten in Tailwind CSS verwenden @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas Nützlichkeiten 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 Nützlichkeiten wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt — wenn etwas für Ihre Quasar-Konfiguration fehlt, einen PR auf GitHub öffnen.
iOS-Layout-Probleme beheben (Viewport, Safe Area und horizontale Überschuss)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar sind, 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 der Viewport-Meta-Tag korrekt angewendet wird
In
(oder Ihrem Quasar-HTML-Template), setzen Sie den Viewport-Meta-Tag in index.html Behandeln Sie das iOS-Safe-Area aus einer einzigen Root-Wrapper <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:
Alle Seiteninhalte innerhalb von
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);
}Wiederholte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aus. .app-shellDoppeltes Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aus.
Doppeltes Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aus. @capgo/tailwind-capacitor, Sie können denselben Abstand auch mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf einer einzelnen Shell.
Setzen Sie Capacitor für iOS contentInset auf never erstes
In capacitor.config.ts, bevorzugen Sie native inset deaktivieren und lassen Sie 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',
},
};Die Mischung von Capacitor’s automatischem Inhaltseinsatz mit CSS env(safe-area-inset-*) Abstand ist eine häufige Ursache für doppelten Abstand.
Finden Sie das überlaufende Element
The übliche Schuldige ist ein Element, das 100vw, Tailwind w-screen, eine fixe Pixelbreite oder eine große min-width.
In Safari Web Inspector, ausführen Sie:
[...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,
}));, w-screen Mit Tailwind ersetzen Sie w-full mit 100vw / w-screenwenn möglich. Viele horizontale Überlaufprobleme kommen von
, dupliziertem sicherem Bereichsabstand oder einem festen Breitencontainer — nicht von der Viewport-Meta-Tags selbst.
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.
__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. CapgoEs ist sogar noch einfacher, live-Updates in Ihre App zu integrieren, sodass 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 __CAPGO_KEEP_0__ verwenden Creating Mobile Apps mit live-Updates, Quasar und Capacitor um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktworkflow in Capgo Plugin-Verzeichnis, 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, Ionic Enterprise Plugin Alternativen für den Produktworkflow in Ionic Enterprise Plugin Alternativen und Capgo Native Builds für den Produktworkflow in Capgo Native Builds.
