Advertisement
  1. Code
  2. Mobile Development

Einführung von Vue und Weex für native mobile Apps

Scroll to top
Read Time: 15 min

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

Vue ist ein beliebtes JavaScript-Framework für Web-Apps mit einfacher Bindung zwischen Daten im Speicher und der Benutzeroberfläche. Jetzt ermöglicht uns Weex, native mobile Apps mit dem Vue-Framework zu programmieren!

Warum verwenden wir Vue und andere Datenbindungs-Frameworks wie Angular und React? Was ist so besonders an ihnen? Wir verwenden sie, um sicherzustellen, dass Anwendungsdaten, die im Speicher gespeichert sind, mit der Benutzeroberfläche synchron bleiben und umgekehrt.

Wir verwenden diese Frameworks auch, um Anwendungen sehr schnell und leistungsoptimiert erstellen zu können.

In diesem Tutorial zeige ich Ihnen, wie Sie das Vue-Framework verwenden, insbesondere wie Sie seine Konzepte der Datenbindung und Vorlagen verstehen. Dann werde ich die Weex-Plattform vorstellen, um native mobile Apps mit Vue zu codieren!

Datenbindung

Schauen wir uns ein einfaches Beispiel an, um zu verstehen, wie uns diese Frameworks tatsächlich Zeit sparen können. Was wir wollen, ist ein einfaches Eingabefeld, das mit unseren Bewerbungsdaten synchron bleibt. Unsere App selbst kann die Daten programmgesteuert ändern, und der Benutzer kann sie über Benutzereingaben ändern, daher müssen wir sowohl die Benutzeroberfläche als auch die Anwendungsdaten überwachen.

Two way data bindingTwo way data bindingTwo way data binding

Das Schreiben von Code, der diese Datenbindung unterstützt, wäre ausführlich. Wir müssten Ereignis-Listener und Proxy-Objekte und Observables erstellen, um alle Änderungen in den Anwendungsdaten zu erfassen. Und diese Komplexität wächst und wächst, je mehr Datentypen und Eingaben hinzugefügt werden. Vue und andere Datenbindungs-Frameworks verhindern, dass wir den gesamten Bindungscode schreiben müssen.

Wenn unser Benutzer bei Vue einige Eingabedaten ändert, wird es wie folgt mit den Anwendungsdaten synchronisiert:

Changes flowing from the UI to the modelChanges flowing from the UI to the modelChanges flowing from the UI to the model

Oder wenn die Anwendung die Daten ändert, aktualisiert sie die Benutzeroberfläche wie folgt:

Changes flowing from the model to the UIChanges flowing from the model to the UIChanges flowing from the model to the UI

Wenn wir die Benutzeroberfläche und die App-Daten synchron halten, bedeutet dies, dass unsere App genau das tut, was wir von ihr erwarten. Vue wird all dies verwalten und andere leistungsstarke Datenbindungsprozesse ermöglichen.

Einrichten

Nachdem wir nun wissen, warum wir diese Frameworks verwenden, richten wir eine einfache Vue-Anwendung ein, um einige Beispiele auszuführen. Erstellen Sie eine neue HTML-Datei an einer beliebigen Stelle auf Ihrem Computer und fügen Sie den folgenden Code ein:

Dies ist eine einfache HTML-Datei, die auf die Vue JS-Bibliothek verlinkt. Es enthält ein div-Element mit der ID der app. Innerhalb der script-Tags haben wir eine Variable namens app, die wir verwenden, um auf unsere Ansicht zu verweisen – ich werde diesen Teil später erklären.

Dann erstellen wir eine neue Vue-Instanz oder "Ansicht". Dieser Konstruktor teilt dem Framework mit, welches Element unsere Anwendungsbenutzeroberfläche enthält und hält es mit den Anwendungsdaten synchron.

Doppelklicken Sie nun auf die HTML-Datei, um sie im Browser zu öffnen, und öffnen Sie das Browser-Konsolenfenster.

The browser console in ChromeThe browser console in ChromeThe browser console in Chrome

Textinterpolation

Mit der Textinterpolation können wir Ausdrücke in unseren HTML-Code einbetten, die beim Rendern der Seite interpretiert werden. Die Ausdrücke sind live. Wenn also die Daten, von denen sie abhängig sind, geändert werden, wird die Seite in Echtzeit aktualisiert. Dies wird als deklaratives Rendering bezeichnet und ermöglicht es uns, Ausdrücke an einer beliebigen Stelle innerhalb des Inhalts eines Elements zu platzieren. Lassen Sie uns mit einem einfachen Beispiel überprüfen.

JS

Unser JavaScript-Code enthält jetzt ein data-Objekt, das alle unsere Anwendungsdaten für diese Ansicht speichert. Darin habe ich die message-Eigenschaft mit der Zeichenfolge "Hello world" erstellt.

Lassen Sie uns als Nächstes diese Eigenschaft im HTML anzeigen.

HTML

Die Ausdrücke werden mit doppelter Klammersyntax angegeben. Vue JS verwaltet die Abhängigkeiten jedes Ausdrucks und aktualisiert die Seite live, wenn sie sich ändern. In unserem Fall haben wir zwei Ausdrücke, wobei die message-Eigenschaft eine Abhängigkeit von jedem ist. Der erste Ausdruck {{ message }} zeigt nur die Message-Eigenschaft an. Der zweite Ausdruck {{ message.split('').reverse().join('') }} übernimmt die Message-Eigenschaft und dann:

  • Teilt den String in ein Array auf:[ "h","e","l","l","o"," ","w","o","r","l","d" ]
  • Kehrt die Reihenfolge des Arrays um:[ "d","l","r","o","w"," ","o","l","l","e","h" ]
  • Verbindet das Array, um "dlrow olleh" zu erhalten, was dieselbe Nachricht ist, aber rückwärts gedruckt wird.

Öffnen Sie nun den Browser und aktualisieren Sie die HTML-Seite. Öffnen Sie dann das Konsolenfenster des Browsers und weisen Sie app.message einen neuen Wert zu und sehen Sie, wie die Ausgabe im Browser aktualisiert wird.

Simple Vue template exampleSimple Vue template exampleSimple Vue template example

Sie können auch Mathematik in Vorlagenausdrücken oder strukturierte Daten in Objekten verwenden. Tatsächlich sind Vue-Ausdrücke, wie Sie vielleicht vermutet haben, nur JavaScript. Der Zugriff auf globale Variablen erfolgt jedoch in einer Sandbox, sodass Sie auf Math, aber nicht auf window zugreifen können. Dies trägt dazu bei, dass Ihre Apps sicher sind – und auch Ihre Benutzer.

Durch die Verwendung von Vue mit nur wenigen Codezeilen können wir die bidirektionale Datenbindung verbessern. Dies stellt sicher, dass die Benutzeroberfläche und die Anwendungsdaten relativ einfach synchron sind.

Richtlinien

Richtlinien sind unserer Ansicht nach eine weitere Möglichkeit, Daten verbindlich zu machen. Wir können sie verwenden, um Anwendungsdaten an Attribute, Ereignisse, Eingabefelder und wiederholbare Daten zu binden. Lassen Sie uns jede Richtlinie durchgehen und herausfinden, wie sie funktionieren.

  • v-bind: bindet einen Attributwert
  • v-model: App-Daten an ein Eingabeelement wie einen textarea binden
  • v-on: Definiere einen Event-Handler
  • v-for: an ein Array oder Objekt binden

v-bind-Richtlinie

Die v-bind-Direktive wird für die Attributdatenbindung verwendet. Es ermöglicht uns, Anwendungsdaten an den Wert eines Attributs zu binden. Stellen Sie sich das wie eine Textinterpolation vor, jedoch innerhalb eines Attributs. Sie können class, id, value oder jedes andere Attribut mit der v-bind-Direktive binden.

Für dieses Beispiel möchte ich unsere Anwendungsdaten mit der v-bind-Direktive v-bind:data-attr an das data-attr-Attribut binden.

JS

HTML

Im obigen Beispiel haben wir ein Attribut namens data-attr an eine Reihe verschiedener Datenquellen gebunden. Zuerst haben wir es an die type- und names-Eigenschaften von object gebunden. Dann haben wir es an einen mathematischen Ausdruck gebunden und dann alle Bindungen zu einem einzigen Array-Attribut zusammengefügt.

Sehen Sie sich die Ausgabe im Browser an: Sie können auf die Registerkarte Elemente klicken, um die Ausgabe der Werte jedes Attributs anzuzeigen.

Binding attribute valuesBinding attribute valuesBinding attribute values

Auch hier können Sie die Anwendungsdaten in der Konsole ändern, um den Datenbindungsprozess anzuzeigen.

Changes to the model are rendered automaticallyChanges to the model are rendered automaticallyChanges to the model are rendered automatically

Stellen Sie sich die v-bind-Direktive so vor, als ob sie Ausdrücke in Attributwerten erlaubt. Dies ist unglaublich leistungsstark und mit der Vue-Bibliothek einfach einzurichten.

v-model-Richtlinie

Diese Direktive wird speziell verwendet, um die Anwendungsdaten mit Eingabefeldern, Textbereichen und Auswahlelementen synchron zu halten. Hier ist ein Beispiel:

JS

HTML

Für den ersten Abschnitt dieser Seite haben wir ein Texteingabefeld und einen Textbereich, die beide die v-model-Direktive haben, die diese Eingabefelder mit der message-Eigenschaft mit v-model="message" synchron hält. Auf diese Weise wird das Modell aktualisiert, wenn Sie eines ändern, und dann wird das andere Eingabefeld aktualisiert. Mach weiter und probiere es aus!

Binding to input elementsBinding to input elementsBinding to input elements

Im nächsten Abschnitt haben wir ein Dropdown-Menü, das mit v-model="selected" mit der selected Eigenschaft synchronisiert wird. Auf diese Weise wird unser Modell aktualisiert, wenn die Auswahl geändert wird.

Schließlich haben wir eine Mehrfachauswahl. Ich habe gezeigt, wie dies auf zwei Arten geht: mit mehreren Kontrollkästchen und mit einer Mehrfachauswahleingabe. Da wir mehrere Werte haben können, habe ich das Array checkedNames erstellt, das mehrere Werte speichern kann. Die Mehrfachauswahleingabe und die Kontrollkästchen verfügen jeweils über eine v-model-Direktive, die auf die checkNames-Eigenschaft abzielt. Probieren Sie es aus, und sie sollten synchron bleiben, während Sie eine Auswahl treffen.

Multiple selection bindingMultiple selection bindingMultiple selection binding

Die v-on-Richtlinie

Diese Direktive ermöglicht es uns, Ereignisse an HTML-Elemente anzuhängen. Diese Direktive kann für bestimmte Elemente verwendet werden, denen Eingabeereignisse wie Hovering, Klicks, Texteingabe, Tastendruck und mehr zugeordnet sein können. In diesem Beispiel erstellen wir eine einfache Schaltfläche mit einem Klickereignis.

JS

HTML

In der v-on-Direktive geben wir nach dem Doppelpunkt das Ereignis an, das wir anhängen möchten. In diesem Beispiel werden beim Auslösen des click-Ereignisses einige Ausdrücke ausgeführt. Zuerst öffnen wir ein Warndialogfeld und ändern dann den Wert der clicked Eigenschaft. Beachten Sie, dass Sie Funktionen in v-on-Ausdrücken aufrufen können.

A button with a click eventA button with a click eventA button with a click event

v-for Richtlinie

Diese Richtlinie ist eine der mächtigsten von allen. Wir können jedes Objekt oder Array auf Änderungen überprüfen und wiederholt einen Teil unseres Vorlagencodes für jede Eigenschaft oder jedes Element rendern, die in diesem Objekt oder Array gefunden werden. So rendern Sie beispielsweise ein Array von Namen als Liste:

JS

HTML

In diesem Beispiel hängen wir zuerst die v-for-Direktive an das Element an, das Sie wiederholen möchten. Der Wert der Direktive gibt das Objekt oder Array an, über das wir iterieren möchten (names) sowie eine Variable, die den Wert für jede Iteration enthält (name). Jetzt können wir innerhalb dieses wiederholten Elements die name-Variable in Ausdrücken verwenden.

Wenn wir dann das Array ändern, zum Beispiel mit einer Methode wie push, sort oder reverse, werden die Vorlagendaten automatisch aktualisiert. Versuchen Sie, das Beispiel auszuführen, und ändern Sie das Array im Konsolenfenster.

Rendering a list of elements with the v-for directiveRendering a list of elements with the v-for directiveRendering a list of elements with the v-for directive

Komponenten

Der Datenbindungsprozess findet in Ansichten statt. Komponenten sind nur wiederverwendbare Ansichten, die wir in unserer gesamten Anwendung wiederholen können. Jede Komponente muss einige Vorlagendaten enthalten, die als Teil der Benutzeroberfläche wiedergegeben werden sollen, und einige Anwendungsdaten. Sie können optional etwas Styling hinzufügen, wenn Sie möchten.

Lassen Sie uns die v-for-Direktive erneut verwenden, um Listenelemente auszugeben. Aber dieses Mal machen wir jedes Element zu einer Komponente. Wir geben dieser Komponente einen Namen, damit wir sie in unserem Vorlagencode ansprechen können: list-item. Komponenten können auch "registrierte Eigenschaften" haben, denen wir beim Erstellen der Komponente einen Wert zuweisen können. In meinem Fall erwartet die list-item-Komponente einen Wert für die name-Eigenschaft, definiert mit props:["name"].

Lassen Sie uns nun diese Komponente erstellen. Bitte fügen Sie den folgenden Code in Ihre Skript-Tags ein:

JS

Stellen Sie außerdem sicher, dass Sie über die folgenden Bewerbungsdaten verfügen:

HTML

Hier können Sie sehen, dass die list-item-Komponente für jeden im Array gefundenen Namen wiederholt wird. Jeder Name wird der Variablen name zugewiesen, die in der v-for-Direktive definiert ist. Wir übergeben die name-Eigenschaft mit v-bind an die Komponente.

Jede Instanz ist nur eine Kopie der Komponente. Wir können jede Kopie oder Instanz unabhängig voneinander ändern. Stellen Sie sich Komponenten als Blaupause und Instanzen als Kopien aus der Blaupause vor. Hier ist das Endergebnis:

List rendered with componentsList rendered with componentsList rendered with components

Zusammenstellung und das Vue CLI

Wir haben mit einer sehr einfachen HTML-Datei gearbeitet und Vue alles zur Laufzeit interpretieren lassen. Vue wird jedoch mit einem Befehlszeilentool geliefert. Sie fragen sich vielleicht warum. Ein Grund dafür ist, dass vorkompilierte Seitenvorlagen eine bessere Leistung erbringen als Vorlagen, die Vue zur Laufzeit interpretiert. Ein weiterer Grund ist, dass, wenn wir eine groß angelegte Anwendung erstellen und versuchen würden, sie in eine HTML-Datei zu integrieren, sie schnell unhandlich werden würde.

Wir brauchen also Modularität, um eine große Anwendung in kleinere Teile zu zerlegen.

Installieren der Vue-CLI

Um die Befehlszeile zu verwenden, müssen Sie das Konsolenfenster für Ihr Betriebssystem öffnen.

  • Drücken Sie auf einem Mac Befehl-Leertaste, geben Sie Terminal ein und drücken Sie die Eingabetaste.
  • Unter Windows suchen Sie im Startmenü nach der Eingabeaufforderung, stellen Sie sicher, dass Sie mit der rechten Maustaste klicken und "als Administrator öffnen".
  • Drücken Sie unter Linux Strg-Alt-T.

Stellen Sie vor dem Fortfahren sicher, dass Sie die neueste Version von Node.js installiert haben. Dann müssen wir Webpack installieren, das die Dateigröße unseres Projekts komprimiert und es in unserem Browser schneller macht. Dann können wir die Vue-CLI installieren und die relevanten Befehle für Ihre Plattform ausführen:

Mac & Linux

  • sudo npm install -g webpack
  • sudo npm install -g vue-cli

Windows (stellen Sie sicher, dass Sie die Konsole als Administrator ausführen)

  • npm install -g webpack
  • npm install -g vue-cli

Das ist es! Wir sind jetzt bereit, mit der Einrichtung unseres erweiterten Webpack-Projekts zu beginnen. Navigieren Sie zunächst zu dem Verzeichnis, in dem wir unser Projekt erstellen möchten, in meinem Fall dem Desktop, und erstellen Sie dann das Projekt. Sie können myapp durch einen beliebigen Projektnamen ersetzen.

  • vue init webpack myapp

Sie werden durch eine Reihe von Fragen zu Ihrem Projekt geführt, in denen Sie aufgefordert werden, Daten wie Titel und Beschreibung einzugeben und Sie zu fragen, ob Sie Plugins von Drittanbietern installieren möchten. In diesem Beispiel können Sie alle optionalen Extras mit Nein beantworten. Sobald es erstellt wurde, müssen wir die Abhängigkeiten installieren, navigieren Sie also zum Projektverzeichnis und führen Sie den Installationsbefehl aus.

  • cd myapp
  • npm install

Lassen Sie NPM alle Abhängigkeitspakete installieren, und dann können wir weitermachen.

Erstellen eines Vue-Projekts

Nachdem die Pakete installiert wurden, können wir den Entwicklungsserver ausführen, indem wir npm run dev eingeben. Ihr Browserfenster sollte sich öffnen und die folgende Seite anzeigen.

The Vue starter project welcome screenThe Vue starter project welcome screenThe Vue starter project welcome screen

Wir werden nicht die Struktur des gesamten Projekts durchgehen, aber wenn Sie das myapp-Verzeichnis öffnen, sehen Sie das src-Verzeichnis. Es enthält eine App.vue-Datei, eine main.js-Datei und im components-Verzeichnis die Datei Hello.vue.

Die Vue-Dateien sind Komponenten. Die Datei main.js konfiguriert die anfängliche Ansicht und möglicherweise auch andere Konfigurationen. Werfen wir einen Blick auf die Dateien App.vue und Hello.vue.

The vue files from the Vue starter projectThe vue files from the Vue starter projectThe vue files from the Vue starter project

Hier können Sie sehen, dass jede Vue-Komponente in drei Teile unterteilt ist:

  • <template>: das HTML-Markup, das Teil der Benutzeroberfläche ist.
  • <script>: Anwendungsdaten, Filter, Methoden, berechnete Eigenschaften, Watcher und Methoden.
  • <style>: das CSS- oder Sass-Styling unserer Komponenten.

Zusammenstellung

Die Zusammenstellung aller Komponenten führt zu einer groß angelegten Anwendung. Das bedeutet, dass wir bei der Entwicklung an kleinen modularen Codestücken, sogenannten Komponenten, statt an der gesamten Anwendung arbeiten. In Vue haben wir Single-File-Komponenten, die JavaScript, HTML und CSS enthalten. Es kümmert sich sogar um das Transpilieren von ES6 zu ES5, Sass zu CSS und Jade zu HTML, wenn Sie diese Sprachen verwenden möchten.

Sie werden in der Datei App.vue feststellen, dass ich hervorgehoben habe, wo die Hello.vue-Komponente importiert wird. Komponenten können innerhalb anderer Komponenten verschachtelt werden!

Beim Kompilieren wird unser Projekt mit dem folgenden Prozess erstellt:

Vue build processVue build processVue build process

Wir verwenden immer noch dieselbe Syntax wie in den früheren Beispielen. Allerdings arbeiten wir jetzt mit kleineren Vue-Dateien und kompilieren diese gemeinsam. Wir haben auch einige erweiterte Funktionen wie die Präprozessoren und Jade-, Sass-, ES6- und Webpack-Komprimierung.

Weex

Nachdem wir nun die Vue-Bibliothek verstanden haben, werfen wir einen kurzen Blick darauf, wie wir unsere Web-App in eine native mobile App umwandeln können, die auf iOS oder Android installiert werden kann.

Weex ist ein Hybrid-Framework, das heißt, es ermöglicht mehrere Technologien, genauso wie ein Hybridauto sowohl Elektro- als auch Benzinfahrzeuge verwenden kann. In unserem Fall verwenden wir JavaScript-Code aus unserer Web-App, rendern jedoch auf einer nativen Benutzeroberfläche. Außerdem können wir über JavaScript auf die nativen APIs des Geräts zugreifen, um auf Hardware wie Kamera, Sensoren und Dateisystem zuzugreifen.

Parts of a Weex appParts of a Weex appParts of a Weex app

Bei Weex verwenden wir XML, anstatt unsere Anwendung in HTML zu rendern. Tatsächlich sind HTML und XML sehr ähnlich, daher wird die Syntax bekannt vorkommen. Dieses XML wird dann in native Komponenten umgewandelt. Jetzt kann unser JavaScript mit diesen nativen Komponenten genauso kommunizieren, wie es mit dem DOM in Vue mit HTML kommuniziert. Darüber hinaus können native Komponenten mit CSS gestaltet und positioniert werden, einschließlich Animationen, Übergängen und mehr, und sie können in die native Ebene integriert werden.

Das ist nur ein Vorgeschmack auf die Möglichkeiten von Weex. In den nächsten Tutorials werde ich Ihnen Weex näher erläutern und wir werden sehen, wie Sie einige praktische plattformübergreifende native Apps erstellen.

Vorteile

Vue hat eine einfache Syntax und erfreut sich sehr schnell wachsender Beliebtheit. Weex ermöglicht es uns, mobile Apps mit JavaScript und Vue zu erstellen, aber dennoch ein natives App-Erlebnis zu bieten.

Nachteile

Vue selbst ist stabil, aber Weex befindet sich noch in der frühen Entwicklung – es befindet sich derzeit im Apache-Inkubator. Aber keine Sorge, Weex wird bald produktionsbereit sein und wird vom Technologieriesen Alibaba unterstützt. Wenn Sie also auf eine Entwicklervorschau aufbauen, können Sie warten, bis Weex die vollständige Veröffentlichung erreicht hat.

Abschluss

Sie haben jetzt gesehen, dass die Datenbindung ein Hauptgrund für die Verwendung von Vue und ähnlichen Frameworks ist. Sie sparen uns Entwicklungszeit und bieten eine Standardmethode zum Erstellen von Anwendungen. Sie haben auch gesehen, wie Sie Textinterpolation, Anweisungen und Ereignisse in Vue verwenden und wie diese Funktionen zusammenarbeiten, um App-Daten mit der Benutzeroberfläche synchron zu halten.

Wir begannen mit einem Basisprojekt mit nur einer Ansicht. Aber dann haben wir ein fortgeschritteneres Projekt mit kleineren, modulareren Ansichten erstellt, die als Komponenten bezeichnet werden. Mithilfe von Komponenten können wir unser Projekt aufteilen, sodass es einfacher zu programmieren und zu warten ist. Danach haben wir gesehen, wie man den Vue-Compiler verwendet, um die Transpilation von ES6, Jade und Sass in die Standardsprachen zu ermöglichen, während die Dateigrößen auf ein Minimum komprimiert werden.

All dieses Wissen wird Ihnen helfen, wenn Sie mit der Programmierung mit Weex beginnen. Weex wird es uns ermöglichen, unsere Vue-Web-App in eine mobile App umzuwandeln. Weex ist ein bisschen anders – wir verwenden XML mit speziellen Komponenten anstelle von HTML – aber wir können immer noch andere Webtechnologien wie CSS und JavaScript verwenden. Das bedeutet, dass wir unsere Anwendungslogik nicht von einer Web-App zu einer mobilen App ändern müssen.

Bleiben Sie dran für meinen nächsten Beitrag zur Weex-Entwicklung und lesen Sie in der Zwischenzeit einige unserer anderen Beiträge zur Entwicklung mobiler Apps mit Webtechnologien.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.