×

来扯点ionic3[2] 页面一线牵 珍惜这段缘

96
忠叔
2017.08.20 15:28* 字数 2018

往期传送门
来扯点ionic3[0] 吹完牛再入门也不迟
来扯点ionic3[1] 创建一个新页面


上一次我们完成了一个新页面的创建
可能你被乱七八糟的概念搞得心烦意乱
不过你那么聪明又那么好看
我相信你肯定花了点时间就把他们搞懂了

我们先看看手里有几个页面?

  • AboutPage
  • ContactPage
  • HomePage
  • TestPage

我们要做什么?
在HomePage上放一个页面,点击之后跳转到TestPage.

怎么做?
可谓非常简单,只需要完成三步。

1.实践:喜欢我就点我啊

1.1 开始前:复原上一节的初始状态

  • 文件:pages/tabs/tabs.ts

上一次我们为了观察新创建的TestPage,直愣愣把首屏的HomePage给替换掉了,我们先把他恢复原状:

  1. 将 tab1Root 重新指向 HomePage
  2. 删除 TestPage 的 import 语句
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 {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

直接serve运行本地服务器,一切又完好如初,画面太美不敢看。

1.2 在HomePage搞一个按钮

  • 文件: pages/home/home.html

把原来 ion-content 里的内容删除,加入这一个这样的按钮

<button ion-button>喜欢我就点我呀</button>

没错是你熟悉的那个button标签
ion-button 是一个内置指令
让按钮在视觉上呈现出与操作系统相符的效果

iOS下按钮的效果
iOS下按钮的效果
不加指令的话,额…
不加指令的话,额…

1.3 在HomePage组件中引入TestPage

  • 文件: pages/home/home.ts
  1. 引入 TestPage
  2. 在 HomePage 类中定义 testPage 属性;
  3. 在构造函数中农将 testPage 指向 TestPage,以便模板可以使用。
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {

  testPage;

  constructor(public navCtrl: NavController) {
    this.testPage=TestPage;
  }

}

1.4 页面一线牵

  • 文件:pages/home/home.html
  • 为button加上 [navPush] 指令
<button ion-button [navPush]="testPage">喜欢我就点我呀</button>

这时我们切换到浏览器,点击Home页面上的按钮,发现页面流畅地切换到了Test上去了。


2.在业务逻辑中实现跳转

刚才,我们通过了 [navPush] 指令,让模板中的按钮“超链接”到了一个新页面。但是在更复杂的场景中,这样简单的链接可能不能符合我们的需求。比如我们需要在用户点击按钮时,进行一些业务处理,再跳转到下一个页面,这时候就可以利用NavController中的push方法来实现,同样也只有三步:

2.1 引入 NavController

ionic把app的众多交互封装成了若干个controller,其中NavController就是用来管理和导航页面的一个controller。由于几乎每一个页面都会用到NavController,我们发现在HomePage中已经有了引入语句了。

import { NavController } from 'ionic-angular';

此外,类的构造函数定义了一个NavController类型的参数,以告诉angular在创建页面时,需要传入(注入)一个NavController的实例.

constructor(public navCtrl: NavController){
}

2.2 使用push方法来进行跳转

在类中编写一个方法,我们就叫它pushTestPage吧,调用navCtrl对象的push方法,将页面导航到TestPage上

pushTestPage(){
    this.navCtrl.push(TestPage);
  }

此时文件 home.ts 的完整代码

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { TestPage } from '../test/test';

@Component({
    selector: 'page-home',
  templateUrl: './home.html'
})
export class HomePage {
  
  constructor(public navCtrl: NavController) {
  }

  pushTestPage(){
    this.navCtrl.push(TestPage);
  }

}

2.3 将方法绑定到按钮点击事件

在home.html中,为button元素绑定click事件

<button ion-button (click)="pushTestPage()">喜欢我就点我呀</button>

为什么不是 onclick="pushTestPage()" 因为 pushTestPage 不是一个全局函数,它是 TestPage 组件中的一个方法,经过封装之后早已对外不可见,不过可以通过使用(click) 指令来直接调用组件内的方法。

这样我们就可以在pushTestPage里添加更加复杂的业务逻辑,以满足我们的需求。

3.将参数传递给下一个页面

有时我们完成了一个页面上的业务之后,要把相关的数据传给下一个页面处理,这时候就需要向被push的页面传入相关的参数。NavController的push方法的第二个参数接收一个对象。

3.1 为push函数添加第二个参数

假设我们要为TestPage传入一个标题,用来显示到页面上,我们为push方法传入一个对象。

 pushTestPage(){
    this.navCtrl.push(TestPage,{
        title:'没有人可以比我帅'
    });
  }

3.2 引入NavParam并使用

利用NavParams的get方法,可以将传进来的页面参数读取出来。
切换到 test.ts,完成三个步骤
1.引入NavParams并,并在构造函数添加注入语句
2.为TestPage类添加title属性,读取参数并赋给title
3.将title输出到模板中

  • 文件 test.ts
import { Component } from '@angular/core'

import { NavParams } from 'ionic-angular' //step1

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string; //step2

    constructor(public params:NavParams){ //step1
        this.title=this.params.get('title'); //step2
    }
}
  • 文件 test.html
    如果很多场景的模板引擎,在模板中利用双花括号 {{ }} 将组件的属性输出到界面上。
<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <!--[step3]-->
  <h1>{{title}}</h1>
</ion-content>

4. 老司机必会:手动返回

如同进入页面,我们在退出页面的时候,除了用户点击返回按钮外,也有可能在完成了业务之后,自动返回上一个页面,这时候可以使用NavController的pop方法来实现。

  • 文件 test.ts
import { Component } from '@angular/core'

//注意这里
import { NavController, NavParams } from 'ionic-angular'

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string;

    //注意这里
    constructor(public navCtrl:NavController,public params:NavParams){
        this.title=this.params.get('title');
    }

    //新方法
    popPage(){
        this.navCtrl.pop();
    }
}
  • 文件 test.html
    在模板中添加返回按钮
<ion-header>
  <ion-navbar>
    <ion-title>
      Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <h1>{{title}}</h1>
  <button ion-button (click)="popPage()">返回</button>
</ion-content>

5. 扩展内容:ionic的页面机制

过往我们在网页上进行页面之间的链接,是通过<a>标签来实现的。而我们现在制作的 web APP,虽然使用了前端技术,但页面的概念跟之前却所有不同。

ionic APP在编译过后,实际上只有一个index.html网页,它是一个单页面应用。你所看到的页面之间的切换,实际上都是利用 js 来替换界面上的元素,并不是传统意义上的网页之间的跳转。因为传统的网页跳转,是需要向服务器发送请求并下载资源的,即便再快的网速都会有一定的响应时间。这在浏览器上非常正常,但如果是在手机APP上,这样的响应时间会严重影响操作的流畅性。而单页面已经加载了基础的资源,在操作过程中,只需要替换部分的内容,请求部分的资源,配合一些交互设计,让操作没有卡顿感。所以在移动web盛行的今天,单页面应用也是一种大势所趋。

ionic APP中的页面实质上是一个栈的结构(实际上多数原生应用也是这样的),但从当前页面上引入一个新页面时,浏览器(或操作系统)会加载新页面的资源,然后把它添加到栈顶。在界面上的表现就是,新页面“遮住了”原有的页面,下层页面的内容和资源依旧在内存中。


而上层页面被pop掉的时候,上层页面弹出栈,相应的内存被释放(在图中栈顶由C变成了B),在视觉表现上就是上面的页面被“移开”了,下层的页面“暴露了出来”。


所以APP中的页面是有层级关系的,用户在首页一层一层地进入了新页面(A->B->C),回到首页时就得一层一层退出来(C->B->A),所以我们在设计页面的时候,脑海中有明确这样的层级关系,如果栈的层次过多了(超过了5层),就会给用户体验带来困扰。

最后提一下TabsPage,TabsPage可以被理解层一个特殊的页面,这个页面中又包含了若干个页面栈(Tab),每个页面栈相互独立,通过Tab按钮来相互切换。一个页面栈中的push和pop不会影响到其它栈的表现,也就是当你在不同的tab中切换时,看到的响应的栈顶页面。


下一章:来扯点ionic3[3] 页面的生命周期事件,也就是凡间所说的钩子

来扯点ionic
Web note ad 1