准备工作
部分源码说明:
constructor(public modalCtrl: ModalController) {
}
我们使用的是:ModalController
不是 NavController
。
这两者的区别为:
NavController
和 ModalController
都是打开新页面,但是NavController
是直接将页面放入到原有的页面堆栈中的,而ModalController
是创建一个新的页面堆栈(root nav stack),然后再放进去。
最直观的界面效果区别:
- 使用Tabs 菜单,使用
NavController
方法跳转的页面,并不会移除Tabs
菜单;但是使用ModalController
方法就会从底部弹出新的页面,并且没有了Tabs 菜单。 - 使用
NavController
方法,新页面默认有返回按钮,使用ModalController
方法新页面默认是没有返回按钮的。
文档连接:
NavController :https://ionicframework.com/docs/api/navigation/NavController/
ModalController:https://ionicframework.com/docs/api/components/modal/ModalController/
新建 login 页面
// cd到项目目录,然后执行下面的代码
ionic g page login --no-module
命令的说明:
- ionic g page login 生成的 page 上面带有 module 文件
- ionic g page login –no-module 生成的 page 上面不带有 module 文件
执行完之后生成的文件,图示:
添加到根模块
进入 src/app 下,修改 app.module.ts
// 导入 loginPage
import {LoginPage} from "../pages/login/login";
// 在以下节点上面添加 LoginPage
declarations:[
LoginPage
],
entryComponents:[
LoginPage
]
修改程序的首页
我们程序进入的第一个界面,一般都是登录界面,然后通过跳转才到首页。所以,我们需要修改下程序的逻辑。
进入 src/app/ 下,修改 app.component.ts
// 导入 loginPage
import {LoginPage} from "../pages/login/login";
// 将源码部分的 rootPage 指向到 LoginPage
// rootPage:any = TabsPage;
rootPage:any = LoginPage; // 这个地方就加载程序启动的页面
修改登录界面
修改login.html
打开login.html文件,写入以下代码
<ion-header>
<ion-navbar>
<ion-title text-center>登录</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list inset>
<ion-item>
<ion-input type="text" value="admin" placeholder="用户名" #username></ion-input>
<ion-icon ios="ios-person" md="md-person" item-end [ngStyle]="iconStyle"></ion-icon>
</ion-item>
<ion-item>
<ion-input [type]="isShow ? 'text':'password'" value="88888" placeholder="密码" #password></ion-input>
<ion-icon ios="ios-key" md="md-key" item-end [ngStyle]="iconStyle"></ion-icon>
</ion-item>
<ion-item no-lines>
<ion-label>
<!-- 控制字体图标的显示是由 ios 以及 md 两个属性控制的 -->
<ion-icon [ios]="isShow ? 'ios-eye' : 'ios-eye-off'" [md]="isShow ? 'md-eye' : 'md-eye-off'"></ion-icon>
</ion-label>
<ion-toggle checked="false" [(ngModel)]="isShow"></ion-toggle>
</ion-item>
<ion-item no-lines>
<label item-left>记住密码</label>
<ion-toggle checked="false" [(ngModel)]="isRemember"></ion-toggle>
</ion-item>
</ion-list>
<div padding>
<button ion-button block color="primary" (click)="_login(username, password)">登录</button>
</div>
</ion-content>
图示:
部分样式说明:
// text-center 让文字居中
<ion-title text-center>登录</ion-title>
// no-lines 去除底部的线条
<ion-item no-lines></ion-item>
// item-left 让文字居左
<label item-left>记住密码</label>
修改login.ts
import { Component } from '@angular/core';
import { ModalController, ToastController} from 'ionic-angular';
import { TabsPage} from "../tabs/tabs";
import {Storage} from "@ionic/storage";
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
public isRemember: boolean = false;
public isShow: boolean = false;
iconStyle: object = {'color':'#488aff','font-size':'1.4em'};
constructor(public modalCtrl: ModalController,
public toastCtrl: ToastController,
public storage: Storage) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
_login(username: HTMLInputElement, password: HTMLInputElement){
if (username.value.length === 0){
this.showToast("bottom", "请输入");
return false;
}
if (password.value.length === 0){
this.showToast("bottom", "请输入密码");
return false;
}
let data = {username: username.value, password: password.value, isRemember: this.isRemember};
// 储存用户信息
this.storage.remove("USER_INFO");
this.storage.set("USER_INFO", JSON.stringify(data));
// 界面跳转
let modal = this.modalCtrl.create(TabsPage, data);
modal.present();
}
showToast(position: string, message: string) {
let toast = this.toastCtrl.create({
message: message,
duration: 2000,
position: position
});
toast.present(toast);
}
}
接下来的一篇介绍下:怎么实现记住密码之后直接进入到首页。