ionic3学习之登录页

准备工作

部分源码说明：

页面跳转的相关类说明

constructor(public modalCtrl: ModalController) {
}

我们使用的是：ModalController 不是 NavController。

这两者的区别为：
NavController 和 ModalController 都是打开新页面，但是NavController 是直接将页面放入到原有的页面堆栈中的，而ModalController 是创建一个新的页面堆栈（root nav stack），然后再放进去。

最直观的界面效果区别：
1、使用Tabs 菜单，使用NavController 方法跳转的页面，并不会移除Tabs 菜单；但是使用ModalController 方法就会从底部弹出新的页面，并且没有了Tabs 菜单。
2、使用NavController 方法，新页面默认有返回按钮，使用 ModalController 方法新页面默认是没有返回按钮的。

文档连接：
NavController ：https://ionicframework.com/do...
ModalController：https://ionicframework.com/do...

新建 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文件，写入以下代码

图示：

部分样式说明：

// text-center 让文字居中
登录

// no-lines 去除底部的线条


// item-left 让文字居左
记住密码

修改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);
  }
}

接下来的一篇介绍下：怎么实现记住密码之后直接进入到首页。