onsen ui教程_通过Onsen UI使您的Cordova应用程序更进一步

onsen ui教程

在本教程的第一部分中 ，我们研究了如何使用Onsen UI开始进行移动应用程序开发，设计用户登录和注册页面。 在本教程中，我们将使这些页面正常运行。 我们将利用Firebase作为该应用程序的后端。 在Onsen UI中，我们可以同时使用jQuery和AngularJS进行开发。 在本教程中，我们将使用AngularJS。

本教程的源代码可在GitHub上获得 。

入门

下载或克隆第一个教程源代码。 安装所有必需的依赖项，如下所示：

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

将浏览器指向http://localhost:8901/index.html ，您将看到我们在第一篇教程中设计的应用程序。 您也可以像在第一个教程中一样使用android模拟器来运行该应用程序。

实施登录

让我们开始为应用程序定义一个控制器。 如果打开/OnsenUI--Part1/www/js/app.js您应该看到已经定义了一个控制器。

(function() {'use strict';var module = angular.module('app', ['onsen']);module.controller('AppController', function($scope) {// more to come here});})();

首先，我们将验证用户名和密码是否为空值。 如果验证存在任何问题，我们将显示一个带有验证消息的模式窗口。 否则，我们将针对Firebase数据库进行身份验证。

让我们在控制器AppController定义一个称为SignIn的方法，如下所示：

$scope.data = [];$scope.SignIn = function() {var user = $scope.data.username;var pass = $scope.data.password;if (user && pass) {// success logic} else {// failure logic}
};

添加ngModel指令中的用户名和密码输入文本框index.html如下图所示：

接下来，我们将使用Onsen UI的ons-modal组件显示验证弹出窗口。 将以下html代码添加到登录ons-page （应该在第92行附近）。

Invalid Username or Password.

现在，将模式显示代码添加到SignIn的失败逻辑中，替换// failure logic注释：

modal.show();

将模式隐藏代码添加到我们刚刚添加HTML的ng-click事件中，如下所示：

Invalid Username or Password.

将ngClick指令添加到“登录”按钮，如下所示：

SignIn

启动服务器，然后使用空的用户名或密码单击登录按钮。 将会出现模态验证消息。 单击弹出窗口上的任意位置，它将消失。

这是上述代码的演示。

现在，让我们针对Firebase验证用户名和密码。 要开始使用Firebase，您需要注册一个免费帐户。 一旦注册并登录，您将获得一个firebase url，在我的情况下是：

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

在index.html包括以下脚本：

首先，我们需要使用Firebase网址创建一个Firebase实例。 然后使用此FirebaseSimpleLogin实例创建一个FirebaseSimpleLogin实例。 将此代码放在app.js的module.controller定义之后：

var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {if (!error) {if (user) {// On success authenticationconsole.log(user);}}
});

在SignIn函数内部，我们将验证用户名和密码，如下所示，将当前函数替换为以下代码：

$scope.SignIn = function() {var user = $scope.data.username;var pass = $scope.data.password;if (user && pass) {// success logicauth.login('password', {email: user,password: pass});} else {// failure logicmodal.show();}
};

我们已经使用auth.login针对Firebase数据库对用户名和密码进行身份验证。 身份验证成功后，用户将登录。

免费学习PHP！

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

原价$ 11.95 您的完全免费

为了启用身份验证过程，请首先登录Firebase并打开您当前正在使用的应用程序。 在左侧菜单中，点击Login & Auth 。 在“ Email & Password标签下，选中“ Enable Email & Password Authentication 。

使用用户名和密码将新用户添加到firebase数据库。 现在，运行该应用程序，然后尝试使用新的用户名和密码登录。 检查浏览器控制台，该控制台将使用户登录成功的用户身份验证。

这是上述代码的演示。 尝试使用用户名sam@sam.com和密码sam登录。

接下来，成功登录用户后，我们会将用户重定向到home.html 。 使用以下代码创建一个名为home.html的新文件。

Welcome
Welcome Home {{username}}!!

添加一个名为logout的新方法，如下所示：

$scope.logout = function() {auth.logout();         // logging out the firebase$scope.data = [];      // clearing user datamyNavigator.popPage(); // redirecting to sign in page
};

现在修改FirebaseSimpleLogin回调，如下所示：

var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {if (!error) {if (user) {$scope.username = user.email;myNavigator.pushPage('home.html', {animation: 'slide'});}}
});

我们使用ons-navigator进行页面导航。 myNavigator.pushPage用于导航到home.html页面。

这是上述代码的演示。

实施注册

我们还将使用firebase实现注册功能。 在注册页面中，我们当前有三个输入字段用于注册。 我们将仅使用电子邮件和密码，因为这是Firebase用户注册所需的全部。

首先，将ngModel指令添加到两个字段中，如下所示：

在AppController创建一个SignUp方法，该方法将验证电子邮件和密码是否为空值。 使用auth.create方法来注册新用户，如下所示：

$scope.reg = [];
$scope.SignUp = function() {var email = $scope.reg.email;var password = $scope.reg.pass;auth.createUser(email, password, function(error, user) {if (!error) {myNavigator.popPage();} else {alert('error');}});
};

如下所示，将ngClick指令添加到“注册”按钮：

Sign Up

如果用户未输入电子邮件或密码，我们将显示一个新的模式到“注册”页面。 外观如下：

Enter Email Address and Password.

修改注册功能，如下所示：

$scope.SignUp = function() {var email = $scope.reg.email;var password = $scope.reg.pass;if (email && password) {auth.createUser(email, password, function(error, user) {if (!error) {myNavigator.popPage();} else {alert('error');}});} else {modal.show();   // to show validation pop up message}
};

现在重新启动应用程序，然后尝试注册。 成功注册后，它将导航到“登录”页面。 尝试使用新凭据登录，您应该已登录。

以下是上述登录和注册功能的演示。

结论

在本教程中，我们使用Onsen UI框架和Firebase作为后端实现了登录和注册功能。

看一下Onsen UI提供的其他组件数量。 有关Onsen UI框架的深入研究，请参阅官方文档 。

请在下面的评论中告诉我们您的想法！

翻译自: https://www.sitepoint.com/taking-cordova-app-onsen-ui/

onsen ui教程

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！