JavaScript est devenu de plus en plus populaire pour le développement d'applications mobiles. Il a permis aux développeurs d'applications Web de développer des applications Web mobiles sans apprendre de compétences en langue maternelle.
Dans ce tutoriel, nous discuterons d'une bibliothèque d'interface utilisateur JavaScript légère appelée app.js. Utilisation de app.js, on peut créer des applications Web mobiles sans compromettre les performances ou les looks.
Au cours de ce tutoriel, nous créerons une application d'enregistrement utilisateur simple à l'aide de app.js . Nous utiliserons Firebase comme backend. Pour commencer, téléchargez app.js et dézippez-le. À l'intérieur, nous avons 4 fichiers.
L'utilisation de zepto.js est facultative. Dans ce tutoriel, nous utiliserons jQuery.
ci-dessous indiqué est le format standard pour les applications Web app.js.
<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>
Commençons par zéro. Ouvrez index.html et supprimez tout du corps à l'exception de l'application.min.css, app.min.js et ajoutez le script ci-dessous.
<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>Téléchargez jQuery et incluez-le dans votre page ou référez-vous à la version jQuery CDN.
<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>
Créez un div, ajoutez une page d'application de classe et vous avez votre première page prête. L'application de classe est utilisée pour définir une page.
<span><div class="app-page"></div></span>
L'application d'application doit toujours avoir un attribut de page de données. La page de données est utilisée pour accéder à la page à partir de JavaScript.
maintenant, ajoutons une barre supérieure et un titre.
<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>
Ensuite, nous devons ajouter un bouton Signin et d'inscription sur la page d'accueil. Tous les contenus doivent être définis à l'intérieur d'une div-contenu de l'application, créez donc le div-contenu de l'application et placez les boutons à l'intérieur.
<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 et vous devriez voir la page d'accueil avec un bouton Signin et d'inscription.
app.js est conçue pour servir les fabricants d'applications statiques à une seule page. Cela signifie qu'il maintient toute la navigation des pages dans la session de la page Web, définissant les «pages» comme des nœuds DOM qui peuvent être instanciés
à partir de la documentation app.js
Nous créerons toutes nos pages dans le même index.html. Créons l'écran Inscription et connectez-le au bouton de l'écran d'accueil. Voici à quoi ça ressemble:
<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>
L'attribut Data-Target est utilisé pour relier les écrans ensemble. Ajoutez le cible des données au bouton d'inscription sur la page d'accueil pour créer un lien vers cet écran. Si vous parcourez le fichier index.html et cliquez sur le bouton d'inscription sur la page d'accueil, il redirigera vers l'écran d'inscription.
Firebase est une API puissante pour stocker et synchroniser les données en temps réel. Pour commencer avec Firebase, vous devrez vous inscrire à un compte gratuit. Connectez-vous simplement, créez une application et cliquez sur le lien pour gérer l'application. Vous obtiendrez une URL unique pour stocker les données. Dans mon cas, c'est:
https://burning-fire–1723.firebaseio.com/
Dans le tableau de bord Firebase, cliquez sur la connexion simple dans le menu à gauche. Cliquez sur l'onglet Provideurs d'authentification par e-mail et mot de passe et vérifiez activé.
Créez un script de contrôleur appelé contrôleur.js et incluez-le dans index.html . Chaque application d'application a une logique de contrôleur. Dans contrôleur.js , nous allons définir la logique du contrôleur pour lire les e-mails et le mot de passe et le stocker dans Firebase.
Pour commencer, télécharger et inclure le client Firebase ou référence à la version CDN.
<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>Nous aurons également besoin du script de connexion simple de Firebase.
<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>
Nous devons d'abord créer une instance de base de feu à l'aide de notre URL de base de feu. À l'aide de cette instance de base de feu, créez une instance FirebasesImplelogine.
<span><div class="app-page"></div></span>
Lorsque nous essayons d'authentifier la connexion de l'utilisateur, s'il n'y a pas d'erreur, LoginHome sera chargé.
Ensuite, nous ajouterons la logique du contrôleur pour la page Inscription . Voici à quoi cela ressemblera:
<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>
Cliquez sur le bouton btnsignup sur la page Inscription , créera un utilisateur en appelant Auth.CreateUser.
Ajoutez la page LoginHome HTML que nous chargeons sur une connexion réussie comme indiqué ci-dessous:
<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>
Parcourez la page index.html et cliquez sur le bouton Inscription . Entrez un e-mail et un mot de passe et cliquez sur Inscription . Si tout se passe bien, l'utilisateur nouvellement ajouté apparaîtra dans la liste d'utilisateurs de Firebase.
Ce que nous avons jusqu'à présent, c'est une page d'accueil avec un lien vers Inscription et Signin écrans. Nous avons créé l'écran Inscription et l'avons également lié à la page d'accueil. Ajoutons un écran Signin .
<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>
Le code HTML ci-dessus est similaire à l'écran Inscription . Attachons maintenant un contrôleur à cette page de données.
<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>
Le code ci-dessus appelle la fonction Auth.login pour s'authentifier par rapport aux données de la base de feu. Si un utilisateur est trouvé, il redirigera vers LoginHome .
Ajoutons la méthode du contrôleur pour la page LoginHome et définissons la fonctionnalité de déconnexion.
<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>Puisque nous avons ajouté la page Signin , décommentez l'application.load ('Signin') dans l'inscription Success Rappel. Lintez la page d'accueil à la page Signine à l'aide de l'attribut Data-Target. Parcourir à index.html et si c'est bien, la connexion et la fonctionnalité d'inscription devraient fonctionner correctement.
Ensuite, créons une interface pour l'utilisateur connecté pour ajouter un élément à une liste. Nous avons modifié le LoginHome HTML existant pour inclure une zone de texte et un bouton. Nous avons également ajouté un message de bienvenue et un lien dans la barre supérieure. Voici le code HTML modifié:
<span><script src="https://code.jquery.com/jquery-1.9.0.js"></script></span>
Nous devons cocher la zone de texte pour les données valides et enregistrer les données dans Firebase. Si les données sont invalides, nous afficherons la validation apparaître à l'aide de boîtes de dialogue. Pour enregistrer les données dans Firebase, nous utiliserons Push (). Vous trouverez ci-dessous le code pour le BTNADD Cliquez:
<span><div class="app-page"></div></span>
Ensuite, nous devons fournir une interface pour afficher les données saisies par les utilisateurs. Créons une autre page, WishList comme indiqué ci-dessous:
<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>
Notez l'UL avec la liste d'application de classe. Nous allons remplir nos articles dans cette liste. Sur la page LoginHome , nous avons un lien dans la barre supérieure appelée Wish List . Attachons un événement à ce lien pour charger la page wishlist lorsque vous cliquez sur.
<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>
Maintenant, nous devons déclarer la méthode du contrôleur pour la page wishlist . À l'intérieur du contrôleur, nous devons définir un événement de clic pour charger LoginHome lorsque vous cliquez sur le bouton dans la barre supérieure. Nous devons également récupérer les données de Firebase et les lier à l'UL avec la liste d'application de classe. Voici le code du contrôleur:
<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>
Essayez de naviguer sur index.htmland tout devrait fonctionner.
Dans ce tutoriel, nous avons utilisé certaines fonctionnalités d'App.js pour créer une petite application. Nous nous sommes concentrés uniquement sur un nombre limité de fonctionnalités telles que App-Page, App-List et App.dialog. Toutes les fonctionnalités et fonctionnalités fournies par app.js peuvent trouver dans les documents app.js
Le code source de ce tutoriel est disponible sur github.
app.js est une bibliothèque JavaScript qui simplifie le processus de création d'applications Web. Il fournit un cadre pour créer des interfaces utilisateur, gérer l'état et gérer les événements. Il est conçu pour être facile à utiliser, avec une API simple qui permet aux développeurs de créer rapidement des applications complexes. Il est également très modulaire, ce qui signifie que vous pouvez en utiliser autant ou peu que vous en avez besoin, selon les exigences de votre projet.
app.js appartient à sa simplicité et à sa modularité. Contrairement à certaines autres bibliothèques, il n'essaie pas de tout faire. Au lieu de cela, il se concentre sur la fourniture d'une base solide pour la création d'applications Web, avec la flexibilité d'ajouter d'autres bibliothèques ou outils au besoin. Cela en fait un bon choix pour les débutants et les développeurs expérimentés.
Oui, App.js est conçu pour bien fonctionner avec d'autres frameworks JavaScript. Ce n'est pas un remplacement de ces outils, mais plutôt un complément. Vous pouvez utiliser App.js pour gérer certains aspects de votre application, tout en utilisant un autre framework pour d'autres pièces. Cela peut rendre votre code plus modulaire et plus facile à entretenir.
Le début de l'application avec app.js est facile. Vous pouvez télécharger la bibliothèque à partir du site officiel ou l'installer via NPM. Une fois que vous l'avez installé, vous pouvez commencer à l'utiliser immédiatement dans vos projets. Il existe également de nombreux tutoriels et ressources disponibles en ligne pour vous aider à apprendre à utiliser efficacement app.js.
app.js est polyvalent et peut être utilisé dans une variété de projets de développement Web. Certains cas d'utilisation courants comprennent la création d'applications à une seule page, la création d'interfaces utilisateur interactives et la gestion de l'état dans des applications complexes. C'est aussi un excellent outil de prototypage, car il vous permet de construire et de tester rapidement de nouvelles idées.
Oui, app.js convient pour les projets à petite et à grande échelle. Sa conception modulaire facilite l'évolution à mesure que votre projet se développe. Vous pouvez commencer avec les bases, puis ajouter plus de fonctionnalités au besoin. Cela en fait un bon choix pour les petits projets personnels et les grandes applications d'entreprise.
App.js utilise un modèle de contrôle de modèle de modèle (MVC) (MVC) Architecture pour la liaison des données. Cela signifie que les modifications de vos données (le modèle) se reflètent automatiquement dans la vue, et vice versa. Cela facilite la synchronisation de votre interface utilisateur avec vos données, sans avoir à mettre à jour manuellement la vue chaque fois que les données changent.
Oui, App.js peut être utilisé pour le développement d'applications mobiles. Il est conçu pour être réactif et fonctionne bien sur les appareils de bureau et mobiles. Vous pouvez l'utiliser pour créer des applications Web mobiles, ou l'utiliser en conjonction avec des outils comme Cordova ou PhoneGap pour créer des applications mobiles natives.
app.js a une solide communauté de développeurs qui sont toujours prêts à aider. Il existe également de nombreuses ressources disponibles en ligne, y compris des tutoriels, de la documentation et des forums. Si vous rencontrez des problèmes ou avez des questions, vous pouvez généralement trouver les réponses dont vous avez besoin au sein de la communauté.
Oui, app.js est open source . Cela signifie que vous pouvez l'utiliser gratuitement, et vous pouvez également contribuer à son développement si vous le souhaitez. Le code source est disponible sur GitHub, et les contributions de la communauté sont toujours les bienvenues.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Trading quantitatif de monnaie numérique
utilisation d'ostringstream
Comment exécuter le projet phpstudy
Quelles sont les nouvelles fonctionnalités de Hongmeng OS 3.0 ?
Comment définir la variable d'environnement de chemin
Comment demander l'enregistrement d'une adresse e-mail
qu'est-ce que l'index
Comment désactiver la complétion automatique sublime
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
