suchen

Heim >Web-Frontend >js-Tutorial >Ein Intro zu App.js - Mobile WebApps wurden einfach gemacht

Ein Intro zu App.js - Mobile WebApps wurden einfach gemacht

Jennifer Aniston
Jennifer AnistonOriginal
2025-02-21 09:21:11778Durchsuche

Ein Intro zu App.js - Mobile WebApps wurden einfach gemacht

JavaScript wurde für die Entwicklung der mobilen Anwendungen immer beliebter. Die Entwickler von Webanwendungen haben es ermöglicht, mobile Webanwendungen zu entwickeln, ohne Muttersprachkenntnisse zu erlernen.

In diesem Tutorial werden wir eine leichte JavaScript -UI -Bibliothek namens app.js. diskutieren. Mit App.js können Sie mobile Web -Apps erstellen, ohne die Leistung oder das Aussehen zu beeinträchtigen.

Key Takeaways

  • app.js ist eine leichte JavaScript -UI -Bibliothek, mit der Entwickler mobile Web -Apps erstellen können, ohne die Leistung oder Ästhetik zu beeinträchtigen.
  • Das Tutorial bietet eine Schritt-für-Schritt-Anleitung zum Erstellen einer einfachen Benutzerregistrierungs-App mit App.js und Firebase als Backend.
  • app.js ist so erstellt, dass sie Hersteller statischer einseitiger Apps bedienen, alle Seitennavigation innerhalb der Sitzung der Webseite behalten und „Seiten“ als DOM-Knoten definiert werden können, die instanziiert werden können.
  • Das Tutorial umfasst das Erstellen eines Startbildschirms, eines Anmeldebildschirms, der Anmeldung im Bildschirm und dem Hinzufügen einer Liste in Login Home mit detaillierten Anweisungen und Beispielcode für jeden Schritt.
  • app.js ist aufgrund seines modularen Designs sowohl für kleine als auch für große Projekte geeignet und kann in Verbindung mit anderen JavaScript-Frameworks verwendet werden.

Erste Schritte

Im Verlauf dieses Tutorials erstellen wir eine einfache Benutzerregistrierungs -App mit app.js . Wir werden Firebase als Backend verwenden. Laden Sie App.js herunter und entpacken Sie es. Im Inneren haben wir 4 Dateien.

  • app.min.css: Standard -Stylesheet mit allen Android/iOS -Stilen
    • enthält
    • app.min.js: Die Bibliothek
    • index.html: Grundlegende Vorlagendatei zum Starten
    • Zepto.js: Eine mobilfreundliche jQuery wie Bibliothek

Verwendung von Zepto.js

ist optional. In diesem Tutorial werden wir JQuery verwenden.

Startbildschirm erstellen

unten gezeigt ist das Standardformat für App.js -Web -Apps. 
<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

Beginnen wir von vorne. Öffnen Sie index.html und entfernen Sie alles aus dem Körper außer der App.min.css, app.min.js und fügen Sie das folgende Skript hinzu. 
<span>try {
</span>     <span>App.restore(); // it loads/restores the app
</span> <span>} catch (err) {
</span>     <span>App.load('home'); // in case of error it loads the default page
</span> <span>}</span>

JQuery herunterladen und in Ihre Seite einbeziehen oder auf die Jquery CDN -Version finden Sie 

<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>

Erstellen Sie eine DIV, fügen Sie Klassen-App-Seite hinzu und Sie haben Ihre erste Seite bereit. Die Klassen-App-Seite wird verwendet, um eine Seite zu definieren. 
<span><div class="app-page"></div></span>

Die App-PAGE muss immer ein Data-Page-Attribut haben. Die Datenseite wird verwendet, um auf die Seite von JavaScript zuzugreifen.

Jetzt fügen wir eine obere Leiste und einen Titel hinzu. 
<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">My Web App</div>
</span>    <span></div>
</span><span></div></span>

Als nächstes müssen wir auf der Startseite eine Signin- und Anmeldeschaltfläche hinzufügen. Alle Inhalte müssen in einem App-In-In-In-In-Incontent-Div definiert werden. Erstellen Sie daher die App-In-Incontent-Div und platzieren Sie die Schaltflächen darin. 
<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">Simple Web App</div>
</span>    <span></div>
</span>    <span><div class="app-content">
</span>        <span><br />
</span>        <span><div class="app-button green">SignIn</div>
</span>        <span><br />
</span>        <span><div class="app-button blue">SignUp</div>
</span>    <span></div>
</span><span></div></span>

browseIndex.html und Sie sollten die Startseite mit einer Signin- und Anmeldetaste sehen.

Signup -Bildschirm erstellen

app.js ist so konstruiert, dass er Hersteller statischer einseitiger Apps bedient. Dies bedeutet, dass alle Seitennavigation innerhalb der Sitzung der Webseite behalten und „Seiten“ als Dom -Knoten definiert werden, die

instanziiert werden können

aus der App.js -Dokumentation

Wir erstellen alle unsere Seiten im selben Index.html. Erstellen Sie den Bildschirm Signup und verbinden Sie es mit der Schaltfläche Startbildschirm. So sieht es aus: 

<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script src="https://img.php.cn/zeptojs.com/zepto.min.js"></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

Das Daten-Ziel-Attribut wird verwendet, um Bildschirme miteinander zu verknüpfen. Fügen Sie die Schaltfläche Anmeldung auf der Startseite Datenziel hinzu, um zu diesem Bildschirm zu verlinken. Wenn Sie die Datei index.html durchsuchen und auf die Schaltfläche Anmelde auf der Startseite klicken, wird sie zum Anmeldebildschirm umgeleitet.

Haken Sie Ihre App an Firebase

,

FireBase ist eine leistungsstarke API, um Daten in Echtzeit zu speichern und zu synchronisieren. Um mit Firebase zu beginnen, müssen Sie sich für ein kostenloses Konto registrieren. Melden Sie sich einfach an, erstellen Sie eine App und klicken Sie auf den Link, um die App zu verwalten. Sie erhalten eine eindeutige URL, um Daten zu speichern. In meinem Fall ist es:

https://burning-fire–1723.firebaso.com/

Klicken Sie aus dem Firebase -Dashboard auf einfaches Login aus dem Menü der linken Seite. Klicken Sie auf die Registerkarte "E -Mail- und Kennwortauthentifizierungsanbieter" und überprüfen Sie aktiviert.

Erstellen Sie ein Controller -Skript namens Controller.js und geben Sie es in index.html ein. Jede App-Seite verfügt über eine Controller-Logik. In Controller.js

definieren wir die Controller -Logik, um E -Mail und Passwort zu lesen und in Firebase zu speichern.

Starten, herunterladen und den Firebase -Client einschließen oder auf die CDN -Version verweisen. 
<span>try {
</span>     <span>App.restore(); // it loads/restores the app
</span> <span>} catch (err) {
</span>     <span>App.load('home'); // in case of error it loads the default page
</span> <span>}</span>

Wir benötigen auch das FireBase Simple Login -Skript. 
<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>

Zuerst müssen wir mit unserer Firebase -URL eine Instanz von Firebase erstellen. Erstellen Sie mit dieser Firebase -Instanz eine FirebaseSimplelogin -Instanz. 
<span><div class="app-page"></div></span>

Wenn wir versuchen, die Benutzeranmeldung zu authentifizieren, wird loginHome

geladen.

. Als nächstes fügen wir die Controller -Logik für die Seite

Anmelde 
<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">My Web App</div>
</span>    <span></div>
</span><span></div></span>
hinzu. So wird es aussehen:

Klicken Sie auf die Schaltfläche btnSignup auf der Seite

Anmeldung

, erstellt einen Benutzer, indem er Auth.CreatUser aufruft. addieren Sie die

loginHome 
<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">Simple Web App</div>
</span>    <span></div>
</span>    <span><div class="app-content">
</span>        <span><br />
</span>        <span><div class="app-button green">SignIn</div>
</span>        <span><br />
</span>        <span><div class="app-button blue">SignUp</div>
</span>    <span></div>
</span><span></div></span>
HTML

Durchsuchen Sie die Seite index.html und klicken Sie auf die Schaltfläche Anmelden . Geben Sie eine E -Mail und ein Passwort ein und klicken Sie auf anmelden

. Wenn alles gut geht, wird der neu hinzugefügte Benutzer in der Firebase -Benutzerliste angezeigt.

Zeichen im Bildschirm erstellen

Was wir bisher haben, ist eine Homepage mit einem Link zu Signup und Signin Bildschirmen. Wir haben den Bildschirm Signup erstellt und ihn auch mit der Startseite verknüpft. Fügen wir einen signin

Bildschirm hinzu. 
<span><div class="app-page" data-page="SignUp">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-button left blue" data-target="home">back</div>
</span>    <span></div>
</span>    <span><br />
</span>    <span><div class="app-content">
</span>        <span><input id="btnEmail" class="app-input" placeholder="Email">
</span>        <span><input id="btnPassword" " token operator">-input " placeholder="Password" type="password">
</span>        <span><div id="btnSignUp" class="app-button green ">SignUp</div>
</span>    <span></div>
</span><span></div></span>

Der obige HTML -Code ähnelt dem Bildschirm Signup 🎜>. Nehmen wir nun einen Controller an dieser Datenseite an. 

<span><!DOCTYPE html>
</span><span><html>
</span>  <span><head>
</span>    <span><title>My App</title>
</span>    <span><meta name="viewport" content="width=device-width,
</span>                                   initial<span>-scale=1.0,
</span>                                   maximum<span>-scale=1.0,
</span>                                   user<span>-scalable=no,
</span>                                   minimal<span>-ui">
</span>    <span><link rel="stylesheet" href="//cdn.kik.com/app/2.0.1/app.min.css">
</span>    <span><style>
</span>      <span>/* put your styles here */
</span>    <span></style>
</span>  <span></head>
</span>  <span><body>
</span>    <span><!-- put your pages here -->
</span>    <span><script src="https://img.php.cn/zeptojs.com/zepto.min.js"></script>
</span>    <span><script src="//cdn.kik.com/app/2.0.1/app.min.js"></script>
</span>    <span><script>
</span>      <span>/* put your javascript here */
</span>    <span></script>
</span>  <span></body>
</span><span></html></span>

Der obige Code ruft die Auth.login -Funktion auf, um sich mit Firebase -Daten zu authentifizieren. Wenn ein Benutzer gefunden wird, wird er zu loginHome .

weitergeleitet

Fügen wir die Controller -Methode für die Seite loginHome hinzu und definieren 

<span>try {
</span>     <span>App.restore(); // it loads/restores the app
</span> <span>} catch (err) {
</span>     <span>App.load('home'); // in case of error it loads the default page
</span> <span>}</span>
Da wir die Seite

Signin hinzugefügt haben, wenden Sie sich an die App.load ('Signin') im Anmeldungserfolg. Verknüpfen Sie die Homepage mit der Seite Signin mit dem Data-Ziel-Attribut. Durchsuchen Sie index.html und wenn es gut ist, sollten sich sowohl Anmelde- als auch Anmeldefunktionen gut funktionieren.

Hinzufügen einer Liste in Login Home

Erstellen Sie als nächstes eine Schnittstelle für den angemeldeten Benutzer, um ein Element zu einer Liste hinzuzufügen. Wir haben das vorhandene LoginHome -HTML so geändert, dass ein Textfeld und eine Schaltfläche enthalten sind. Wir haben auch eine Begrüßungsnachricht und einen Link in der oberen Bar hinzugefügt. Hier ist der geänderte HTML -Code: 

<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>
Wir müssen das Textfeld auf gültige Daten überprüfen und die Daten in Firebase speichern. Wenn die Daten ungültig sind, zeigen wir die Validierung mit Dialogen an. Um Daten in Firebase zu speichern, verwenden wir Push (). Unten finden Sie den Code für den Btnadd -Klick: 

<span><div class="app-page"></div></span>
Als nächstes müssen wir eine Schnittstelle bereitstellen, um die von den Benutzern eingegebenen Daten anzuzeigen. Erstellen wir eine andere Seite,

Wunschliste wie unten gezeigt: 

<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">My Web App</div>
</span>    <span></div>
</span><span></div></span>
Beachten Sie die UL mit der Klassen-App-Liste. Wir werden unsere Artikel in diese Liste einbeziehen. Auf der Seite

loginHome haben wir einen Link in der oberen Leiste namens Wunschliste . Lassen Sie uns diesem Link ein Ereignis anhängen, um die Seite bei Klicken Wunschliste zu laden. 

<span><div class="app-page" data-page="home">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-title">Simple Web App</div>
</span>    <span></div>
</span>    <span><div class="app-content">
</span>        <span><br />
</span>        <span><div class="app-button green">SignIn</div>
</span>        <span><br />
</span>        <span><div class="app-button blue">SignUp</div>
</span>    <span></div>
</span><span></div></span>

Jetzt müssen wir die Controller -Methode für die Seite Wunschliste deklarieren. Im Controller müssen wir ein Klickereignis definieren, um loginHome zu laden, wenn Sie auf die Schaltfläche in der oberen Leiste klicken. Wir müssen auch Daten von Firebase abrufen und an die UL-App-Liste binden. Hier ist der Controller -Code: 

<span><div class="app-page" data-page="SignUp">
</span>    <span><div class="app-topbar">
</span>        <span><div class="app-button left blue" data-target="home">back</div>
</span>    <span></div>
</span>    <span><br />
</span>    <span><div class="app-content">
</span>        <span><input id="btnEmail" class="app-input" placeholder="Email">
</span>        <span><input id="btnPassword" " token operator">-input " placeholder="Password" type="password">
</span>        <span><div id="btnSignUp" class="app-button green ">SignUp</div>
</span>    <span></div>
</span><span></div></span>

Versuchen Sie, nach index zu stöbern. Htmland alles sollte funktionieren.

Schlussfolgerung

In diesem Tutorial haben wir einige Funktionen von App.js verwendet, um eine kleine App zu erstellen. Wir haben uns nur auf eine begrenzte Anzahl von Funktionen wie App-Seite, App-Liste und App.Dialog konzentriert. Alle von App.js bereitgestellten Funktionen und Funktionen finden Sie in App.js -Dokumenten.

Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

häufig gestellte Fragen (FAQs) zu App.js

Was ist die primäre Funktion von App.js in der Webentwicklung? Es bietet ein Framework zum Erstellen von Benutzeroberflächen, Verwaltungsstatus und Bearbeitung von Ereignissen. Es ist so konzipiert, dass es einfach zu bedienen ist, mit einer einfachen API, mit der Entwickler schnell komplexe Anwendungen erstellen können. Es ist auch sehr modular, was bedeutet, dass Sie je nach den Anforderungen Ihres Projekts so viel oder so wenig davon verwenden können.

Wie vergleichen App.js mit anderen JavaScript -Bibliotheken? Im Gegensatz zu einigen anderen Bibliotheken versucht es nicht, alles zu tun. Stattdessen konzentriert es sich auf eine solide Grundlage für den Aufbau von Webanwendungen mit der Flexibilität, bei Bedarf andere Bibliotheken oder Tools hinzuzufügen. Dies macht es sowohl für Anfänger als auch für erfahrene Entwickler zu einer guten Wahl. mit anderen JavaScript -Frameworks. Es ist kein Ersatz für diese Werkzeuge, sondern eine Ergänzung zu ihnen. Sie können App.js verwenden, um bestimmte Aspekte Ihrer Anwendung zu verarbeiten, während Sie ein anderes Framework für andere Teile verwenden. Dies kann Ihren Code modular und einfacher machen.

Wie fange ich mit app.js? Sie können die Bibliothek von der offiziellen Website herunterladen oder über NPM installieren. Sobald Sie es installiert haben, können Sie es sofort in Ihren Projekten verwenden. Es gibt auch zahlreiche Tutorials und Ressourcen online verfügbar, mit denen Sie wissen, wie Sie App.js effektiv verwenden. und kann in einer Vielzahl von Webentwicklungsprojekten verwendet werden. Einige gängige Anwendungsfälle umfassen das Erstellen von Anwendungen mit einseitigen Seiten, das Erstellen interaktiver Benutzeroberflächen und das Verwalten von Status in komplexen Anwendungen. Es ist auch ein großartiges Werkzeug für Prototypen, da Sie schnell neue Ideen erstellen und testen können.

Ist App.js für groß angelegte Projekte geeignet? sowohl für kleine als auch für große Projekte. Das modulare Design erleichtert es einfach zu skalieren, wenn Ihr Projekt wächst. Sie können nur mit den Grundlagen beginnen und dann nach Bedarf mehr Funktionen hinzufügen. Dies macht es zu einer guten Wahl für kleine persönliche Projekte und große Unternehmensanwendungen. Architektur für die Datenbindung. Dies bedeutet, dass Änderungen in Ihren Daten (das Modell) automatisch in der Ansicht und umgekehrt reflektiert werden. Dies erleichtert einfach, Ihre Benutzeroberfläche mit Ihren Daten synchronisiert zu halten, ohne die Ansicht jedes Mal manuell aktualisieren zu müssen, wenn die Daten ändert. > Ja, App.js kann für die Entwicklung der mobilen App verwendet werden. Es ist so konzipiert, dass es reagiert und sowohl auf Desktop- als auch auf mobilen Geräten gut funktioniert. Sie können es verwenden, um mobile Web -Apps zu erstellen oder es in Verbindung mit Tools wie Cordova oder Telefonlap zu verwenden, um native mobile Apps zu erstellen.

Welche Art von Unterstützung ist für app.js verfügbar? Es gibt auch zahlreiche online verfügbare Ressourcen, einschließlich Tutorials, Dokumentation und Foren. Wenn Sie auf Probleme stoßen oder Fragen haben, können Sie normalerweise die Antworten finden, die Sie in der Community benötigen.

Ist App.js Open Source? . Dies bedeutet, dass Sie es kostenlos verwenden können und auch zu seiner Entwicklung beitragen können, wenn Sie dies wünschen. Der Quellcode ist auf Github verfügbar, und Beiträge der Community sind immer willkommen.

Das obige ist der detaillierte Inhalt vonEin Intro zu App.js - Mobile WebApps wurden einfach gemacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript mvc jquery css html npm angular Static define if for while format include require Session try Error register using class Interface Attribute Event JS number function default dom this ul github kind android ios phonegap https ui everything Access Foundation Other
Stellungnahme：
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
Vorheriger Artikel：20 nützliche Dokumente und Anleitungen für Front-End-EntwicklerNächster Artikel：20 nützliche Dokumente und Anleitungen für Front-End-Entwickler

In Verbindung stehende Artikel

Mehr sehen