使用 Angular2 和 Ionic3 开发 iOS 应用（2）Ionic3 开发

look_w

Ionic3 开发ionic 是移动端混合开发技术的代表技术，基于 Angular。移动混合开发技术，既使用 Web 开发技术，同时可以生成 iOS 和 Android                native 的代码。通过 cordova，支持调用移动设备特有的 API，包括照相机，麦克风等等。随着 Angular 升级到 2，ionic                也支持了 Angular2 和 TS 的语法。
Ionic-cliIonic 提供的 CLI 工具，类似于 Angular-cli。我们使用它初始化一个项目。如清单 7。
清单 7. 使用                Ionic-cli 初始化项目

1 2 3 4

> npm install -g ionic cordova > ionic start test tabs > cd test > ionic serve

全局导航方式这里可以看到运行 ionic start 创建脚手架的时候可以指定一个模板。如清单 7 中的 tabs。这里的模板分为两种，代表了 ionic                默认提供的两种全局导航方式，tabs 和 menu。
tabs 布局提供了 app 下方的导航。如图 2 的 home，about 的几个选项；menu                布局提供了左边的滑动菜单，点击按钮，会出现滑动选项，如图 3。
图 2. 底部的 tabs                    布局方式图 3. 侧边栏的 menu                    布局方式这里提供实现 menu 逻辑布局的代码，如清单 8，需要在控制器中注入 MenuController。
清单 8. Menu                布局的控制器逻辑样例

1 2 3 4 5 6 7 8 9 10 11

import { Component } from '@angular/core'; import {MenuController, NavController} from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, menu: MenuController) { menu.enable(true); } }

清单 9. Menu                布局的前端显示样例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<ion-header> <ion-navbar> <button ion-button menuToggle icon-only> <ion-icon name='menu'></ion-icon> </button> <ion-title> Menus </ion-title> </ion-navbar> </ion-header> <ion-content padding> <button ion-button block menuToggle>Toggle Menu</button> </ion-content> <ion-menu [content]="content"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <button ion-item (click)="openPage(homePage)"> Home </button> <button ion-item (click)="openPage(friendsPage)"> Friends </button> <button ion-item (click)="openPage(eventsPage)"> Events </button> <button ion-item (click)="closeMenu()"> Close Menu </button> </ion-list> </ion-content> </ion-menu> <ion-nav id="nav" #content></ion-nav>

页面布局元素回到单个的页面布局，ionic 提供 header 和 content 两块。每块都可能包含多个元素，并且支持 grid 布局。Grid 类似于                bootstrap 前端布局的方式，它会把页面分为 12 格，可以使用 col-x 标明一个元素在页面中占格的区域。这里给出一个 List 元素在                grid 布局下的应用代码。如清单 10，采用了两个 col-6 把页面分为两列，它生成的样式如图 4。
清单                10. List 元素在 grid 布局下的样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<ion-header> <ion-navbar> <ion-title> About </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-grid> <ion-row> <ion-col col-6> <ion-list> <ion-list-header> Section I </ion-list-header> <ion-item>Terminator I</ion-item> <ion-item>Blade Runner</ion-item> <ion-item> <button ion-button color="danger" outline>Choose</button> </ion-item> </ion-list> </ion-col> <ion-col col-6> <ion-list> <ion-list-header> Section II </ion-list-header> <ion-item>Terminator II</ion-item> <ion-item>Blade Runner</ion-item> <ion-item> <button ion-button color="secondary"     outline>Choose</button> </ion-item> </ion-list> </ion-col> </ion-row> </ion-grid> </ion-content>

图 4. 使用 grid                    分割页面布局在一个 grid 控制的区域中，可以使用嵌套页面的方式布局元素，例如图 4 中的 list 元素。从大体上，这里的页面布局元素分为两大类。

• 列式元素，包括 List/Card 等
• 多页面元素，占据整个页，通过点击实现页面跳转和返回，包括 Modal/Segment/Slide 等

其他元素当然，还有一些页面必须元素，例如按钮、输入框等用于页面交互的元素；另外，也有提示框，脚标等等提示元素。这块和 Web 开发很相似。
总结相比于 Web 开发，ionic 同样使用了 grid 的 12                列布局模式。在整体的风格方面，受限于移动端的显示大小，提供的页面分割元素相对简单。在页面交互中，ionic 提供 List，Card，Segment                等页面控制风格，我们可以根据需求选择。