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.
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);
}
};Nach dem Login kopieren
Lesen Sie dann den Netzwerktyp der aktuellen Geräteverbindung und auf der Seite ausgeben.
plusReady(function() {
var netType = plus.networkinfo.getCurrentType();
document.write('当前网络类型为：' + netType);
});Nach dem Login kopieren
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!
