連接:
ionic3 教程(一)安裝和配置
ionic3 教程(二)登陸頁製做
ionic3 教程(三)設置頁製做
ionic3 教程(四)安卓硬件返回鍵處理
ionic3 教程(五)基本的網絡請求css
內容已跟進到 ionic3.5.0 最新版本
html
運行 platform 中 iOS 和 Android 項目,會發現一行警告,Not found www/index.html。android
這是由於咱們的上一次測試的頁面是根目錄中 src 的內容,須要把 src 路徑下的內容同步過來。ios
// iOS
$ ionic cordova build ios
// Android
$ ionic cordova build android
// 執行完畢後能夠去如下路徑檢查一下是否有html文件了
// iOS
platform/ios/www
// Android
platform/android/assets/www
複製代碼
有了內容以後,就能夠在 Xcode 和 Android Studio 上運行項目了。git
這裏直咱們作一個登陸頁面,瞭解一些基本知識。github
打開 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 增長新的模塊app
// cd到項目目錄,而後執行下面的代碼
$ ionic g page login
複製代碼
該命令會自動生成這幾個文件,如圖ionic
導入新生成的 Login
import { LoginPage } from '../pages/login/login';
複製代碼
並分別在加入 declarations 和 entryComponents 後面加入 LoginPage
咱們全部新建的頁面都須要在 module 進行聲明才能使用
import { LoginPage } from '../pages/login/login';
複製代碼
import 登陸文件,並修改 rootPage 爲 LoginPage
<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 在安卓上會顯示:
顏色什麼的固然能夠改,相關的能夠查閱官方文檔。
仔細體會每一行代碼,能夠試着刪掉一些元素來看看會發生什麼改變。有人私聊問過我按鈕怎麼居中啊,怎麼改變按鈕寬度,這裏直接上代碼。
修改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下載地址