In diesem Tutorial beginnen wir mit einer neuen Angular App und wechseln in das native mobile App-Bereich mit Capacitor. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um ein nativem mobile Gefühl zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.
Capacitor ermöglicht Ihnen, Ihre Angular-Web-Anwendung leicht in eine native mobile App umzuwandeln, ohne dass signifikante Änderungen oder ein neues Wissen wie React Native erforderlich sind.
Mit nur wenigen einfachen Schritten können die meisten Angular-Anwendungen in mobile Apps umgewandelt werden.
In diesem Tutorial werden Sie durch den Prozess geführt, beginnend mit einer neuen Angular-App und dann die Einbindung von Capacitor zum Übergang in den Bereich der native mobile Apps. Sie können auch Capgo Native Navigation, Transitions und tailwind-capacitor für sichere Bereiche verwenden.
Über Capacitor
CapacitorJS ist ein Game-Changer! Sie können es leicht in jede Web-Projekt einbinden und es wird Ihre Anwendung in eine native Webview einhüllen, die native Xcode- und Android Studio-Projekte für Sie generiert. Außerdem bieten seine Plugins Zugriff auf native Geräte-Funktionen wie die Kamera über eine JS-Brücke.
Mit Capacitor erhalten Sie eine fantastische native mobile App ohne komplizierte Einrichtung oder steile Lernkurve. Seine schlanken API und gestreamten Funktionen machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie leicht es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!
Vorbereitung Ihrer Angular-Anwendung
Um eine neue Angular-Anwendung zu erstellen, führen Sie den folgenden Befehl aus:
ng new my-app
cd my-appWählen Sie "Angular" aus, wenn Sie zur Auswahl der Angular-Version aufgefordert werden.
Um eine native mobile Anwendung zu erstellen, benötigen wir ein export von unserem Projekt. Daher fügen wir ein einfaches Skript in unserem package.json hinzu, das verwendet werden kann, um die Angular-Anwendung zu erstellen und zu kopieren:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Nachdem Sie den Befehl buildausgefü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 Angular-Anwendung hinzufügen
Um jede Webanwendung in einen native mobile Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Anweisung.
Zunächst können wir das 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
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 Angular 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 androidBis zu diesem Punkt sollten Sie neue iOS und context: Seite/Bereich: Capgo-Marketing-Website. Rolle: Kurze Benutzeroberflächenebene oder Navigationsitem. Gesehen in: Seite trust.astro. Nachrichtsschlüssel `und` (Und). Android
Ordner in Ihrem Angular-Projekt erkennen können.
To haben Sie Zugriff auf das Android-Projekt später, müssen Sie Android Studio. Für iOS benötigen Sie einen Mac und sollten Xcode.
installieren. capacitor.config.ts Capacitor.config.ts -File in Ihrem Projekt finden, das einige grundlegende __CAPGO_KEEP_0__
-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der capacitor.config.json -Eintrag, der auf den Ergebnis der Build-Befehl verweisen muss. Derzeit ist er jedoch falsch. webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Probieren Sie es aus, indem Sie die folgenden Befehle ausführen:
npm run build
npx cap syncDer erste Befehl npm run build werden einfach Ihr Angular-Projekt bauen und die statische Build-Kopie anlegen, 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, 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 das App auf einem Gerät!
Erstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Anwendungen benötigen Sie, dass Sie Android Studio installiert haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App-Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.
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 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 Ihren Signierungsaccount einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Developer Programm angemeldet 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 Ihre Angular-Webanwendung erfolgreich auf einem Mobilgerät bereitgestellt. Hier ist ein Beispiel:
Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…
Capacitor Live Reload
Mit der Zeit bist du wahrscheinlich daran gewöhnt, dass du Hot Reload mit allen modernen Frameworks hast, und die gute Nachricht ist, dass du dieselbe Funktionalität auf einem Mobilgerät mit minimalen Anstrengungen haben kannst!
Zugriff auf deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk erhalten, indem du die Capacitor App so einstellst, dass sie die Inhalte von der spezifischen URL lädt.
Der erste Schritt besteht darin, deine lokale IP-Adresse zu ermitteln. Wenn du einen Mac verwendest, kannst du dies herausfinden, indem du den folgenden Befehl in der Terminal-Anwendung ausführst:
ipconfig getifaddr en0Bei Windows ausführen :
ipconfigSuch dann nach der IPv4-Adresse.
Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem capacitor.config.ts Datei hinzufügen:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.app',
appName: 'my-app',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.x.xx:4200',
cleartext: true
}
};
export default config;Stellen Sie sicher, dass Sie den richtigen IP- und Port verwenden, ich habe in diesem Beispiel die Standard-Port von Angular verwendet.
Jetzt können wir diese Änderungen, indem wir sie in unser natives Projekt übernehmen:
npx cap copyDer copy Befehl ähnelt sich sync, aber er wird nur die Änderungen im Web-Ordner und der Konfiguration übernehmen, ohne das natives Projekt zu aktualisieren. Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer Angular-Anwendung ändern,
automatisch neu geladen und die Änderungen angezeigt! Sie können Ihre App nun ein weiteres Mal über Android Studio oder Xcode bereitstellen. Anschließend wird, wenn Sie etwas in Ihrer Angular-Anwendung ändern, automatisch neu geladen und die Änderungen angezeigt!
Bedenken Sie sich Beachten Sie, dass Sie, wenn Sie neue Plugins wie die Kamera installieren, immer noch eine Neuverteilung Ihres nativen Projekts durchführen müssen. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschreibe erfolgen kann.
Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-Port für Angular zum Zweck der Demonstration an.
Verwendung von Capacitor-Plugins
Lassen Sie uns nun einen Blick darauf werfen, wie man ein 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 Teilen-Plugin, aber es bringt trotzdem den nativen Teilen-Dialog auf! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() Funktion in unserer App aufrufen, also ändern wir das src/app/app.component.ts in Folgendes:
import { Component } from '@angular/core';
import { Share } from '@capacitor/share';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app';
async share() {
await Share.share({
title: 'Open Youtube',
text: 'Check new video on youtube',
url: 'https://www.youtube.com',
dialogTitle: 'Share with friends'
});
}
}Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisationsoperation 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 Teilen-Dialog sehen!
Als Nächstes können Sie die App so anpassen, dass sie sich auf iOS und Android wie ein natives Gerät anfühlt, mit Capgo Navigation und Übergängen, und die häufigen iOS-Anzeigefehler beheben, die zu horizontaler Überlauf oder gekürzten sicheren Bereichen führen.
Ein UI, das sich wie ein natives Gerät anfühlt, mit Capgo Native Navigation und Übergängen
Ich habe in den letzten Jahren mit Ionic gearbeite, um cross-plattformische Anwendungen zu bauen, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.
haben. Für einen nativen mobilen Look in einer Angular + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-only-UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — ein natives Navbar, ein flüssiges Glas-Tastenfeld auf iOS und ein abgedunkelter Tastenfeld-Stil auf Android. Ihre Angular-Router behält die Routenstatus; das Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Ionic-Style-Seiteneinblendungen und iOS-Rückwärts-Schleifen im WebView-Schicht, ohne Ionic-UI zu übernehmen.
Install beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx 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 Glass-Liquide-Taste (iOS verwendet die Systemeigene Rendering; Android verwendet einen verschwommenen WebView-Hintergrund):
import { inject } from '@angular/core';
import { Router } from '@angular/router';
const router = inject(Router);
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.navigate([`/${id}`]);
});
Add native page transitions in your app shell:
```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';
initTransitions({ platform: 'auto' });
@Component({
selector: 'app-root',
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
<router-outlet></router-outlet>
</cap-router-outlet>
`,
})
export class AppComponent implements AfterViewInit {
@ViewChild('outlet') outlet?: ElementRef<HTMLElement>;
constructor(private router: Router) {}
ngAfterViewInit() {
if (this.outlet?.nativeElement) {
setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
}
}
openSettings() {
setDirection('forward');
this.router.navigate(['/settings']);
}
}Wrap routed Pages in cap-router-outlet, cap-pageund cap-contentund rufen Sie setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie Web-Über- oder Fußzeilen nicht, wenn die native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-Navigation und Verwenden Sie @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 nutzliche Funktionen und andere Capacitor-freundliche Tailwind-Plugins:
bun add -D tailwind-capacitorIn src/styles.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie nützliche Funktionen 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 Angular-Einrichtung fehlt, öffnen Sie ein PR auf GitHub.
iOS-Layout-Probleme beheben (Viewport, Safe Area und horizontale Überschuss)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, hilft das Hinzufügen oder Ändern 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
, setzen Sie den Viewport-Metatag in src/index.htmlBehandeln Sie das 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,
app-root {
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);
}Zweifacher Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen. .app-shellMit
@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitorSind Sie in der Lage, denselben Abstand mit Hilfsmitteln wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.
Setzen Sie Capacitor iOS contentInset zu never erstes
auf capacitor.config.ts, bevorzugt native inset disabled 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: 'www',
ios: {
contentInset: 'never',
},
};Mischen Sie Capacitor’s automatische Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.
Finden Sie das reale überlaufende Element
Der übliche Täter ist ein Element, das 100vwMit Tailwind w-screeneine feste Pixelbreite oder eine große min-width.
In Safari Web Inspector, ausführen:
[...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-screendoppeltem sicheren Bereich-Padding oder einem festschrittigen 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ügung von Capgo, es ist sogar einfacher, live Aktualisierungen in Ihre App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihre Angular-Anwendung einfügen können, lesen Sie bitte das nächste Artikel:
Fortsetzen Sie mit Building Mobile Apps mit Angular und Capacitor
Wenn Sie Building Mobile Apps mit Angular und Capacitor zum Planen von nativen Medien- und Schnittstellenverhalten verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Verwenden Sie @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten, Verwenden Sie @capgo/capacitor-video-player für die native Fähigkeit in Verwenden Sie @capgo/capacitor-video-player, @capgo/capacitor-video-player zur Implementierungsdetail in @capgo/capacitor-Video-Player, und Mit @capgo/capacitor-Native-Navigation zur nativen Fähigkeit in Mit @capgo/capacitor-Native-Navigation.
