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

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

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

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

钥匙要点

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

>
>
>
入门

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

> app.js

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

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

的默认样式表

使用 zepto.js

创建主屏幕

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

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

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

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

登录后复制

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

登录后复制

>数据目标属性用于将屏幕链接在一起。将数据目标添加到主页上的“注册”按钮以链接到此屏幕。如果您浏览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>    <span><div class="app-topbar">
</span>        <span><div class="app-title">My Web App</div>
</span>    <span></div>
</span><span></div></span>

登录后复制

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

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

>浏览

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

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

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

登录后复制

>注册

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

屏幕。我们已经创建了

>注册

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

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

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

登录后复制

上面的代码调用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> <span><div class="app-topbar"> </span> <span><div class="app-title">My Web App</div> </span> <span></div> </span><span></div></span>
登录后复制
登录后复制
页面上，我们在顶部栏中有一个链接，称为 wish List
。让我们将一个事件附加到该链接，以加载 wishlist页面时。。现在，我们需要声明 wishlist 页面的控制器方法。在控制器内部，我们需要定义一个单击事件，以加载登录名
当单击顶部栏中的按钮时。我们还需要从Firebase获取数据并将其与类应用程序列表绑定到UL。这是控制器代码：
<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>
登录后复制
登录后复制

尝试浏览索引。 结论在本教程中，我们使用了app.js的某些功能来创建一个小应用程序。我们仅专注于有限的功能，例如应用程序页面，app-list和app.dialog。 app.js提供的所有功能和功能都可以在app.js文档中找到 >本教程中的源代码可在GitHub上找到。
>
<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>
登录后复制
经常询问有关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中文网其他相关文章！