Teilen Sie eine mobile HTML5Plus-Anwendung

Was ist die mobile HTML5Plus-App, die als 5+App bezeichnet wird, ist eine auf HTML, JS und CSS geschriebene App, die auf dem Mobiltelefon ausgeführt werden kann Telefonieren Sie nach Belieben über die erweiterte JS-API und erzielen Sie die gleichen leistungsstarken Funktionen und Leistung wie die native App.

Um es einfach auszudrücken: Verwenden Sie Webentwicklungstechnologie, um native mobile Anwendungen zu entwickeln.

5+App und mobiles Web

Obwohl die verwandten Technologien, die bei der 5+App- und mobilen Webentwicklung verwendet werden, im Allgemeinen gleich sind, ist der Unterschied zwischen den beiden immer noch offensichtlich.

• 5+App ist C/S und Web ist B/S.

• 5+App ist ein unabhängiger Client und Anwendungsressourcen können normalerweise nur statische Dateien sein. Servervorlagen wie PHP und JSP verfügen nicht über Parser, um sie zu verarbeiten.

• 5+App ist in einem Paket mit den Suffixen apk und ipa verpackt, bei dem es sich um eine native mobile Anwendung handelt.

• window.plus Erweiterte API, basierend auf der 5+Runtime-Engine. Gewöhnliche Browser integrieren diese Engine nicht und die Webentwicklung verwendet diese APIs normalerweise nicht.

Vorbereitung

Entwicklungstools

HBuilder verfügt über eine integrierte Entwicklungsumgebung für mehr als 5 Apps, daher müssen Sie diese IDE zuerst herunterladen.

Registrieren Sie ein Konto

Nachdem Sie HBuilder heruntergeladen und entpackt haben, starten Sie die IDE. Bei der ersten Nutzung müssen Sie ein Konto registrieren, um die spätere Verwaltung der Anwendung und der Aktivitäten in der Community zu erleichtern.

Ausrüstung

Da es keine iOS-Geräte oder Mac OS-Maschinen gibt, wird in dieser Sharing-Serie die Entwicklung von Android-Anwendungen unter Windows-Systemen als Beispiel verwendet.

Ein Computer und ein Mobiltelefon. Das Mobiltelefon verfügt vorzugsweise über Android 4.4 und höher, Emulatoren werden nicht empfohlen. Außerdem wird ein USB-Kabel benötigt und natürlich unterstützt HBuilder auch WLAN-Debugging.

Die erste 5+App

Neue Anwendung

• Starten Sie HBuilder und melden Sie sich an.

• Menü-> Datei-> Mobile App

• Die Vorlage muss vorerst nicht angepasst werden , geben Sie den Anwendungsnamen „HelloWorld“ ein und klicken Sie zum Fertigstellen.

index.html

Die Einstiegsseite der Anwendung ähnelt im Konzept der Einstiegsseite des Webs. Der Standardwert ist index.html im Stammverzeichnis der Anwendung, dies kann angepasst werden.

manifest.json

5+App-Konfigurationsdatei, die zum Konfigurieren von Anwendungsinformationen verwendet wird. HBuilder führt eine spezielle Verarbeitung dieser Datei durch und bietet eine visuelle Bearbeitungsoberfläche.

• Anwendungsinformationen

• Anwendungsname: Dies ist der Name Ihrer Anwendung, der auf dem Desktop des Mobiltelefons angezeigt wird.

• appid: Diese wird zugewiesen, wenn die 5+App erstellt wird. Ändern Sie sie nicht. Nicht zu verwechseln mit der AppID von iOS oder der Appid auf anderen Plattformen von Drittanbietern.

• Versionsnummer: Versionsnummer der Anwendung

• Seiteneintrag: Es handelt sich um die Seite auf der Homepage, die geändert werden kann.

• Anwendungsbeschreibung: Beschreiben Sie kurz die Anwendungsinformationen

• Symbolkonfiguration

• ist das Logo der Anwendung. Befolgen Sie die Anweisungen, um ein Bild zu erstellen, das den Spezifikationen entspricht, und generieren Sie dann mit einem Klick ein Ersatzbild.

• Startbild

• Das Splash-Bild ist das Platzhalterbild beim Start der Anwendung. QQ ist ein Pinguin ist das der Mond?

• Startoptionen: Verwenden Sie normalerweise nur die Standardeinstellungen und passen Sie sie nach Bedarf an.

• Bildeinstellungen: Erstellen Sie nach Bedarf PNG-Bilder in entsprechenden Größen und wählen Sie die Konfiguration aus.

• SDK-Konfiguration

• Wenn Sie einige SDK-Funktionen von Drittanbietern verwenden, müssen Sie die entsprechenden Informationen konfigurieren.

• Die SDK-Aktivierung erfordert das Ausfüllen der Informationen und die Registrierung auf der entsprechenden offenen Plattform eines Drittanbieters.

• Modulberechtigungskonfiguration

• Für die Aktivierung einiger Module müssen Berechtigungen konfiguriert werden

• Seitenverweisbeziehung

• Ich weiß nicht viel darüber, habe nur das Handbuch gelesen.

• Codeansicht

• Der Quellcode-Teil der Konfiguration, nicht alle Konfigurationen bieten eine visuelle Bearbeitungsansicht.

Auf einem echten Gerät ausgeführt

Verbinden Sie Ihr Telefon mit dem Computer. HBuilder erkennt automatisch das mit dem Computer verbundene Gerät. Menü -> Ausführen -> Auf einem echten Gerät ausführen, wählen Sie einfach Ihr Gerät aus. Ein Debug-Basis-HBuilder wird zum ersten Mal installiert. Wenn sich die HBuilder-IDE-Version ändert, überschreibt der reale Maschinenbetrieb die alte Version der HBuilder-Basis.

Debugging

• Aufgrund des Stils der Seite wird empfohlen, zum Debuggen den mobilen Chrome-Browsermodus des Computers zu verwenden.

• Wenn das echte Android-Gerät läuft, synchronisiert die Basis auf dem Mobiltelefon jedes Mal den Code, wenn die Datei geändert und gespeichert wird.

• Android kann weiterhin Chrome RemoteDebugging zum Debuggen verwenden, erfordert jedoch ein Gerät mit Android 4.4 oder höher und erfordert zum ersten Mal das Umgehen der Mauer.

Call 5+ API

Kapseln Sie einfach den Ereignisrückruf des erweiterten API-Ladeabschlusses

var plusReady = function(callback) {
  if(window.plus) {
    callback();
  } else {
    document.addEventListener('plusready', callback);
  }
};

Lesen Sie dann den Netzwerktyp der aktuellen Geräteverbindung und auf der Seite ausgeben.

plusReady(function() {
  var netType = plus.networkinfo.getCurrentType();
  document.write('当前网络类型为：' + netType);
});

Bei der Ausführung auf einer realen Maschine können Sie den Inhalt auf der Seite „Der aktuelle Netzwerktyp ist: 3“ sehen, bei der es sich um die WLAN-Netzwerkumgebung handelt.

Paket

• Bestätigen Sie, dass die Informationen in manifest.json korrekt sind

• Wenn das Logo und das Begrüßungsbild nicht konfiguriert sind Standardmäßig werden HBuilder-bezogene Bilder verwendet.

• Menü-> Cloud Packaging-Build natives Installationspaket

• Überprüfen Sie Android, das Android-Zertifikat ist relativ einfach Gleiches gilt dafür, ob Sie das fertige von DCloud bereitgestellte verwenden oder es selbst generieren.

• Der Paketname muss strikt den Formatspezifikationen der Android-Paketnamen entsprechen und darf nicht zufällig geschrieben werden. Passen Sie es hier an und ändern Sie es in com.helo.html5plus.

• Wenn ein Fehler in den Konfigurationsinformationen vorliegt, wird eine Eingabeaufforderung angezeigt und Sie müssen diese korrekt ändern, bevor Sie fortfahren können.

• Wenn alles korrekt ist, klicken Sie auf „Paket“ und warten Sie.

• Nachdem die Verpackung abgeschlossen ist, wird sie automatisch in das entsprechende Verzeichnis heruntergeladen.

Installation

Installieren Sie die aus dem Cloud-Paket heruntergeladene APK auf Ihrem Telefon und starten Sie die Anwendung, um die aktuellen Netzwerkstatusinformationen anzuzeigen. Dann wurde unsere erste 5+App erfolgreich produziert.

Verwandte Empfehlungen:

Einführung in die mobile HTML5Plus-Entwicklung

Teilen von Beispielen für die Entwicklung mobiler HTML5plus-Anwendungen

HTML5-imitierte WeChat-Chat-Schnittstelle und Freundeskreiscode

Das obige ist der detaillierte Inhalt vonTeilen Sie eine mobile HTML5Plus-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!