Wir beginnen mit der Erstellung einer neuen Web-App mithilfe QuasarSpäter werden wir erfahren, wie man es in eine mobile App umwandelt, indem man es mit Capacitor kombiniert. Wenn Sie möchten, dass Ihre App auf dem Mobilgerät besser aussieht.
Mit Capacitor können Sie Ihre Quasar-Web-Anwendung in eine mobile App umwandeln, ohne viele schwierige Dinge tun oder eine völlig neue Art von App-Entwicklung wie bei React Native lernen zu müssen.
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 in Sekunden live aktualisieren.
About Capacitor
CapacitorJS ist wirklich ein Game-Changer! Sie können es problemlos in jedes Web-Projekt einbinden 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.
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!
Ihre Quasar-Anwendung vorbereiten
Um eine neue Quasar-Anwendung zu erstellen, führen Sie bitte folgenden Befehl aus:
npm init quasar
Pick the “App with Quasar CLI” option then “Quasar v2”.
Um eine native mobile App zu erstellen, benötigen wir ein Export Unsere Projekt. Daher soll ein einfacher Skript in unserem package.json Das Skript kann verwendet werden, um das Quasar-Projekt zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "quasar build"
}
}Nachdem Sie die Kommandozeile ausgeführt haben generateSie sollten ein neues dist Ordner an der Wurzel Ihres Projekts finden.
This folder will be used by Capacitor later on, but for now, we must set it up correctly.
Capacitor in Ihrer Quasar App hinzufügen
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 sync Zuerst können wir das
__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI als Entwicklungsabhängigkeit installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe 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 beobachten können.
Das sind echte native Projekte!
Um später auf das Android-Projekt zuzugreifen, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode installieren. Xcode.
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 enthalten, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der
webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie das __CAPGO_KEEP_0__.config.json:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Datei und aktualisieren Sie den Pfad für den Web-Ordner, der ist der "webDir". Sie können dies auch tun, indem Sie den folgenden Befehl ausführen:
npm run generate
npx cap syncDie erste Befehlszeile npm run generate wird einfach Ihren Quasar-Projekt bauen und die statische Buildkopie anlegen, während die zweite Befehlszeile npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren wird, damit sie in einer App angezeigt werden können.
Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, 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 mal das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, müssen Sie Xcode installiert haben, und für Android-Apps müssen 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 Program für iOS und im Google Play Console für Android.
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 die Bereitstellung 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, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum benötigen Sie eine Registrierung im Developer Program). 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 Ihre Quasar-Web-App erfolgreich auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:
Aber warten Sie, 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 den traditionellen App Store-Submission-Prozess bereitzustellen. Dies kann eine praktische Möglichkeit sein, um schnell Fehler zu beheben oder kleine Updates an einer App vorzunehmen, ohne auf den App Store-Review-Prozess warten zu müssen.
Integrieren Sie Capgo in Ihre Quasar-Anwendung ist ein einfacher Prozess, der Ihnen ermöglicht, die Macht von Echtzeit-Updates zu nutzen. Diese Schritt-für-Schritt-Anleitung führt Sie durch die Integration und Implementierung von Capgo Live Update, um Ihnen eine störungsfreie Aktualisierung zu ermöglichen.
Registrieren Sie sich und zugreifen Sie 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:
Vom Befehlszeilenfenster aus, direkt in der Wurzel Ihrer Capacitor-Anwendung, führen Sie:
npm i @capgo/capacitor-updater && npx cap sync Um das Plugin in Ihre Capacitor-Anwendung zu installieren.
Und fügen Sie dann Ihrem App-Code diesen code als Ersatz für CodePush ein:
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Dies wird dem native Plugin mitteilen, dass die Installation erfolgreich war.
Anmelden bei Capgo CLOUD:
Zuerst verwenden Sie den all apikey vorhanden in Ihrem Konto, um mit dem CLI einzuloggen:
`npx @capgo/cli@latest login YOU_KEY`Hinzufügen Ihres ersten Apps:
Beginnen wir mit der Erstellung einer App in Capgo Cloud mit der CLI.
npx @capgo/cli@latest app addDiese Anweisung verwendet alle in der Capacitor Konfigurationsdatei definierten Variablen, um die App zu erstellen.
Hochladen Ihrer ersten Version:
Führen Sie den Befehl aus, um Ihre code zu erstellen und es an Capgo zu senden:
npx @capgo/cli@latest bundle upload`Standardmäßig wird der Versionsname aus Ihrem package.json-File genommen.
Überprüfen Sie ein: Capgo Wenn das Build vorhanden ist.
Ihr könnt es sogar mit meinem mobil Sandbox-App testen.
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 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 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 empfängt, 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.
Glückwunsch! 🎉 Sie haben Ihre erste Live-Update erfolgreich 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.
Verwenden Sie Capacitor-Plugins
Lasst uns einen Blick darauf werfen, wie man einen Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt 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 Share-Plugin, aber es bringt trotzdem den native Share-Dialog auf! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() function in 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>wie folgt:
npx cap syncWie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und die App dann auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte Folgendes aus:
Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.
Als nächstes können Sie die App mit Capgo-Navigation und Übergängen noch nativer auf iOS und Android anfühlen und gängige iOS-Anzeigefehler, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen, beheben.
Natürlicher Anblick mit __CAPGO_KEEP_0__-Native Navigation und Übergängen. Ich habe bereits seit Jahren mit Ionic Um cross-plattform-Anwendungen zu erstellen, aber die Integration mit Quasar ist hackig und selten wertvoll, wenn Sie bereits haben Tailwind CSS.
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-Seitentransitionen und iOS-Rückwärts-Schub auf der WebView-Schicht, ohne Ionic-UI 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 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 verschwommene Liquid Glass-Tastenleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene 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-Seitentransitionen 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>Wie Sie geroutete Seiten umschließen cap-router-outlet, cap-page, und cap-content, und aufrufen setDirection('forward') oder setDirection('back') vor dem Navigieren. Duplizieren Sie Web-Überschriften oder -Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als veröffentlicht) tailwind-capacitor auf npm). Es bietet safe-areas Utilitäten 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 Utilitäten wie pt-safe, pb-safe, und px-safe anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Quasar-Konfiguration fehlt, env(safe-area-inset-*) einen PR auf __CAPGO_KEEP_0__ open a PR on GitHub.
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr
oder passen Sie den Viewport-Tag an, reicht das normalerweise nicht aus. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr
Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird
In index.html (oder Ihrem Quasar-HTML-Template), setzen Sie die Viewport-Metatag in <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandeln Sie das iOS-Sicherheitsbereich aus einer einzigen Root-Wrapper heraus
Erstellen Sie ein einzelnes App-Shell und fügen Sie dort Sicherheitsbereich-Padding hinzu — 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);
}Umgeben Sie alle Seiteninhalte mit .app-shell. Doppelte Sicherheitsbereich-Padding in Kopfzeilen, Modalen und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitorkönnen Sie denselben Padding mit Hilfsmitteln wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.
Setzen Sie Capacitor iOS contentInset zu never erstes
In capacitor.config.ts, bevor Sie native Einstellungen deaktivieren und CSS (oder Native Navigation’s) contentInsetMode: 'css') die sichere Bereiche übernehmen lassen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist/spa',
ios: {
contentInset: 'never',
},
};Die Mischung von Capacitor’s automatischer Inhaltseinstellung mit CSS-Paddings ist eine häufige Ursache für doppelte Abstände. env(safe-area-inset-*) Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das
, Tailwind 100vw, eine feste Pixelbreite oder eine große w-screenIn Safari Web Inspector, führen Sie: min-width.
In Safari Web Inspector, run:
[...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 Viele horizontal auslaufende Probleme kommen von 100vw / w-screen, dupliziertem sicheren Bereichs-Puffer oder einem festsitzenden 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 Hinzufügung von Capgokontext:HTML-Textfragment aus einem längeren Capgo-UI-String (Elternschlüssel `submitting_a_pr_to_capgo`). Seite/Bereich: Capgo-Marketing-Website. Rolle: Website-Kopfsatz. Gesehen in: Seite contributing.astro. Bewahren Sie Capgo-Produkt- und -Markenbegriffe sowie Entwicklertitel genau.
If you would like to learn how to add Capgo to your Next.js app, take a look at the next article :
Wenn Sie gerne erfahren möchten, wie Sie Capacitor in Ihre Next.js-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel :
Fortsetzen Sie von Creating Mobile Apps mit live-aktuellen Updates, Quasar und __CAPGO_KEEP_0__. Mit Capacitor live aktualisierte Mobile Apps erstellen, Quasar und Capacitor. um native Plugin-Arbeit zu planen, verbinden Sie es mit Capgo Plugin-Verzeichnis zur Produktionsablauf 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 zur Produktionsablauf in Ionic Enterprise Plugin Alternativen, und Capgo Native Builds zur Produktionsablauf in Capgo Native Builds.
