Grundlegendes Tutorial für den Einstieg in Cordova

Dieser Artikel stellt Ihnen hauptsächlich das grundlegende Einführungs-Tutorial von Cordova und einige bei seiner Verwendung auftretende Probleme vor Freunde, bitte folgen Sie dem Herausgeber, um gemeinsam zu lernen. Ich hoffe, es hilft allen.

Vorwort

Um Geld zu sparen und in aktuellen Projekten erfolgreich zu sein, ist die Anpassung an Cordova mit mehreren Plattformen keine gute Wahl. Persönlich denke ich, dass es ein Trend in der Zukunft sein könnte! Viele bekannte APPs wie Alipay und Taobao haben eine große Anzahl an HTML5-Seiten integriert! Beispielsweise handelt es sich bei den meisten aktuellen Apps unseres Unternehmens um H5-Seiten, und es scheint, als gäbe es in nativen Apps nicht viel zu tun. Man kann sich vorstellen, wie wichtig es ist, Cordova zu lernen!

Einführung

Cordova stellt eine Reihe gerätebezogener APIs bereit. Über diese Reihe von APIs können mobile Anwendungen über JavaScript auf native Gerätefunktionen wie Kameras, Mikrofone usw. zugreifen. Cordova bietet außerdem einen einheitlichen Satz von JavaScript-Bibliotheken sowie gerätespezifische native Code-Backends für diese Bibliotheken. Cordova unterstützt die folgenden mobilen Betriebssysteme: iOS, Android, Ubuntu Phone OS, Blackberry, Windows Phone, Palm WebOS, Bada und Symbian.

Der erste Schritt zum Einstieg: Laden Sie die Ressourcenbibliothek herunter und integrieren Sie sie in das Projekt

Um den Quellcode der Cordova-Bibliothek herunterzuladen, können Sie ihn von Github oder von der offiziellen Website herunterladen . Tatsächlich wird der Code auf der offiziellen Website auch auf Github veröffentlicht!

Offizielle Website: http://cordova.apache.org/

Github-Ressourcen-Download-Adresse: https://github.com/apache/cordova-ios

Verwendung Für die CocoaPods-Verwaltung von Bibliotheken von Drittanbietern habe ich zuvor cordova3.8.0 verwendet und es vor ein paar Tagen auf 4.0.1 aktualisiert. 4.0.1 unterstützt nur 8.0 und höher. Wenn Sie CocoaPods zum Aktualisieren unten verwenden, wird eine Fehlermeldung angezeigt! Passen Sie einfach auf!

Plattform :ios, '8.0'

Pod 'Cordova', '~> 4.0.1'

Schritt 2 der ersten Schritte: So integrieren Sie sich richtig in die Projekt-Cordova4.0.1-Bibliothek

1. Konfiguration Config.xml ist sehr wichtig

Config.xml ist eine globale Konfigurationsdatei, die viele Aspekte des Verhaltens einer Cordova-Anwendung steuert basiert auf der Spezifikation „Packaged Web Apps (Widgets)“ des W3C und wird erweitert, um Kernfunktionen der Cordova-API, Plugins und plattformspezifische Einstellungen anzugeben. Für Projekte, die mit der Cordova-CLI erstellt wurden (beschrieben in „Die Befehlszeilenschnittstelle“) Die Datei befindet sich im Verzeichnis der obersten Ebene:

Die allgemeine Bedeutung lautet: config.xml ist eine globale Konfigurationsdatei, die viele Aspekte des Verhaltens einer Cordova-Anwendung steuert. Diese plattformunabhängige XML-Datei basiert auf der W3C-Spezifikation für gepackte Webanwendungseinstellungen (Widgets) und erweitert sich, um Kernfunktionen der Cordova API, Plugins und plattformspezifische Einstellungen anzugeben. Mit Cordova CLI erstelltes Projekt (in der Befehlszeilenschnittstelle beschrieben)

http://cordova.apache.org/docs/en/6.x/config_ref/index.html Offizielle ausführliche Erklärung

2. Für die Anzeige der HTML5-Seite ist ein Container erforderlich. Hier wird die CDVViewController-Klasse zum Anzeigen und Steuern von HTML5 verwendet. Natürlich können Sie auch einen Container anpassen, um einige benutzerdefinierte Funktionen auszuführen.

So verwenden Sie es:

self.cordovaManageVC= [[CordovaManageVCalloc]init];

self.cordovaManageVC.startPage=@"http://www.baidu.com";

[self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];

3. Legen Sie den Benutzeragenten fest

- (instancetype)init {

self= [superinit];

if(self!=nil) {

//设置用户代理 如不设置无法调用与H5定制的JavaScript方法进行交互

NSString* original = [CDVUserAgentUtiloriginalUserAgent];

NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"];

self.baseUserAgent= userAgent;

}

returnself;

}

4. Benutzerdefinierte Plug-Ins müssen die CDVPlugin-Klasse von Cordova verwenden Integration mit Unterklassen CDVPlugin

/**

*返回控件

*

*@param command

*/

- (void)back:(CDVInvokedUrlCommand*)command;

Nach der Anpassung müssen Sie es in confing.xml konfigurieren

Das Obige ist die grundlegendste Verwendung von Cordova;

Einige Probleme bei der Verwendung von Cordova

Problem 1

Problem

[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.]
ERROR building one of the platforms: Error: cmd: Command failed with exit code

Lösung

ANDROID_HOME=D:\apps\Android\sdk
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

Problem 2

Problem

Error: Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

Lösung

Laden Sie das neueste Gradle-Paket von https://services.gradle.org/distributions/ herunter und installieren Sie es.

ANDROID_HOME=/home/kongxx/Android/Sdk
GRADLE_HOME=/apps/gradle-3.2.1
PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin

Problem 3

Problem

Bei der Verwendung von „cordova build android“ zum Packen wird ein Fehler gemeldet: Fehler: Gradle-Wrapper konnte im Android SDK nicht gefunden werden.

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper

Lösung

Überprüfen Sie das Verzeichnis /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper, daher habe ich die Android-Studio-Umgebung überprüft und festgestellt, dass es den oben genannten Inhalt in das Verzeichnis „plugins/android/lib/templates“ aufnehmen kann, also unbedingt kopieren.

$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/

Problem 4

Problem

Bei der Verwendung der Cordova-Verpackung tritt ein Fehler auf: Fehler: spawn EACCES

$ cordova build android
CHCP plugin after prepare hook:
 config-file set to http://www.tjdr.info/EWT/chcp.json
ANDROID_HOME=/home/kongxx/Android/Sdk
JAVA_HOME=/opt/jdk8
Subproject Path: CordovaLib
Error: spawn EACCES

Lösung

sudo chmod -Rf 755 ~/Android

Frage 5

Frage

Bei Verwendung des Browsertests in Cordova wird standardmäßig der Google-Chrome-Browser gestartet, z. B.:

cordova run browser

Lösung

Sie können –target verwenden, um den Browser anzugeben, den Sie verwenden möchten.

cordova run browser --target=opera
cordova run browser --target=firefox

Verwandte Empfehlungen:

Wie Cordova Vue-Projekte verpackt

Grundlegende Befehle für Cordova

Detaillierte Erklärung zum Packen von Cordova in eine Webanwendung

Das obige ist der detaillierte Inhalt vonGrundlegendes Tutorial für den Einstieg in Cordova. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!