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下载地址