Ionic移动app开发：登录实现

对于一款App必然会有一个登录界面，下面介绍一下使用ionic创建一个登录的过程：

创建ionic project

ionic start projectname template

安装依赖

–进入project 文件夹
npm install

新增登录页面LoginPage

ionic generate page login

新增服务 userService

ionic generate g provider userService

到目前为止，所有需要使用的文件已经添加完毕，现在进行相关代码的编写

第一步、userService作为服务，定义一下方法，分别为login、register、getUserInfo、logout，这些方法将在登录、注册等页面中被调用，现在以登录为例进行说明
第二步、登录页面的代码

登录界面二个TextBox，分别输入email与password
二个按钮Button，分别触发登录及注册操作，对应的方法分别为:(ngSubmit)=”login()” (click)=”createAccount()”
第三部、实现login 方法与createAccount方法

方法需要与远程服务器进行交互，因此需要导入UserService

import { UserServiceProvider } from ‘../../providers/user-service/user-service’;

需要使用NavController, AlertController, LoadingController, Loading, IonicPage

import { NavController, AlertController, LoadingController, Loading, IonicPage } from ‘ionic-angular’;

运行效果
分别为andorid与ios版本的运行效果

Ionic移动app开发：app登录实现完整过程相关推荐

app开发人脸登录和指纹登录_易讯云通讯推出“一键登录”，为App登录提供新方案...
移动互联网时代,用户的耐心越来越少,注意力也越来越弱,追求便捷与高效.登录的方式从自定义的账号密码登录,到邮箱登录,到第三方登录与手机验证码登录两种登录方式进行竞争,到现在的个人指纹,人脸识别等的识别 ...
背篼酥课堂第八课--APP开发--app图形化编程
一.app 开发环境 (mit app inventor) 1.网络开发环境第一推荐背篼酥服务器(仅限内部使用) 第二推荐:17COding http://ai2.17coding.net APP ...
app内录屏开发 ios_蓝七科技一款APP开发与ios企业签名过程中的雷区你知多少
一款APP开发途中中的雷区你知多少? 有需要的客户请联系(vchat:co10101co) 一款APP从开发到上线中要经历几个阶段,而开发途中中的雷区你知道几个呢?这里蓝七科技同伴们一齐来扫雷,看看这 ...
app开发人脸登录和指纹登录_App产品登录环节如何设计？四步掌握登录设计思路...
智能手机已经成为人类不可分割的器官,人们在线上处理生活的方方面面的习惯已经形成,APP作为线上渠道最主要的方式之一,已被各行各业广泛使用.这里将持续的和大家一同谈论关于APP产品设计的各模块.细节的设 ...
Kivy App开发之登录界面Demo
登录界面是根据个人设想简单设计的,效果如下: 代码如下,新建login.kv <LoginPage>:FloatLayout:canvas.before:Rectangle:size:se ...
浙大计算机学院app开发,App Inventor - 零基础Android移动应用开发
Q:我需要特殊版本的计算机吗? A:任何计算机都可以用于App Inventor开发,包括但不限于各个版本的MS Windows.各个版本的Mac OS X.各种发行版本的Linux.关键是要能上网( ...
非原生app开发app
2019独角兽企业重金招聘Python工程师标准>>> 1.变色龙云,一门app 对域名打包 2.apicloud,wex5,自由平台提供的规则开发 3.react native , ...
公开揭密团队成员开发鸿蒙 OpenHarmony 的完整过程(收获官方7k奖金和开发板等，2w字用心总结)
背景随着 OpenHarmony 组件开发大赛结果公布,我们的团队成员被告知获得了二等奖,在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享,当我们看到参赛通知的时候已经是 9 月中旬的时候 ...
GiWiFi模拟登录的完整过程
本文内容参考: 校园网GiWiFi模拟登陆 GiWiFi模拟登录步骤 1, 获取基本参数: 首先需要请求网关地址:172.17.1.2 如果你连接了GiWiFi并且未进行认证,那么本地址将会重定向到G ...

Ionic移动app开发：app登录实现完整过程