Inhaltsverzeichnis
So verwenden Sie
Laufzeit
SDK
Unterschiede
Grundlegende Architektur
Webview
plus
Eher geeigneter Umfang
Nicht empfohlene Situationen
Ähnliche Produkte
Heim Web-Frontend H5-Tutorial Teilen von Beispielen für die Entwicklung mobiler HTML5plus-Anwendungen

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

Feb 08, 2018 pm 03:23 PM
h5 Entwicklungsbeispiel

Was ist HTML5plusDCloud bietet eine Lösung für die Entwicklung mobiler Anwendungen mithilfe traditioneller Webtechnologien. In diesem Artikel werden hauptsächlich Entwicklungsbeispiele für mobile HTML5plus-Anwendungen vorgestellt, in der Hoffnung, allen zu helfen.

Erweiterte Version der mobilen Browser-Engine bringt HTML5 auf natives Niveau!

Produktslogans sind immer übertrieben, achten Sie also nicht auf diese Details.

Tipps

  • HTML5plus hat einen langen Namen, daher wird es auch HTML5+ oder kurz 5+ genannt.

  • Mobile Anwendungen, die mit dieser Engine entwickelt wurden, werden auch als 5+App bezeichnet.

  • Das zugehörige SDK heißt 5+SDK.

So verwenden Sie

Laufzeit

Das heißt, Sie verwenden HBuilder, ein weiteres Produkt der Firma DCloud, für die direkte Entwicklung und das Debuggen.

SDK

Integrieren Sie 5+SDK in Ihre eigene native Anwendung, und Sie können die erweiterte JS-API in Ihrer Anwendung verwenden.

Unterschiede

  • Die Laufzeitmethode kann die von DCloud bereitgestellte Cloud-Verpackung direkt nutzen, ohne eine lokale Verpackungsumgebung aufzubauen.

  • Die Laufzeitmethode erfordert nicht die Fähigkeit, die native Entwicklung zu beherrschen. Nutzen Sie einfach die erweiterte API sinnvoll.

  • Die SDK-Methode kann mehr Anforderungen erfüllen, erfordert jedoch die Fähigkeit, die native Entwicklung zu beherrschen.

Ein kurzes Verständnis der
Laufzeitmethode erfordert nicht, dass Entwickler den Basisteil der nativen Anwendung selbst entwickeln. 5+ erledigt dies für Entwickler hier und muss nur eingereicht werden Die Anwendung packen Sie einfach die Ressourcen in die Cloud.
Die SDK-Methode ist anders. In diesem Fall wird 5+SDK basierend auf der ursprünglichen nativen Anwendungsbasis erweitert. Daher müssen Entwickler ihre eigene native Entwicklungsumgebung erstellen und einige native Entwicklungsarbeiten durchführen.

Grundlegende Architektur

Laut der offiziellen Dokumentation ist die Entwicklungsanleitung für Plug-Ins von Drittanbietern für die Android-Plattform grob in eine dreischichtige Struktur unterteilt. Zum leichteren Verständnis ist die Erläuterung in vier Teile erweitert.

Webview

kann als einfacher Browser verstanden werden, HTML, CSS und JavaScript sind alle vorhanden.

plus

Dieser Teil befindet sich in Webview. Basierend auf der ursprünglichen Browserumgebung kann die Erweiterung die API nativer Funktionen aufrufen. window.plus

JS Bridge

ist für die Verbindung der JavaScript-Schicht und der Native-Schicht verantwortlich.

  • Empfangt die Anfrage von der JavaScript-Ebene und benachrichtigt die native Ebene, entsprechend zu reagieren.

  • Empfangt das Antwortergebnis von der nativen Ebene und benachrichtigt die JavaScript-Ebene, das Ergebnis zu empfangen.

Nativ

d. h. Android und iOS, und ist auch der Kernbestandteil von HTML5plus.

Der Prozess der Ausführung eines Aufrufs

Nehmen Sie als Beispiel das Abrufen der Anwendungsversionsnummer

plus.runtime.version;
Nach dem Login kopieren
  1. JS-Layer-Aufruf

    , Webview an JS Bridge Stellen Sie eine Anfrage. plus.runtime.version

  2. JS Bridge empfängt die Anfrage und benachrichtigt die native Ebene, die Informationen zur Anwendungsversionsnummer zu lesen.

  3. Die native Ebene wird ausgeführt, ruft das Ergebnis ab und benachrichtigt die JS Bridge-Ebene über das entsprechende Ergebnis.

  4. JS Bridge ruft die entsprechenden Ergebnisse von der nativen Ebene ab und benachrichtigt die entsprechenden Webview-Ergebnisinformationen.

  5. Die JS-Schicht erhält die Versionsinformationen der Anwendung.

Beschweren Sie sich darüber

Ich persönlich denke, dass jedes Produkt und jedes Unternehmen sein eigenes Designkonzept und seine eigene Geschäftsstrategie hat. Unterschiedliche Benutzer werden immer unterschiedliche Bedürfnisse und Meinungen haben.

Daher müssen Sie bei der Technologieauswahl Ihre eigenen Bedürfnisse und die untersuchten Produktinformationen verstehen. In der DCloud-Community erscheinen häufig Beiträge wie „Warum gibt es keine XXX-API“, „Warum nicht das XXX-SDK integrieren“, „Kann nicht nativ entwickelt werden, ich hoffe, der Beamte kann die XXX-API erweitern“ usw. Was die spezifischen Gründe für solche Probleme angeht, hat jeder sein eigenes Verständnis und wird hier nicht erörtert.
Bei der Technologieauswahl ist es am besten, es selbst auszuprobieren. Erwarten Sie nicht, dass der Produktlieferant Ihnen die beste Antwort gibt, denn er wird die Benutzer nicht dumm abschrecken.
------Wunderschöne Trennlinie------
Im Folgenden werde ich meine persönlichen Erfahrungen und Erkenntnisse teilen, in der Hoffnung, anderen Entwicklern dabei zu helfen, bei der Auswahl der Technologie Referenzen zu finden.

Vorteile

  1. Geringe Lernkosten, solange Sie grundlegende Webentwicklungsfähigkeiten beherrschen, können Sie loslegen.

  2. Cloud-Paketierung, es ist nicht erforderlich, Android- und iOS-Entwicklungsumgebungen lokal für die Paketverarbeitung zu erstellen.

  3. Eine Reihe von Codes kann mit nur wenig Kompatibilitätsverarbeitung in zwei Pakete für Android und iOS zusammengestellt werden.

  4. Ich habe es nicht erwartet, ich werde es der Diskussion hinzufügen.

Unzureichend

  1. plus.ModuleName.* Die von plus.ModuleName.* bereitgestellte API ist begrenzt. Sie müssen über ein gewisses Maß an nativen Entwicklungskenntnissen verfügen.

  2. Beruht auf der eigenen Webansicht des Telefons, daher ist die Leistung auf einigen Telefonen nicht ideal. Dies hat gewisse Auswirkungen auf bestimmte Geschäftsprodukte.

  3. Nach Punkt 1 erfordert die Implementierung bestimmter Funktionen, dass Entwickler SDKs zur Erweiterung integrieren. Zum Beispiel Bluetooth, Anwendungshintergrundpersistenz usw. Dies erfordert auch, dass Entwickler über native Entwicklungsfunktionen verfügen.

  4. Einige Funktionen sind aufgrund von Kompatibilitätsproblemen nicht vollständig implementiert. Zum Beispiel die Ecksymbole von Desktopsymbolen usw. Natürlich ist Android stark fragmentiert und einige Mängel sind verständlich.

  5. Einige Teile des Dokumentinhalts werden nicht klar genug erklärt. Außerdem ist das Layout des Dokuments etwas seltsam.

  6. Auf weitere Fallstricke bin ich bisher nicht gestoßen, vielleicht kenne ich sie noch nicht.

Eher geeigneter Umfang

Basierend auf offiziellen Fallpräsentationen und persönlichen Entwicklungserfahrungen. Zusammenfassend lässt sich sagen, dass die 5+ App-Entwicklung besser für die folgenden Situationen oder Produkte geeignet ist:

  • Start-up-Unternehmen, die Anwendungen schnell starten müssen.

  • Nachrichteninformationen (36Kr), E-Commerce (HiMall), Content-Sharing (Fengqiaoju Flowers), Essen zum Mitnehmen und die meisten anderen O2O-Geschäftsprodukte usw.

  • Kerngeschäftsfunktionen sind nicht auf bestimmte native Funktionen angewiesen

  • Einige Unternehmensanwendungen können auch auf spezifischen Anforderungen basieren.

Nicht empfohlene Situationen

Einige Situationen können nicht verallgemeinert werden, daher basieren die Erklärungen auf bestimmten Situationen.

  • Hängt stark von einigen nativen Funktionen ab, z. B. der Notwendigkeit, benutzerdefinierte Kartenlinienzeichnungen in der Anwendung zu implementieren, der Notwendigkeit von Bluetooth-Modulen für die Datenkommunikation usw.

  • Das Kerngeschäft ist Instant Messaging (IM), und wir möchten kein JS-Versions-SDK von Drittanbietern verwenden.

  • Muss Dateien lesen und schreiben, z. B. kurze Videos aufnehmen, Bilder bearbeiten, Videos bearbeiten usw.

  • Einige weitere „Rogue“-Funktionen, wie z. B. Anwendungshintergrundpersistenz, Push-Service-Persistenz usw.

  • Kontrollieren Sie Anwendungsberechtigungen, z. B. das Verbot von Screenshots. Dies kann nur in der nativen Ebene gehandhabt werden und Sie kennen die Android-Kompatibilität.

Viele der oben genannten Situationen müssen durch die Entwicklung der nativen Ebene gelöst werden. Natürlich können 5+ SDKs gleichzeitig integriert werden, und die relevanten Erweiterungs-APIs können weiterhin integriert werden verwendet werden.

Ähnliche Produkte

  • cordova

  • apicloud

  • appcan

  • ionisch

  • weex

  • nativ reagieren

Aktuell Das habe ich im Folgenden erfahren. Einige Produkte wurden kurz getestet und einige Produkte wurden überhaupt nicht getestet, daher werde ich hier keine Vergleiche anstellen oder übermäßige Kommentare abgeben.

Ergänzung:

  • HBuilder ist eine IDE und heißt auch die Basis für echtes Maschinen-Debugging. Zusammen bilden diese beiden die Umgebung und Werkzeuge für die Entwicklung von 5+ Apps.

  • HTML5plus hat viele Namen. Auf der offiziellen Website von DCloud heißt es, dass es sich um 5+Runtime handelt. Verantwortlich für die Erweiterung der JS-API und die Ermöglichung des Aufrufs nativer Funktionen durch JS.

  • MUI ist ein UI-Framework für die mobile Entwicklung. Um die Entwicklung zu erleichtern, kapselt es mehrere Methoden mit HTML5plus, was oft missverstanden wird. Aber es handelt sich eigentlich nur um ein UI-Framework, und der Aufruf nativer Funktionen hat damit nichts zu tun.

Verwandte Empfehlungen:

Detaillierte Einführung in die Verwendung der mobilen WeChat-Entwickleranwendung zum Erstellen und Erhalten einer APP-ID (Bild)

Das obige ist der detaillierte Inhalt vonTeilen von Beispielen für die Entwicklung mobiler HTML5plus-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was bedeutet h5? Was bedeutet h5? Aug 02, 2023 pm 01:52 PM

H5 bezieht sich auf HTML5, die neueste Version von HTML. H5 ist eine leistungsstarke Auszeichnungssprache, die Entwicklern mehr Auswahlmöglichkeiten und kreativen Raum bietet. Ihr Aufkommen fördert die Entwicklung der Web-Technologie und macht die Interaktion und Wirkung von Webseiten noch besser Wenn es allmählich reift und populär wird, glaube ich, dass es in der Internetwelt eine immer wichtigere Rolle spielen wird.

Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack? Wie unterscheidet man zwischen H5, WEB-Front-End, Big-Front-End und WEB-Full-Stack? Aug 03, 2022 pm 04:00 PM

Dieser Artikel hilft Ihnen dabei, schnell zwischen H5, WEB-Front-End, großem Front-End und WEB-Full-Stack zu unterscheiden. Ich hoffe, er wird Freunden in Not helfen!

So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden Mar 11, 2024 am 10:26 AM

Implementierungsschritte: 1. Überwachen Sie das Scroll-Ereignis der Seite. 2. Stellen Sie fest, ob die Seite nach unten gescrollt wurde. 3. Laden Sie die nächste Seite mit Daten. 4. Aktualisieren Sie die Scroll-Position der Seite.

So verwenden Sie die Position in h5 So verwenden Sie die Position in h5 Dec 26, 2023 pm 01:39 PM

In H5 können Sie das Positionsattribut verwenden, um die Positionierung von Elementen über CSS zu steuern: 1. Relative Positionierung, die Syntax lautet „style="position: relative;"; 2. Absolute Positionierung, die Syntax lautet „style="position: absolute;“ „; 3. Feste Positionierung, die Syntax lautet „style="position: Fixed;" und so weiter.

Zusammenfassung und Einführung in das neue H5-Promotion-Tag (mit Beispielen) Zusammenfassung und Einführung in das neue H5-Promotion-Tag (mit Beispielen) Aug 03, 2022 pm 05:10 PM

​Dieser Artikel gibt Ihnen eine Einführung in die neuen H5-Werbe-Tags. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

So implementieren Sie die H5-Formularvalidierungskomponente in vue3 So implementieren Sie die H5-Formularvalidierungskomponente in vue3 Jun 03, 2023 pm 02:09 PM

Die Rendering-Beschreibung basiert auf vue.js und ist nicht auf andere Plug-Ins oder Bibliotheken angewiesen. Die Grundfunktionen bleiben mit element-ui konsistent und es wurden einige Anpassungen an der internen Implementierung für mobile Unterschiede vorgenommen. Die aktuelle Konstruktionsplattform basiert auf dem offiziellen Gerüst der Uni-App. Da die meisten mobilen Terminals derzeit über zwei Typen verfügen: H6- und WeChat-Miniprogramme, ist es für die Technologieauswahl sehr gut geeignet, einen Codesatz auf mehreren Terminals auszuführen. Implementierungsidee Kern-API: Verwenden Sie Provide und Inject, entsprechend und. In der Komponente wird intern eine Variable (Array) zum Speichern aller Instanzen verwendet, und die zu übertragenden Daten werden über „prove“ verfügbar gemacht. Die Komponente verwendet intern „inject“, um die von der übergeordneten Komponente bereitgestellten Daten zu empfangen, und kombiniert schließlich ihre eigenen Attribute mit Methodeneinreichung

Was bedeuten Seite h5 und PHP? (Verwandte Wissensdiskussion) Was bedeuten Seite h5 und PHP? (Verwandte Wissensdiskussion) Mar 20, 2023 pm 02:23 PM

HTML5 und PHP sind zwei Technologien, die häufig in der Webentwicklung verwendet werden. Ersteres wird zum Erstellen von Seitenlayout, Stil und Interaktion verwendet, und letzteres wird für die serverseitige Geschäftslogik und Datenspeicherung verwendet. Lassen Sie uns in die relevanten Kenntnisse von HTML5 und PHP eintauchen.

Über welche Caching-Mechanismen verfügt h5? Über welche Caching-Mechanismen verfügt h5? Nov 16, 2023 pm 01:27 PM

H5 verfügt nicht über einen direkten Caching-Mechanismus, kann jedoch durch die Kombination von Technologien wie Web Storage API, IndexedDB, Service Workers, Cache API und Application Cache leistungsstarke Caching-Funktionen erreichen und die Leistung, Verfügbarkeit und Skalierbarkeit dieser Caching-Mechanismen verbessern Es kann je nach Bedarf und Anwendungsszenario ausgewählt und verwendet werden. Detaillierte Einführung: 1. Die Web Storage API ist eine einfache und von H5 bereitgestellte API.

See all articles