鏈接：
ionic3 教程（一）安裝和配置
ionic3 教程（二）登錄頁制作
ionic3 教程（三）設(shè)置頁制作
ionic3 教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網(wǎng)絡(luò)請求
運行 platform 中 iOS 和 Android 項目，會發(fā)現(xiàn)一行警告，Not found www/index.html。
這是因為我們的上一次測試的頁面是根目錄中 src 的內(nèi)容，需要把 src 路徑下的內(nèi)容同步過來。
// iOS
$ ionic cordova build ios
// Android
$ ionic cordova build android
// 執(zhí)行完畢后可以去以下路徑檢查一下是否有html文件了
// iOS
platform/ios/www
// Android
platform/android/assets/www
有了內(nèi)容之后，就可以在 Xcode 和 Android Studio 上運行項目了。
這里直我們做一個登錄頁面，了解一些基本知識。
1.修改 Tabs，讓目錄結(jié)構(gòu)清晰
打開 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'
}
];
}
}
這樣你的目錄結(jié)構(gòu)就更加清晰了，方便以后為 Tabs 增加新的模塊
2.新建登錄頁
// cd到項目目錄，然后執(zhí)行下面的代碼
$ ionic g page login
該命令會自動生成這幾個文件，如圖
3.打開 app.module.ts
導(dǎo)入新生成的 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 可以去除底部的線條。（運行方式上一節(jié)已經(jīng)講過了）
界面的樣式會自動適配系統(tǒng)，這里安卓的標題會自動左對齊，解決的方法是在scss文件加入
.toolbar-title-md {
text-align: center;
}
再舉個例子，toggle 在安卓上會顯示：
iOS會顯示：
顏色什么的當然可以改，相關(guān)的可以查閱官方文檔。
仔細體會每一行代碼，可以試著刪掉一些元素來看看會發(fā)生什么改變。有人私聊問過我按鈕怎么居中啊，怎么改變按鈕寬度，這里直接上代碼。
6.登錄的實現(xiàn)
修改button的代碼為：
<button ion-button block color="danger" (click)="logIn()">
并在login.ts中寫下以下代碼：
logIn() {
alert('登錄');
}
瀏覽器自動 build 之后，再次點擊，就會彈出登錄的提示框。這個logIn方法沒有寫權(quán)限修飾符，默認的話是 public 的。
這里有個問題，我們?nèi)绾蝹髦岛万炞C。這里我給出一種簡單的解決方案。這個 (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);
}
}
最后導(dǎo)入頭文件，并實現(xiàn)跳轉(zhuǎn)
import { TabsPage } from "../tabs/tabs";
在登錄成功后面加入以下代碼：
this.navCtrl.push(TabsPage);
測試一下，輸出賬號密碼，點擊登錄即可跳轉(zhuǎn)到 Tabs 頁面。
Demo下載地址
