app.js的介绍 - 移动网络应用程序变得容易

JavaScript在移动应用程序开发中越来越流行。它使Web应用程序开发人员无需学习任何母语技能即可开发移动Web应用程序。

在本教程中，我们将讨论一个名为app.js的轻量级JavaScript UI库。使用app.js可以创建移动Web应用程序而不会损害性能或外观。>

钥匙要点

> app.js是一个轻巧的JavaScript UI库，允许开发人员在不损害性能或美观的情况下创建移动Web应用程序。>

教程提供了一个分步指南，用于使用app.js和firebase作为后端创建简单的用户注册应用程序。
> app.js构建是为了为静态单页应用程序的制造商提供服务，将所有页面导航保留在网页的会话中，并将“页面”定义为可以实例化的dom节点。
• >
>教程涵盖了创建主屏幕，注册屏幕，登录屏幕并在登录主页中添加列表，并提供每个步骤的详细说明和示例代码。
• >
> app.js由于其模块化设计而适用于小型和大型项目，并且可以与其他JavaScript框架一起使用。
• >
• 入门

在本教程的过程中，我们将使用

> app.js

创建一个简单的用户注册应用程序。我们将使用Firebase作为后端。首先，下载app.js并解压缩。在内部我们有4个文件。

> app.min.css：包含所有android/ios样式

的默认样式表

> app.min.js：库
index.html：启动的基本模板文件
zepto.js：像库一样的移动友好式jQuery
• 使用 zepto.js
是可选的。在本教程中，我们将使用jQuery。

创建主屏幕

下面显示的是app.js Web应用程序的标准格式。>

>让我们从头开始。打开index.html，然后从app.min.css，app.min.js中删除身体的所有内容，然后添加下面的脚本。

>下载jQuery并将其包含在您的页面中或参考jQuery cdn版本。

<span>
</span><span>
</span>  <span>
</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>
</style></span>      <span>/* put your styles here */
</span>    <span>
</span>  <span>
</span>  <span>
</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>
</script></span>      <span>/* put your javascript here */
</span>    <span>
</span>  <span>
</span><span></span>

<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>

创建一个div，添加类应用程序页面，您就可以准备就绪。类应用程序页面用于定义页面。

>应用程序页面必须始终具有数据页面属性。数据页用于从JavaScript访问该页面。

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

现在，让我们在其中添加顶级栏和标题。

>

<span><div class="app-page"></div></span>

接下来，我们需要在主页上添加一个标志和注册按钮。所有内容都需要在App-Content Div中定义，因此创建App-content Div并将按钮放入其中。

browseindex.html，您应该看到带有签名和注册按钮的主页。

创建注册屏幕

> app.js构建是为静态单页应用程序的制造商提供服务。这意味着它将所有页面导航保持在网页的会话中，将“页面”定义为可以实例化的

>的dom节点。

来自app.js文档

我们将在相同的index.html中创建所有页面。让我们创建>注册屏幕，然后将其连接到主屏幕按钮。这是外观：

<span>
</span><span>
</span>  <span>
</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>
</style></span>      <span>/* put your styles here */
</span>    <span>
</span>  <span>
</span>  <span>
</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>
</script></span>      <span>/* put your javascript here */
</span>    <span>
</span>  <span>
</span><span></span>

>数据目标属性用于将屏幕链接在一起。将数据目标添加到主页上的“注册”按钮以链接到此屏幕。如果您浏览index.html文件，然后单击主页上的“注册”按钮，它将重定向到Inbeup屏幕。

>将您的应用程序挂接到firebase

>

firebase是实时存储和同步数据的功能强大的API。要开始使用Firebase，您需要注册一个免费帐户。只需登录，创建应用程序，然后单击链接以管理应用程序。您将获得一个独特的URL来存储数据。就我而言，它是：

> https://burning-fire – 1723.firebaseio.com/

>在Firebase仪表板上，单击左侧菜单的简单登录。单击电子邮件和密码身份验证提供程序选项卡并检查已启用。

>

>创建一个称为

controller.js 的控制器脚本，并将其包含在中。每个应用程序页面都有控制器逻辑。在> controller.js 中，我们将定义控制器逻辑以读取电子邮件和密码，然后将其存储在firebase中。 开始，下载并包括Firebase客户端或引用CDN版本。

我们还需要firebase简单的登录脚本。

<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>

首先，我们需要使用Firebase URL创建一个firebase实例。使用此Firebase实例，创建一个FirebaseImplelogin实例。

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

当我们尝试身份验证用户登录时，如果没有错误，将加载

loginhome

<span><div class="app-page"></div></span>

。

接下来，我们将为 ignup页面添加控制器逻辑。这是它的外观：

>单击btnsignup

注册

<span><div class="app-page" data-page="home">
    <span><div class="app-topbar">
        <span><div class="app-title">My Web App</div>
</span>    <span></span>
</div>
</span><span></span>
</div></span>

页面上的按钮，将通过调用auth.createuser。

添加我们正在成功的登录上加载的loginhome html页面，如下所示：

>浏览

index.html页面，然后单击> is implyup

按钮。输入电子邮件和密码，然后单击

<span><div class="app-page" data-page="home">
    <span><div class="app-topbar">
        <span><div class="app-title">Simple Web App</div>
</span>    <span></span>
</div>
</span>    <span><div class="app-content">
        <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></span>
</div>
</span><span></span>
</div></span>

>注册

。如果一切顺利，新添加的用户将出现在firebase用户列表中。> 在屏幕上创建符号 到目前为止，到目前为止，我们拥有的是一个主页，该页面链接到> Inbip and signin

屏幕。我们已经创建了

>注册

屏幕，并将其链接到主页。让我们添加一个

> signin屏幕。 上面的HTML代码类似于> Inbeup屏幕。现在，让我们将控制器附加到此数据页面。

<span>
</span><span>
</span>  <span>
</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>
</style></span>      <span>/* put your styles here */
</span>    <span>
</span>  <span>
</span>  <span>
</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>
</script></span>      <span>/* put your javascript here */
</span>    <span>
</span>  <span>
</span><span></span>

上面的代码调用auth.login函数以针对firebase数据进行身份验证。如果找到了用户，它将重定向到loginhome。

>让我们添加

loginhome页面的控制器方法，并定义注销功能。

<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>

>由于我们添加了

signin 页，因此在注册成功回调中删除app.load（'signin'）。使用数据标记属性将主页链接到> signin>页面。浏览到 index.html>，如果很好，登录和注册功能都应正常。

>在登录家庭中添加列表

>接下来，让我们为登录的用户创建一个接口，以将项目添加到列表中。我们修改了现有的Loginhome HTML，以包括一个文本框和一个按钮。我们还在顶部栏中添加了欢迎消息和链接。这是修改后的HTML代码：

我们需要检查文本框以获取有效数据，并将数据保存到firebase中。如果数据无效，我们将使用对话框显示弹出验证。为了将数据保存到Firebase中，我们将使用Push（）。以下是btnadd的代码，请单击：

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

接下来，我们需要提供一个接口来显示用户输入的数据。让我们创建另一个页面，

wishlist

<span><div class="app-page"></div></span>

，如下所示：

> >使用类应用程序列表注意UL。我们将把物品填充到此列表中。在

> loginhome

<span><div class="app-page" data-page="home">
    <span><div class="app-topbar">
        <span><div class="app-title">My Web App</div>
</span>    <span></span>
</div>
</span><span></span>
</div></span>

页面上，我们在顶部栏中有一个链接，称为 wish List

。让我们将一个事件附加到该链接，以加载 wishlist页面时。。 现在，我们需要声明 wishlist 页面的控制器方法。在控制器内部，我们需要定义一个单击事件，以加载登录名

当单击顶部栏中的按钮时。我们还需要从Firebase获取数据并将其与类应用程序列表绑定到UL。这是控制器代码：

<span><div class="app-page" data-page="home">
    <span><div class="app-topbar">
        <span><div class="app-title">Simple Web App</div>
</span>    <span></span>
</div>
</span>    <span><div class="app-content">
        <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></span>
</div>
</span><span></span>
</div></span>

尝试浏览索引。 结论 在本教程中，我们使用了app.js的某些功能来创建一个小应用程序。我们仅专注于有限的功能，例如应用程序页面，app-list和app.dialog。 app.js提供的所有功能和功能都可以在app.js文档中找到 >本教程中的源代码可在GitHub上找到。

>

<span><div class="app-page" data-page="SignUp">
    <span><div class="app-topbar">
        <span><div class="app-button left blue" data-target="home">back</div>
</span>    <span></span>
</div>
</span>    <span><br>
</span>    <span><div class="app-content">
        <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></span>
</div>
</span><span></span>
</div></span>

经常询问有关app.js

的问题（常见问题解答）

> app.js在Web开发中的主要功能是什么？

app.js是一个JavaScript库，简化了构建Web应用程序的过程。它提供了一个用于创建用户界面，管理状态和处理事件的框架。它旨在易于使用，具有简单的API，可以使开发人员快速构建复杂的应用程序。它也是高度模块化的，这意味着您可以根据项目的要求使用尽可能多的或尽可能少的时间。

>

app.js与其他JavaScript库相比如何？

>我可以将app.js与其他JavaScript框架一起使用，例如Angular还是React？

>我如何开始使用app.js？

>开始使用app.js很容易。您可以从官方网站下载图书馆，也可以通过NPM安装。安装后，您可以立即开始在项目中使用它。在线上也有大量的教程和资源可帮助您学习如何有效地使用app.js。并且可以用于各种网络开发项目。一些常见用例包括构建单页应用程序，创建交互式用户界面以及在复杂应用程序中管理状态。它也是原型制作的绝佳工具，因为它允许您快速构建和测试新想法。

app.js适合大规模项目吗？

是的，是的，app.js是合适的。用于小型和大型项目。它的模块化设计使随着项目的增长而易于扩展。您可以仅从基础知识开始，然后根据需要添加更多功能。这使其成为小型个人项目和大型企业应用程序的一个不错的选择。

> app.js如何处理数据绑定？

app.js使用Model-view-view-controller（MVC）数据绑定的体系结构。这意味着您的数据（模型）的变化会自动反映在视图中，反之亦然。这使您可以轻松地保持用户界面与数据同步，而无需每次更改数据时手动更新视图。

>

>我可以将app.js用于移动应用程序开发吗？ >是的，App.js可用于移动应用程序开发。它的设计旨在响应迅速，并且在台式机和移动设备上都可以正常运行。您可以使用它来构建移动Web应用程序，或者与Cordova或PhoneGap等工具一起使用它来构建本机移动应用程序。

app.js？

app.js提供什么样的支持。在线也有很多可用的资源，包括教程，文档和论坛。如果您遇到任何问题或有任何疑问，通常可以在社区中找到所需的答案。

是app.js开源吗？

是的，app.js是开源的。 。这意味着您可以免费使用它，并且您可以根据需要为其开发做出贡献。源代码可在GitHub上获得，并且始终欢迎社区的贡献。

以上是app.js的介绍 - 移动网络应用程序变得容易的详细内容。更多信息请关注PHP中文网其他相关文章！