ionic3 教程（二）登陸頁製做

連接：
ionic3 教程（一）安裝和配置
ionic3 教程（二）登陸頁製做
ionic3 教程（三）設置頁製做
ionic3 教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網絡請求

內容已跟進到 ionic3.5.0 最新版本

運行 platform 中 iOS 和 Android 項目，會發現一行警告，Not found www/index.html。

這是由於咱們的上一次測試的頁面是根目錄中 src 的內容，須要把 src 路徑下的內容同步過來。

// iOS
$ ionic cordova build ios
// Android
$ ionic cordova build android

// 執行完畢後能夠去如下路徑檢查一下是否有html文件了

// iOS
platform/ios/www
// Android
platform/android/assets/www
複製代碼

有了內容以後，就能夠在 Xcode 和 Android Studio 上運行項目了。

這裏直咱們作一個登陸頁面，瞭解一些基本知識。

1.修改 Tabs，讓目錄結構清晰

打開 Tabs.html，修改成以下代碼：

<ion-tabs>
	<ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab>
</ion-tabs>
複製代碼

打開 Tabs.ts，修改成以下代碼：

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tabRoots: Object[];

  constructor() {
    this.tabRoots = [
      {
        root: HomePage,
        tabTitle: 'Home',
        tabIcon: 'home'
      },
      {
        root: ContactPage,
        tabTitle: 'Contact',
        tabIcon: 'notifications'
      },
      {
        root: AboutPage,
        tabTitle: 'About',
        tabIcon: 'document'
      }
    ];
  }
}
複製代碼

這樣你的目錄結構就更加清晰了，方便之後爲 Tabs 增長新的模塊

2.新建登陸頁

// cd到項目目錄，而後執行下面的代碼
$ ionic g page login
複製代碼

該命令會自動生成這幾個文件，如圖

3.打開 app.module.ts

導入新生成的 Login

import { LoginPage } from '../pages/login/login';
複製代碼

並分別在加入 declarations 和 entryComponents 後面加入 LoginPage

咱們全部新建的頁面都須要在 module 進行聲明才能使用

4.打開app.component.ts

import { LoginPage } from '../pages/login/login';
複製代碼

import 登陸文件，並修改 rootPage 爲 LoginPage

5.打開login.html文件，寫入如下代碼

<ion-header>
  <ion-navbar>
    <ion-title>登陸</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <ion-item>
      <ion-label fixed>帳號</ion-label>
      <ion-input type="text" placeholder="請輸入帳號" #username></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>密碼</ion-label>
      <ion-input type="password" placeholder="請輸入密碼" #password></ion-input>
    </ion-item>
  <ion-item no-lines>
    <label item-right>記住密碼</label>
    <ion-toggle></ion-toggle>
  </ion-item>

  <div style="text-align: center; margin-left: 30px; margin-right: 30px;">
    <button ion-button block color="danger" (click)="logIn(username, password)">
      登陸
    </button>
  </div>
</ion-content>
複製代碼

效果如圖所示，其中給 ion-item 加上 no-lines 能夠去除底部的線條。（運行方式上一節已經講過了）

界面的樣式會自動適配系統，這裏安卓的標題會自動左對齊，解決的方法是在scss文件加入

.toolbar-title-md {
  text-align: center;
}
複製代碼

再舉個例子，toggle 在安卓上會顯示：

iOS會顯示：

顏色什麼的固然能夠改，相關的能夠查閱官方文檔。

仔細體會每一行代碼，能夠試着刪掉一些元素來看看會發生什麼改變。有人私聊問過我按鈕怎麼居中啊，怎麼改變按鈕寬度，這裏直接上代碼。

6.登陸的實現

修改button的代碼爲：

<button ion-button block color="danger" (click)="logIn()">
複製代碼

並在login.ts中寫下如下代碼：

logIn() {
	alert('登陸');
}
複製代碼

瀏覽器自動 build 以後，再次點擊，就會彈出登陸的提示框。這個logIn方法沒有寫權限修飾符，默認的話是 public 的。

這裏有個問題，咱們如何傳值和驗證。這裏我給出一種簡單的解決方案。這個 (click)="logIn()" 明顯後面的括號裏是能夠傳值的。咱們修改代碼以下

login.html
分別修改兩個 input

<ion-input type="text" placeholder="請輸入帳號" #username></ion-input>
<ion-input type="password" placeholder="請輸入密碼" #password></ion-input>
複製代碼

將值傳入 button 的點擊事件

<button ion-button block color="danger" (click)="logIn(username, password)">
複製代碼

login.ts

修改logIn方法

logIn(username: HTMLInputElement, password: HTMLInputElement) {
	let userinfo: string = '用戶名：' + username.value  + '密碼：' + password.value;
	alert(userinfo);
}
複製代碼

這回你點擊時候就會輸出用戶名和密碼了。 同理，咱們能夠加上驗證

logIn(username: HTMLInputElement, password: HTMLInputElement) {
	if (username.value.length == 0) {
	    alert("請輸入帳號");
	} else if (password.value.length == 0) {
	    alert("請輸入密碼");
	} else {
	    let userinfo: string = '用戶名：' + username.value + '密碼：' + password.value;
	    alert(userinfo);
	}
}
複製代碼

最後導入頭文件，並實現跳轉

import { TabsPage } from "../tabs/tabs";
複製代碼

在登陸成功後面加入如下代碼：

this.navCtrl.push(TabsPage);
複製代碼

測試一下，輸出帳號密碼，點擊登陸便可跳轉到 Tabs 頁面。

Demo下載地址