ionic3學習之登陸頁

準備工做

部分源碼說明：

頁面跳轉的相關類說明

constructor(public modalCtrl: ModalController) {
}

咱們使用的是：ModalController 不是 NavController。

這二者的區別爲：
NavController 和 ModalController 都是打開新頁面，可是NavController 是直接將頁面放入到原有的頁面堆棧中的，而ModalController 是建立一個新的頁面堆棧（root nav stack），而後再放進去。

最直觀的界面效果區別：
一、使用Tabs 菜單，使用NavController 方法跳轉的頁面，並不會移除Tabs 菜單；可是使用ModalController 方法就會從底部彈出新的頁面，而且沒有了Tabs 菜單。
二、使用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文件，寫入如下代碼

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

接下來的一篇介紹下：怎麼實現記住密碼以後直接進入到首頁。