Share
Im letzten Artikel habe ich Ihnen NativeScript vorgestellt. Dort haben Sie die Grundlagen von NativeScript kennen gelernt und wissen, wie es sich von anderen Frameworks für die mobile Entwicklung unterscheidet. Dieses Mal werden Sie sich die Hände schmutzig machen, indem Sie Ihre erste NativeScript-App erstellen. Ich werde Sie durch den gesamten Prozess der Erstellung einer App mit NativeScript führen, von der Einrichtung Ihrer Entwicklungsumgebung bis zur Ausführung der App auf Ihrem Gerät. Hier ist ein Überblick über das, was ich besprechen werde:
Wir werden die App speziell auf der Android-Plattform ausführen. Sie können jedoch weiterhin folgen, wenn Sie die Bereitstellung für iOS bereitstellen möchten, da der Code in etwa derselbe ist. Die einzigen Unterschiede bestehen in der Einrichtung von NativeScript und den Befehlen, die Sie beim Ausführen der App ausführen.
Den vollständigen Quellcode für diese App finden Sie im Tutorial GitHub-Repo.
Um NativeScript einzurichten, müssen Sie zunächst Node.js installieren. Sobald Node.js installiert ist, können Sie das NativeScript-Befehlszeilentool durch Ausführen installieren npm install -g nativescript auf Ihrem Terminal.
Der letzte Schritt ist die Installation des Entwicklungstools für jede Plattform, auf der Sie bereitstellen möchten. Für Android ist dies das Android SDK. Für iOS ist es XCode. Im Installationshandbuch auf der NativeScript-Website finden Sie ausführliche Anweisungen zum Einrichten der erforderlichen Software für Ihre Entwicklungsumgebung.
Sobald Sie Ihre Umgebung eingerichtet haben, führen Sie sie aus tns Arzt um sicherzustellen, dass Ihre Umgebung für die Entwicklung von NativeScript vorbereitet ist. Wenn Sie unter Linux oder Windows arbeiten, wird Folgendes angezeigt, wenn Ihre Umgebung bereit ist:
HINWEIS: Sie können für iOS nur auf Mac OS X-Systemen entwickeln. Um mit iOS-Geräten und -Projekten arbeiten zu können, benötigen Sie Mac OS X Mavericks oder höher. Ihre Komponenten sind auf dem neuesten Stand. Es wurden keine Probleme festgestellt.
Es gibt dort eine Notiz, die Sie nur für iOS auf Mac OS X-Systemen entwickeln können. Dies bedeutet, dass Sie sich auf einem PC nur auf Android-Geräten bereitstellen können. Unter Mac können Sie jedoch sowohl auf iOS- als auch auf Android-Plattformen bereitstellen.
Wenn Sie während des Setups auf Probleme stoßen, können Sie eine Einladung erhalten, der NativeScript Slack Community beizutreten. Sobald Sie sich angemeldet haben, gehen Sie zum Einstiegskanal und stellen Sie Ihre Fragen dort.
Die App, die wir erstellen werden, ist eine App zum Erstellen von Notizen. Auf diese Weise kann der Benutzer Notizen erstellen, die jeweils mit einem optionalen Bildanhang versehen sind, der mit der Gerätekamera aufgenommen wird. Die Notizen werden mit den Anwendungseinstellungen von NativeScript beibehalten und können einzeln gelöscht werden.
So sieht die App aus:
Beginnen Sie, indem Sie den folgenden Befehl ausführen, um ein neues NativeScript-Projekt zu erstellen:
tns create noter --appid "com.ihrname.noter"
noter ist der Name des Projekts und com.ihr name.noter ist die eindeutige App-ID. Dies wird später verwendet, um Ihre App zu identifizieren, sobald Sie sie im Play- oder App Store eingereicht haben. Standardmäßig ist die tns erstellen Befehl erstellt die folgenden Ordner und Dateien für Sie:
In der Regel müssen Sie nur die Dateien im Ordner berühren App Verzeichnis. Es gibt jedoch auch Fälle, in denen Sie möglicherweise Dateien innerhalb von bearbeiten müssen Plattformen /Android Verzeichnis. Ein solcher Fall ist, wenn ein Plugin, das Sie verwenden möchten, nicht automatisch die Abhängigkeiten und Assets verknüpft, die es benötigt.
Navigieren Sie anschließend zu App Verzeichnis und löschen Sie alle Dateien außer dem App_Resources Mappe. Dann erstellen Sie die folgenden Dateien:
Dies sind die Dateien, die von der NativeScript-Laufzeitumgebung verwendet werden. Genau wie beim Erstellen von Webseiten, .css Dateien werden für das Styling und verwendet .js Dateien für die Funktionalität. Für das Markup der App verwenden wir jedoch XML anstelle von HTML. Normalerweise erstellen Sie für jeden Bildschirm der App einen separaten Ordner (z. B. Anmelden, Anmelden oder Dashboard) und haben XML-, CSS- und JavaScript-Dateien in jedem Ordner. Da diese App nur über einen Bildschirm verfügt, haben wir alle Dateien im Stammverzeichnis erstellt.
Wenn Sie weitere Informationen zur NativeScript-Verzeichnisstruktur benötigen, lesen Sie Kapitel 2 des NativeScript-Einführungshandbuchs.
Öffne das app.js Datei und fügen Sie den folgenden Code hinzu:
Accentsconagua
var Anwendung = Anfordern ("Anwendung"); application.start (moduleName: "notes-page");Dies ist der Einstiegspunkt für eine NativeScript-Anwendung. Es verwendet das Anwendungsmodul und sein Start Methode, um das Modul anzugeben, das für die Startseite der App verwendet wird. In diesem Fall haben wir angegeben Notiz-Seite, was bedeutet, dass das Modul ist Anmerkungsseite.js, das Markup ist notes-page.xml, und das Styling für die Seite ist notes-page.css. Dies ist eine Konvention, die in NativeScript verwendet wird. Alle Dateien für eine bestimmte Seite müssen denselben Namen haben.
Öffne das notes-page.xml Datei und fügen Sie den folgenden Code hinzu:
Wenn Sie App-Seiten in NativeScript erstellen, sollten Sie immer mit der xmlns Attribut gibt die URL des Schemas an, das für die XML-Datei verwendet wird.
Wenn Sie die angegebene Schema-URL aufrufen, können Sie die Definition aller XML-Tags sehen, die Sie in NativeScript verwenden können. Das geladen Attribut gibt die Funktion an, die ausgeführt werden soll, sobald die Seite geladen ist. Wir werden uns diese Funktionsdefinition später in der ansehen Anmerkungsseite.js Datei.
…
Standardmäßig enthält der App-Header nur den Titel der App. Wenn Sie andere Komponenten der Benutzeroberfläche hinzufügen möchten, müssen Sie sie mithilfe von neu definieren Titel Attribut zu dem Seitentitel, den Sie möchten.
Im Folgenden haben wir die Schnurrbart-Syntax verwendet, um den Wert von auszugeben app_title definiert in der Anmerkungsseite.js Datei. So geben Sie Werte aus, die an die Seite gebunden sind.
…
Verwenden Sie zum Definieren von Schaltflächen zuerst Zapfhahn Attribut gibt eine Funktion an, die ausgeführt werden soll, wenn die Schaltfläche gedrückt wird, während os.position und android.position sind die Positionen der Schaltfläche in iOS und Android.
Um den Schaltflächentext festzulegen, können Sie die verwenden Text Attribut. Derzeit erlaubt NativeScript jedoch nicht, die Textfarbe der Schaltfläche durch CSS zu ändern. Deshalb haben wir stattdessen verwendet
Weiter ist der eigentliche Seiteninhalt. Sie können die verschiedenen Elemente mit einem oder mehreren Layout-Containern anordnen. Im Folgenden haben wir zwei der verfügbaren Layouts verwendet: StackLayout und Gitterstruktur.
StackLayout ermöglicht das Stapeln aller darin enthaltenen Elemente. Standardmäßig ist die Ausrichtung dieses Layouts vertikal, sodass jede UI-Komponente unter der letzten angeordnet ist. Denken Sie an Legosteine mit einem abwärts gerichteten Fluss.
Auf der anderen Seite, Gitterstruktur ermöglicht das Anordnen von Elementen in einer Tabellenstruktur. Wenn Sie schon einmal Bootstrap oder andere CSS-Raster-Frameworks verwendet haben, sollte Ihnen dies natürlich vorkommen. Das Gitterstruktur können Sie Zeilen und Spalten definieren, unter denen die einzelnen UI-Komponenten platziert werden können. Wir werden später sehen, wie dies umgesetzt wird. Im Moment wollen wir zum Code übergehen.
Zunächst definieren wir das Formular zum Erstellen einer neuen Notiz. Genau wie in HTML können Sie Attribute wie definieren Ich würde und cssClass (entspricht HTML) Klasse Attribut). Das Ich würde Das Attribut wird an ein Element angehängt, wenn Sie es vom Code aus bearbeiten möchten. In unserem Fall möchten wir das Formular später animieren. cssClass wird verwendet, um die CSS-Klasse anzugeben, die Sie zum Gestalten des Elements verwenden möchten.
Innerhalb des Formulars befinden sich ein Textfeld zur Eingabe des Notizentitels, eine Schaltfläche zum Anhängen eines Bildes, das ausgewählte Bild und eine Schaltfläche zum Speichern der Notiz. Das Bildelement ist nur sichtbar, wenn der attachment_img hat einen Wahrheitswert. Dies ist der Fall, wenn zuvor ein Bild angehängt wurde.
Als Nächstes sehen Sie die Liste mit den Notizen, die bereits vom Benutzer hinzugefügt wurden. Listen werden mithilfe von erstellt Listenansicht Komponente. Das akzeptiert Artikel als erforderliches Attribut. Der Wert kann entweder ein einfaches Array oder ein beobachtbares Array sein.
Wenn Sie für jedes Element im Array keine Form der Aktualisierung durchführen müssen (z. B. Löschen oder Aktualisieren eines Felds), reicht ein einfaches JavaScript-Array aus. Verwenden Sie andernfalls ein beobachtbares Array, mit dem Sie das Array aktualisieren und automatisch auf der Benutzeroberfläche anzeigen lassen können. Wir werden später sehen, wie ein beobachtbares Array definiert wird.
Beachten Sie auch, dass a Listenansicht kann eine haben itemTap Attribut, mit dem Sie angeben können, welche Funktion ausgeführt werden soll, wenn ein Element Listenansicht wird angezapft. In diesem Fall haben wir es jedoch nicht wirklich hinzugefügt, da beim Antippen eines Elements keine Aktion ausgeführt werden muss.
…
Die Elemente in der Listenansicht kann mit definiert werden Säulen Attribut wird verwendet, um anzugeben, wie viele Spalten Sie in jeder Zeile haben möchten.
In diesem Fall, *, * bedeutet, dass es zwei Spalten gibt, die jeweils gleich viel Platz in der aktuellen Zeile beanspruchen. Wenn also die gesamte Zeile eine Gesamtbreite von 300 Pixel hat, ist jede Spalte 150 Pixel breit. Also im Grunde jeder * stellt eine Spalte dar und Sie verwenden jeweils ein Komma, um sie voneinander zu trennen.
Das Reihen Das Attribut funktioniert ähnlich, steuert jedoch den von einer einzelnen Zeile belegten Speicherplatz. Auto Dies bedeutet, dass nur der Platz benötigt wird, den die Kinder jeder Reihe benötigen.
Nach der Definition der Säulen und Reihen in dem Gitterstruktur, Sie müssen noch angeben, welches ihrer untergeordneten Elemente zu welcher Zeile und Spalte gehört. Die erste Zeile enthält den Titel des Elements (1. Spalte) und die Schaltfläche "Löschen" (2. Spalte). Die zweite Zeile enthält das Bild, das an das Objekt angehängt wurde (1. Spalte). Die Zeile und die Spalten werden mit angegeben Reihe und col Attribut für jedes Element.
Beachten Sie auch die Verwendung von horizontalAusrichtung und Vertikale Ausrichtung. Sie können sich dies als das NativeScript-Äquivalent von HTML vorstellen Textausrichtung Attribut. Anstelle von Text richten wir jedoch die Komponenten der Benutzeroberfläche aus. horizontalAusrichtung kann einen Wert von haben Recht, links, Center, oder strecken, während Vertikale Ausrichtung kann einen Wert von haben oben, Unterseite, Center, oder strecken. Die meisten davon sind selbsterklärend, mit Ausnahme von strecken, welche sich ausdehnt, um den verfügbaren horizontalen oder vertikalen Raum einzunehmen.
In diesem Fall, horizontalAusrichtung und Vertikale Ausrichtung werden verwendet, um das Bild sowohl horizontal als auch vertikal innerhalb der Spalte zu zentrieren. Und horizontalAusrichtung wird für die Schaltfläche "Löschen" verwendet, um sie am äußersten rechten Teil der zweiten Spalte auszurichten.
Wir haben keine angegeben itemTap Attribut für die Listenansicht. Stattdessen möchten wir eine Löschaktion anfügen, die ausgeführt wird, wenn in einem Listenelement auf eine Schaltfläche zum Löschen geklickt wird. Jeder Artikel hat eine Index Attribut, das wir als benutzerdefiniertes Attribut für die Schaltfläche "Löschen" übergeben. Dies ist der eindeutige Schlüssel, der zur Identifizierung der einzelnen Elemente verwendet wird, sodass wir bei Bedarf leicht auf sie zugreifen können.
Beachten Sie auch die geladen Attribut. Genauso wie geladen Attribut können Schaltflächen auch eine haben. Sie werden später sehen, wie dies verwendet wird.
Jetzt können wir uns das JavaScript ansehen, mit dem alles funktioniert. In diesem Abschnitt werden wir die codieren Anmerkungsseite.js Datei.
Zuerst importieren wir die Daten / beobachtbar und Daten / Observable-Array Module. Dies sind integrierte Module in NativeScript, mit denen sich beobachtbare Objekte und Arrays erstellen lassen. Mit Observables können wir die Benutzeroberfläche automatisch aktualisieren, wenn diese Objekte und Arrays aktualisiert werden.
In unserer App, pageArray wird zum Speichern des Arrays von Notizen verwendet, und pageData wird verwendet, um es an die Seite zu binden. pageData dient auch als allgemeiner Container für alle Daten, die in der Benutzeroberfläche angezeigt werden sollen.
var Observable = erfordern ("Daten / beobachtbar"); var ObservableArray = required ("data / observable-array"); var pageArray = new ObservableArray.ObservableArray (); var pageData = new Observable.Observable (notes: pageArray);Als nächstes importieren Sie alle anderen Module, die wir auf dieser Seite verwenden werden:
Kamera: für die Arbeit mit der Gerätekamera.Aussicht: zum Verweisen auf bestimmte Elemente auf der Seite. Betrachten Sie es als das Äquivalent von document.getElementById in NativeScript.ui / enums: ein globales Wörterbuch mit konstanten Werten für alles, was mit UIs zusammenhängt.ui / animation: zum Animieren von Elementen.Anwendungseinstellungen: um lokale Daten zu erhalten.Dateisystem: für die Arbeit mit dem Dateisystem.var cameraModule = erfordern ("Kamera"); var view = erfordern ("ui / core / view"); var uiEnums = required ("ui / enums"); var animation = erfordern ("ui / animation"); var appSettings = required ("Anwendungseinstellungen"); var fs = required ("Dateisystem");Initialisieren Sie anschließend die Werte für die Variablen, die in der gesamten Datei verwendet werden. Seite dient zum Speichern eines Verweises auf die aktuelle Seite, anmerkungenArr ist die einfache Array-Kopie der aktuellen Notizen auf der Seite und current_index ist der Anfangswert des Index, der als eindeutige ID für jede Notiz verwendet wird.
var Seite; var notesArr = []; var current_index = -1;
pageLoaded () FunktionFunktionen werden im Kontext der Seite durch Verwendung verfügbar Exporte. Früher in der notes-page.xml Datei, Sie haben gesehen, dass die pageLoaded () Funktion wird ausgeführt, wenn die Seite geladen wird.
exports.pageLoaded = Funktion (Argumente) …
In der pageLoaded () Funktion, beginnen wir mit dem Verweis auf die Seite. Dann zeigen wir das Formular zum Erstellen einer neuen Notiz und erhalten die aktuell gespeicherten Werte des neuen Notizentitels und der Notizen aus den Anwendungseinstellungen.
page = args.object; pageData.set ('showForm', true); var new_note_title = appSettings.getString ('new_note_title'); var notes = appSettings.getString ("Notizen");Als nächstes noch im pageLoaded () Funktion, überprüfen Sie, ob Notizen lokal gespeichert sind. Wenn nicht, erstellen wir eine Reihe von Notizen. Dieses Array dient als Standardinhalt für neue Benutzer der App. Wenn jedoch bereits einige Notizen lokal gespeichert sind, konvertieren wir sie in ein Array und übertragen diese Daten dann in das beobachtbare Array.
Beachten Sie, dass wir, bevor wir die Elemente in das beobachtbare Array verschieben, zuerst überprüfen, ob sie leer sind. Wir müssen dies tun, weil die Verwendung des Kameramoduls das ausführt geladen Ereignis erneut auf der Seite, nachdem ein Bild ausgewählt wurde. Dies bedeutet, dass wir, wenn wir nicht vorsichtig sind, am Ende jedes Mal Duplikate in das Array legen, wenn der Benutzer die Kamera verwendet.
if (! notizen) notizen = [index: 0, titel: '100 push ups', index: 1, titel: '100 sit ups', index: 2, titel: '100 squats', index: 3, Titel: '10km laufend']; else notes = JSON.parse (notes); notesArr = Notizen; if (! pageArray.length) für (var x = 0; x < notes.length; x++) current_index += 1; pageArray.push(notes[x]);
Nun, da wir die Notendaten eingerichtet haben, können wir den Seitentitel aktualisieren, indem Sie dessen einstellen item_title Attribut zu dem Wert, den wir zuvor aus den Anwendungseinstellungen erhalten haben. Dann binden pageData auf der Seite, so dass die Benutzeroberfläche automatisch aktualisiert wird, wenn an den von uns festgelegten Elementen eine Änderung vorgenommen wird.
pageData.set ('item_title', neuer_note_title); args.object.bindingContext = pageData;Animieren Sie das Formular zum Erstellen neuer Notizen. Wir machen dies mit der getViewById Funktion in der Aussicht und Übergeben des Kontexts (der aktuellen Seite) als erstes Argument und der Ich würde Attribut, das dem Element zugeordnet ist, das Sie bearbeiten möchten.
Rufen Sie als nächstes an animieren Funktion. Dies akzeptiert ein Objekt, das die Animationseinstellungen enthält. Hier soll das Formular über einen Zeitraum von 800 Millisekunden von seiner ursprünglichen Position um 160 Pixel nach unten gleiten.
view.getViewById (page, 'form'). animate (translate: x: 0, y: 160, Dauer: 800,);
newNote () FunktionDas newNote () Funktion wird ausgeführt, wenn der Benutzer auf die Neuer Gegenstand Aktionselement in der Kopfzeile. Dies versteckt und zeigt das neue Element Listenansicht und schiebt das Formular nach oben oder unten, abhängig vom aktuellen Wert von showForm.
Ob showForm ist wahr, was bedeutet, dass es derzeit gezeigt wird, ändern wir die Deckkraft der Listenansicht zu 1 im Verlauf von 400 Millisekunden, und schieben Sie das Formular nach oben, um es auszublenden. Ansonsten verstecken wir das Listenansicht und schieben Sie das Formular nach unten.
exports.newNote = function () var showForm = pageData.get ('showForm'); var top_position = (showForm)? -160: 160; var list_visibility = (showForm)? 1: 0; view.getViewById (page, 'list'). animate (opacity: list_visibility, Dauer: 400); view.getViewById (page, 'form'). animate (translate: x: 0, y: top_position, Dauer: 800,); pageData.set ('showForm',! showForm); btnLoaded () FunktionIn dem notes-page.xml Datei, wir haben eine geladen Attribut in der Schaltfläche zum Löschen einer Notiz. Diese Funktion wird ausgeführt, wenn dieses Ereignis auftritt.
Standardmäßig ist die Funktion dem zugewiesen itemTap Attribut in der Listenansicht wird nicht ausgeführt, wenn eine Schaltfläche in einer definiert ist Listenansicht Artikel. Dies liegt daran, dass NativeScript davon ausgeht, dass die für jedes Listenelement auszuführenden Aktionen nur über diese Schaltflächen ausgelöst werden können.
Der folgende Code ist eine Problemumgehung für dieses Standardverhalten. Dadurch wird der Fokus auf der Lösch-Schaltfläche im Wesentlichen entfernt, sodass Sie immer noch eine Funktion ausführen können, wenn ein Benutzer auf eine Schaltfläche tippt Listenansicht Artikel. In diesem Fall benötigen wir diesen Code nicht wirklich, da wir den Element-Taps keine Funktionalität zugewiesen haben. Dies ist jedoch ein gutes Werkzeug, wenn Sie mit Listen arbeiten.
exports.btnLoaded = Funktion (args) var btn = args.object; btn.android.setFocusable (false);
openCamera () FunktionAls nächstes ist das openCamera () Funktion, die ausgeführt wird, wenn der Benutzer auf die Bild anhängen Taste. Der aktuelle Status wird bei Verwendung des Kameramoduls nicht beibehalten. Daher müssen Sie zuerst den Titel der neuen Notiz in den Anwendungseinstellungen speichern.
Anschließend können wir die Standard-Kamera-App im Gerät starten, indem Sie die ein Bild machen() Methode. Diese Methode akzeptiert ein Objekt, das die Bildeinstellungen enthält. Sobald der Benutzer ein Bild aufgenommen und auf die Schaltfläche geklickt hat, sparen Taste in Android oder die verwende das Bild Bei iOS wird das Versprechen aufgelöst und die Rückruffunktion wird an übergeben dann() wird ausgeführt.
Das eigentliche Bild wird als Argument an die Funktion übergeben, und wir verwenden dieses, um die Datei im Dokumentpfad zu speichern. Sobald dies erledigt ist, speichern wir den vollständigen Dateipfad mit den App-Einstellungen und dem aktuellen App-Status, damit wir den Wert später abrufen können, bevor die Notiz gespeichert wird.
exports.openCamera = function () appSettings.setString ('new_note_title', pageData.get ('item_title')); cameraModule.takePicture (width: 300, height: 300, keepAspectRatio: true). dann (Funktion (img) var filepath = fs.path.join (fs.knownFolders.documents (). path, "img_" + ( new Date (). getTime () / 1000) + ".jpg"); img.saveToFile (Dateipfad, uiEnums.ImageFormat.jpeg); appSettings.setString ('new_note_photo', Dateipfad); pageData.set ('attachment_img', Dateipfad); ); saveNote () FunktionDas saveNote () Funktion wird ausgeführt, wenn der Benutzer auf die Notiz speichern Taste. Dadurch werden der aktuelle Wert des Notizentitel-Textfelds und des Bildpfads abgerufen current_index, und schiebt das neue Element in das Array mit einfachen Notizen und in das Array mit beobachtbaren Notizen. Dann speichert es die aktuellen Notizen und die current_index entfernt in den Anwendungseinstellungen die Werte für die neue Notiz aus den Anwendungseinstellungen, aktualisiert die Benutzeroberfläche, sodass das Formular leer angezeigt wird und die Liste angezeigt wird, während das neue Notizformular ausgeblendet wird.
exports.saveNote = function () var new_note_title = pageData.get ('item_title'); var new_note_photo = pageData.get ('attachment_img'); current_index + = 1; var new_index = current_index; var new_item = index: new_index, Titel: new_note_title, Foto: new_note_photo, show_photo: false; notesArr.push (new_item); pageArray.push (new_item); appSettings.setString ('notes', JSON.stringify (notesArr)); appSettings.setNumber ('current_index', neuer_index); appSettings.remove ('new_note_title'); appSettings.remove ('new_note_photo'); pageData.set ('showForm', false); pageData.set ('item_title', "); pageData.set ('attachment_img', null); view.getViewById (page, 'list'). animate (opacity: 1, duration: 400); view.getViewById ( Seite, 'Formular'). animieren (übersetzen: x: 0, y: -160, Dauer: 800,);deleteNote () FunktionSchließlich haben wir die deleteNote () Funktion, die ausgeführt wird, wenn ein Benutzer innerhalb eines Listenelements auf die Schaltfläche "Löschen" tippt. Wie Sie bereits aus früheren Funktionen gesehen haben, wird ein Objekt als Argument an Funktionen übergeben, die als Ereignishandler für eine bestimmte Komponente angefügt sind. Dieses Objekt hat die Objekt Eigenschaft, die sich auf die Komponente selbst bezieht.
Von dort können Sie den Wert eines Attributs abrufen, das an dieses übergeben wurde. In diesem Fall erhalten wir den Wert von Index Attribut, und wir verwenden es, um den tatsächlichen Index des Elements zu erhalten, das wir löschen möchten.
exports.deleteNote = Funktion (Argumente) var target = args.object; var index_to_delete = notesArr.map (Funktion (e) return e.index;). indexOf (target.index); notesArr.map (Funktion (Element, Index) if (index == index_to_delete) notesArr.splice (index_to_delete, 1); pageArray.splice (index_to_delete, 1); return false;; appSettings.setString ('notes', JSON.stringify (notesArr)); Öffne das app.css Datei und fügen Sie die folgenden globalen Stile hinzu:
ActionBar Hintergrundfarbe: # b898ff; Farbe: #fff; .header-item text-transform: Großbuchstaben; .item padding: 20; Schriftgröße: 20px; .form-container Hintergrundfarbe: #fff; Rand oben: -160px; Polsterung: 20px; z-Index: 10; .label Schriftgröße: 18px; .link text-align: left; Hintergrundfarbe: transparent; Farbe: # 0275d8; Polsterung: 5px; Marge: 10px 0; Text-Transformation: Großbuchstaben; Schriftgröße: 15px; .image width: 300; Marge: 20 0; .primary-button padding: 5px; Farbe: #fff; Hintergrundfarbe: # 0723bb; Text-Transformation: Großbuchstaben; .delete-button font-size: 15px; Hintergrundfarbe: # f50029; Farbe: #fff;
Wenn Sie seitenspezifische Stile anwenden möchten, können Sie auch eine erstellen notes-page.css Datei und definieren Sie Ihre Stile dort.
Sie können die App auf Ihrem Gerät ausführen, indem Sie sie ausführen tns rennen und dann die Plattform, auf der Sie bereitstellen möchten. Hier ist ein Beispiel für Android:
tns laufen android
Dadurch wird die Android-Plattform automatisch installiert, wenn sie noch nicht installiert ist. Anschließend wird die App nach der Installation auf Ihrem Gerät ausgeführt. Sobald die App ausgeführt wird, können Sie sie ausführen tns Livesync Android - Uhr Die App wird automatisch aktualisiert, wenn Sie Änderungen an den Quelldateien vornehmen.
Wie jedes andere App-Framework können Entwickler mit NativeScript ihre App debuggen. Dies geschieht mit den Chrome-Entwicklertools. Es gibt zwei Möglichkeiten, dies zu tun:
tns debug android --start einen Debugger an die aktuell ausgeführte Instanz der App anhängen.tns debuggen android --debug-brk eine Instanz der App mit einem angefügten Debugger erstellen.Unabhängig davon, welche Option Sie wählen, wird eine neue Registerkarte im Google Chrome-Browser geöffnet, mit der Sie die App wie eine normale JavaScript-Web-App debuggen können. Dies bedeutet, dass Sie tatsächlich verwenden können console.log in Ihrem Quellcode, um den Inhalt der Variablen zu überprüfen, mit denen Sie arbeiten.
