应用程序app、web端_App.js简介–简化移动Web应用程序

最新推荐文章于 2021-04-26 15:41:45 发布

dingshi7798

最新推荐文章于 2021-04-26 15:41:45 发布

阅读量228

点赞数

文章标签： python java vue php javascript ViewUI

原文链接：https://www.sitepoint.com/intro-app-js-mobile-webapps-made-easy/

版权

应用程序app、web端

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

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

入门

在本教程的过程中，我们将使用App.js创建一个简单的用户注册应用程序。我们将使用Firebase作为后端。首先，下载App.js并将其解压缩。里面有4个文件。

app.min.css：包含所有android / iOS样式的默认样式表
app.min.js：库
index.html：入门基本模板文件
zepto.js：类似于移动设备的jQuery库

使用zepto.js是可选的。在本教程中，我们将使用jQuery 。

创建主屏幕

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

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

让我们从头开始。打开index.html并从主体中删除除app.min.js和app.min.css之外的app.min.css ，并在下面添加脚本。

try {
     App.restore(); // it loads/restores the app
 } catch (err) {
     App.load('home'); // in case of error it loads the default page
 }

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

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

创建一个div ，添加类app-page ，您就可以准备好第一页。类app-page用于定义页面。

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

app-page必须始终具有data-page属性。 data-page用于从JavaScript访问页面。

现在让我们添加一个顶部栏和标题。

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

接下来，我们需要在主页上添加一个SignIn and SignUp按钮。所有内容都需要在app-content div中定义，因此创建app-content div并将按钮放在其中。

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

浏览index.html ，您应该会看到带有SignIn和SignUp按钮的主页。

创建注册屏幕

App.js旨在为静态单页应用程序的制造商提供服务。这意味着它将所有页面导航都保留在网页会话中，将“页面”定义为可以实例化的DOM节点

从App.js文档

我们将在相同的index.html创建所有页面。让我们创建SignUp屏幕并将其连接到主屏幕按钮。外观如下：

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

data-target属性用于将屏幕链接在一起。添加data-target的SignUp主页上链接按钮，此屏幕。如果您浏览index.html文件并单击主页上的SignUp按钮，它将重定向到SignUp屏幕。

将您的应用程序连接到Firebase

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

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

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

在firebase仪表板中，从左侧菜单中单击“ Simple login ”。单击Email and Password身份验证提供程序选项卡，然后选中启用。

创建一个名为controller.js的控制器脚本，并将其包含在index.html中 。每个app-page都有控制器逻辑。在controller.js中 ，我们将定义控制器逻辑以读取电子邮件和密码并将其存储在firebase中。

首先，请下载并包含firebase客户端或参考CDN版本。

<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>

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

<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>

首先，我们需要使用Firebase网址创建一个Firebase实例。使用此firebase实例，创建一个FirebaseSimpleLogin实例。

var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com'); 
var wishRef = new Firebase('https://burning-fire-1723.firebaseio.com/WishList');
var auth = new FirebaseSimpleLogin(firebaseRef, function (error, user) {
    if (!error) {
        if (user) {
            App.load('LoginHome',user);
        }
    }
});

当我们尝试验证用户登录名时，如果没有错误，则将加载LoginHome 。

下一步，我们将添加控制器逻辑的注册页面。外观如下：

App.controller('SignUp', function (page) {

    $(page)
        .find('#btnSignUp')
        .on('click', function () {
            var email = $('#btnEmail').val();
            var password = $('#btnPassword').val();
            if (email &amp;&amp; password) {
            // on successful validation create the user
                auth.createUser(email, password, function (error, user) {
                    if (!error) {
                        // App.load('SignIn'); 
                    }
                });
            } else {
            // on validation failure show the validation message
                App.dialog({
                    title: 'Validation Error',
                    text: 'Please enter username and password.',
                    okButton: 'Try Again',
                    cancelButton: 'Cancel'
                }, function (tryAgain) {
                    if (tryAgain) {
                        App.load('SignUp');
                    }
                });
            }

        });

});

点击注册页面上的btnSignUp按钮，将通过调用创建一个用户auth.createUser 。

添加成功登录后正在加载的LoginHome html页面，如下所示：

<div class="app-page" data-page="LoginHome">
    <div class="app-topbar">
        <div class="app-title">Welcome Home!! <span class="user"></span>
        </div>
        <div class="app-button right">Logout</div>
    </div>
    <div class="app-content">
    </div>
</div>

浏览index.html页面，然后单击SignUp按钮。输入一个电子邮件地址和密码，然后点击注册。如果一切顺利，新添加的用户将显示在firebase用户列表中。

创建登录屏幕

我们至今是一个链接到注册和登入画面的主页。我们已经创建了SignUp屏幕，并将其链接到主页。让我们添加一个登录屏幕。

<div class="app-page" data-page="SignIn">
    <div class="app-topbar">
        <div class="app-button left blue" data-target="home">back</div>
    </div>
    <br />
    <div class="app-content">
        <input id="btnUsername" class="app-input" placeholder="Username">
        <input id="btnPass" class="app-input" placeholder="Password" type="password">
        <div id="btnSignIn" class="app-button green">SignIn</div>
    </div>
</div>

上面HTML代码类似于注册画面。现在，让我们将控制器附加到此data-page 。

App.controller('SignIn', function (page) {

    $(page)
        .find('#btnSignIn')
        .on('click', function () {
            var email = $('#btnUsername').val();
            var password = $('#btnPass').val();
            if (email &amp;&amp; password) {
                auth.login('password', {
                    email: email,
                    password: password
                });
            } else {
                App.dialog({
                    title: 'Validation Error',
                    text: 'Please enter username and password.',
                    okButton: 'Try Again',
                    cancelButton: 'Cancel'
                }, function (tryAgain) {
                    if (tryAgain) {
                        App.load('SignIn');
                    }
                });
            }
        });
});

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

让我们为LoginHome页面添加控制器方法并定义注销功能。

App.controller('LoginHome', function (page,user) {
    $(page)
        .find('.user').text(user.email); //setting the email in welcome message 

    $(page)
        .find('.app-button')
        .on('click', function () {
            auth.logout();  //logs out the user session
            App.load('SignIn'); // loads the Sign In page
        });
});

由于我们已经添加了SignIn页面，因此App.load('SignIn')在SignUp成功回调中取消对App.load('SignIn')注释。使用data-target属性将主页链接到SignIn页面。浏览至index.html ，如果一切正常，则登录和注册功能均应正常工作。

在登录主页中添加列表

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

<div class="app-page" data-page="LoginHome">
    <div class="app-topbar">
        <div id="btnShowList" class="app-button red left">Wish List</div>
        <div class="app-title">Welcome Home!! <span class="user"></span>
        </div>
        <div id="btnLogout" class="app-button red right ">Logout</div>
    </div>
    <div class="app-content">


        <input id="txtWish" class="app-input" placeholder="wish">
        <br />
        <div id="btnAdd" class="app-button green">Add Wish</div>

    </div>
</div>

我们需要在文本框中检查有效数据，然后将数据保存到firebase中。如果数据无效，我们将使用Dialogs显示验证弹出窗口。要将数据保存到Firebase中，我们将使用push（）。以下是btnAdd点击的代码：

$(page)
    .find('#btnAdd')
    .on('click', function () {
        var wish = $('#txtWish').val();
        if (wish) { // checking if valid data

            // if valid data insert into firebase
            wishRef.push({
                'user_id': user.email,
                'text': wish
            });
            App.load('WishList',user); // load the page to show all wishes
        } 
        else{
            // got invalid data, show validation message
            App.dialog({
                title: 'Validation Error',
                text: 'Looks like you forgot to enter the wish.',
                okButton: 'Try Again',
                cancelButton: 'Cancel'
            }, function (tryAgain) {
                if (tryAgain) {
                    App.load('LoginHome', user);
                }
            });
        }

    });

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

<div class="app-page" data-page="WishList">
    <div class="app-topbar">
        <div class="app-title">Wish List</div>
        <div class="app-button left blue">Back</div>
    </div>
    <div class="app-content">
        <ul class="app-list">

        </ul>
    </div>
</div>

注意ul和类app-list 。我们将把我们的项目填充到此列表中。在LoginHome页面上，我们在顶部栏中有一个名为Wish List的链接。让我们在该链接上附加一个事件，以在单击该链接时加载“ 愿望清单”页面。

$(page)
    .find('#btnShowList')
    .on('click', function () {
        App.load('WishList', user);
    });

现在，我们需要为WishList页面声明controller方法。在控制器内部，我们需要定义一个单击事件，以在单击顶部栏中的按钮时加载LoginHome 。我们还需要从firebase中获取数据，并将其与类app-list绑定到ul 。这是控制器代码：

App.controller('WishList', function (page, user) {
    $(page)
        .find('.app-button')
        .on('click', function () {
            App.load('LoginHome', user); //Loading LoginHome page
        });

    // Fetching data from Firebase and passing it to show function
    new Firebase('https://burning-fire-1723.firebaseio.com/WishList')
        .once('value', show);

    function show(snap) {
        $.each(snap.val(), function (i, value) {
            var spanText = $('<span/>').css('font-weight', 'bold').text(value.text);
            var spanUser = $('<span/>').text(' by:: ' + value.user_id);
            $(page).find('.app-list').append($('<li/>').append(spanText, spanUser));
        });
    }
});

尝试浏览到index.html ，一切都应该正常工作。