利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實(shí)例教程

從 Angular1 到 Angular2

Angular2 作為著名前端 MVVM 架構(gòu) Angular1 的繼承者，從一定程度上說，引領(lǐng)了新一代 Web 前端開發(fā)技術(shù)的革新。從最新版的 ember.js, react.js, vue.js 中，可以看到這幾種技術(shù)相互借鑒，取長補(bǔ)短，最終向一種技術(shù)方向演進(jìn)。

組件化技術(shù)的崛起

Angular1 也有組件，叫另外一個(gè)名字：指令。在 Angular1 中，指令是 DOM 元素緊密結(jié)合的一段包含控制邏輯、數(shù)據(jù)管理的代碼。在指令中，我們可以清楚的看到 Angular1 對于 Jquery/DOM 技術(shù)的使用，以及手動(dòng)對 Angular 組件進(jìn)行生命周期的管理。要知道，這些在一般的 Angular 控制器/頁面模板的開發(fā)中，是不用被關(guān)心的。

Angular2 把組件擴(kuò)大化，使這種類似于指令化的開發(fā)應(yīng)用到頁面開發(fā)中。這樣有什么好處呢？

如果了解其他的開發(fā)技術(shù)，可以發(fā)現(xiàn)組件化漸漸的統(tǒng)治了前端開發(fā)領(lǐng)域。從 ember.js，vue.js，到 React.js，組件化技術(shù)都被廣泛應(yīng)用。

從 grunt/gulp 到 Webpack 的技術(shù)革新

Task runner, 從最早的 grunt，到 gulp，是服務(wù)于應(yīng)用程序的一些控制程序。有幫助開發(fā)人員進(jìn)行開發(fā)、運(yùn)行單元集成測試、幫助產(chǎn)品發(fā)布等等一系列功能，一般我們依賴于第三方的程序來實(shí)現(xiàn)，例如 gulp。但是 npm 本身就有 task runner 的功能，如清單 1，scripts 中包含了可以運(yùn)行的 ionic 任務(wù)。使用類似 npm run clean 就可以運(yùn)行任務(wù)，不需要其他依賴。

清單 1. Npm 配置提供 task runner 功能

{
 //package.json
 "name": "iamsaying",
 "version": "0.0.1",
 "author": "Ionic Framework",
 "homepage": "http://ionicframework.com/",
 "private": true, 
 "scripts": {// 可運(yùn)行的任務(wù)
 "clean": "ionic-app-scripts clean",
 "build": "ionic-app-scripts build",
 "lint": "ionic-app-scripts lint",
 "ionic:build": "ionic-app-scripts build",
 "ionic:serve": "ionic-app-scripts serve"
 }
 //更多
 }

這就有一個(gè)問題了，為什么有 npm task runner，還要使用三方的 gulp 來完成此項(xiàng)功能呢？因?yàn)?npm task runner 太簡單了，從字面上看，只是一條 shell 命令。但是 gulp 能做什么呢？如清單 2 是一段用 gulp 向 index.html 中注入相應(yīng)的 bower_components 的任務(wù)。可以看出，gulp 任務(wù)復(fù)雜，需要寫代碼。

清單 2. Gulp 配置注入 index.html 相關(guān)的 js 文件

//gulpfile.babel.js
 gulp.task('bower', function () {
 return gulp.src(paths.views.main)
 .pipe(wiredep({
 directory: yeoman.app + '/bower_components'
 }))
 .pipe(gulp.dest(yeoman.app));
 });

Webpack 代替了 grunt/gulp。為什么這么說？因?yàn)椋琖ebpack 通過插件提供的能力，可以完成打包、擾碼、開發(fā)、調(diào)試及 css 處理等任務(wù)。這塊和 grunt/gulp 的功能重復(fù)了。事實(shí)上，也可以使用 gulp 來運(yùn)行 Webpack，但是這種設(shè)計(jì)冗余了，gulp 的存在完全沒有必要。

此外，Webpack 還有一項(xiàng)重要的功能，它改變了代碼之間依賴的表示方法。上面的 gulp task 中 wiredep 用來在 index.html 中注入項(xiàng)目中所有的 bower 依賴，如清單 3。可以看出，通過瀏覽器的支持，js 之間可以相互引用，相互依賴。

清單 3. Wiredep 注入引用的 js 文件

<!-- build:js(.) scripts/vendor.js -->
 <!-- bower:js -->
 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script
 src="bower_components/jquery-ui/jquery-ui.js"></script>
 <script src="bower_components/angular/angular.js"></script>
 <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
 <!-- endbower -->
 <!-- endbuild -->
 <!-- build:js(app) scripts/scripts.js -->
 <!-- 3rd party packages should lay before scripts in projects-->
 <script src="build-scripts/app.js"></script>
 <script src="build-scripts/controllers/main.js"></script>
 <script
 src="build-scripts/controllers/task/management.js"></script>
 <script
 src="build-scripts/controllers/label/management.js"></script>
 <script
 src="build-scripts/controllers/system/management.js"></script>
 <!-- endbuild -->

Webpack 是怎么做的呢？如清單 4，這個(gè)代碼是放在控制器中，顯示的是聲明依賴，這里使用了 ES6 的語法 import。相比較 wiredep 中的放在全局、使用相互引用的方式，Webpack 引用更加清晰，按需所取。這樣一來，bower 管理器也沒有必要存在了，因?yàn)?bower 作為服務(wù)于瀏覽器的包管理器，使用方式類似于 wiredep 這種互相引用方式，但是這種互相引用的方式在 Webpack 的聲明依賴的模式中，并不適用。

清單 4. Angular2 中的 JS 相互引用

import { AboutPage } from '../pages/about/about';
 import { ContactPage } from '../pages/contact/contact';
 import { HomePage } from '../pages/home/home';
 import { TabsPage } from '../pages/tabs/tabs';

所以，最后架構(gòu)變成了什么樣子？ 從 npm 管理后端、控制程序依賴、bower 管理前端 JS 依賴的架構(gòu)演化成 npm 來管理所有依賴、Webpack 完成打包、測試功能的架構(gòu)。如圖 1。

圖 1. 從 Angular1 到 Angular2 的技術(shù)演進(jìn)

ES6 成為規(guī)范

js 框架的發(fā)展可謂是百花齊放，但是有一項(xiàng)技術(shù)在業(yè)界普遍達(dá)成共識，那就是 ES6。作為新一代的 js 語法規(guī)范，不但在瀏覽器端得到了廣泛實(shí)現(xiàn)，而且應(yīng)用于 Node 引擎端。

ES 對 JS 語言進(jìn)行了擴(kuò)充，使之更像是一門規(guī)范的面向?qū)ο笳Z言。而 TS（typescript）在此基礎(chǔ)之上，增加了類型定義及其檢查的功能。例如清單 5 的 ionic 初始化程序段，用到了 Platform, StatusBar 的自定義數(shù)據(jù)類型。

清單 5. Typescript 使用強(qiáng)類型聲明變量

export class MyApp {
 rootPage:any = TabsPage;
 constructor(platform: Platform, statusBar: StatusBar, splashScreen:
 SplashScreen) {
 platform.ready().then(() => {
 // Okay, so the platform is ready and our plugins are available.
 // Here you can do any higher level native things you might need.
 statusBar.styleDefault();
 splashScreen.hide();
 });
 }
 }

Angular-cli

最后要說一下 Angular-cli 項(xiàng)目，現(xiàn)在各個(gè)框架提供者都會(huì)在框架之外提供一個(gè) CLI 工具，包括 ember-cli, vue-cli 等等，幫助生成框架的腳手架。

清單 6. 使用 Angular-cli 初始化項(xiàng)目

> npm install -g @angular/cli
 > ng new project
 > cd project
 > ng serve

總結(jié)

現(xiàn)在的 Web 開發(fā)技術(shù)，大多使用了組件化的模塊組織結(jié)構(gòu)，采用 npm/Webpack 等工具統(tǒng)一管理模塊依賴。

Ionic3 開發(fā)

ionic 是移動(dòng)端混合開發(fā)技術(shù)的代表技術(shù)，基于 Angular。移動(dòng)混合開發(fā)技術(shù)，既使用 Web 開發(fā)技術(shù)，同時(shí)可以生成 IOS 和 Android native 的代碼。通過 cordova，支持調(diào)用移動(dòng)設(shè)備特有的 API，包括照相機(jī)，麥克風(fēng)等等。隨著 Angular 升級到 2，ionic 也支持了 Angular2 和 TS 的語法。

Ionic-cli

Ionic 提供的 CLI 工具，類似于 Angular-cli。我們使用它初始化一個(gè)項(xiàng)目。如清單 7。

清單 7. 使用 Ionic-cli 初始化項(xiàng)目

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

全局導(dǎo)航方式

這里可以看到運(yùn)行 ionic start 創(chuàng)建腳手架的時(shí)候可以指定一個(gè)模板。如清單 7 中的 tabs。這里的模板分為兩種，代表了 ionic 默認(rèn)提供的兩種全局導(dǎo)航方式，tabs 和 menu。

tabs 布局提供了 app 下方的導(dǎo)航。如圖 2 的 home，about 的幾個(gè)選項(xiàng)；menu 布局提供了左邊的滑動(dòng)菜單，點(diǎn)擊按鈕，會(huì)出現(xiàn)滑動(dòng)選項(xiàng)，如圖 3。

圖 2. 底部的 tabs 布局方式

圖 3. 側(cè)邊欄的 menu 布局方式

這里提供實(shí)現(xiàn) menu 邏輯布局的代碼，如清單 8，需要在控制器中注入 MenuController。

清單 8. Menu 布局的控制器邏輯樣例

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 布局的前端顯示樣例

<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>

頁面布局元素

回到單個(gè)的頁面布局，ionic 提供 header 和 content 兩塊。每塊都可能包含多個(gè)元素，并且支持 grid 布局。Grid 類似于 bootstrap 前端布局的方式，它會(huì)把頁面分為 12 格，可以使用 col-x 標(biāo)明一個(gè)元素在頁面中占格的區(qū)域。這里給出一個(gè) List 元素在 grid 布局下的應(yīng)用代碼。如清單 10，采用了兩個(gè) col-6 把頁面分為兩列，它生成的樣式如圖 4。

清單 10. List 元素在 grid 布局下的樣例代碼

<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 分割頁面布局

在一個(gè) grid 控制的區(qū)域中，可以使用嵌套頁面的方式布局元素，例如圖 4 中的 list 元素。從大體上，這里的頁面布局元素分為兩大類。

其他元素

當(dāng)然，還有一些頁面必須元素，例如按鈕、輸入框等用于頁面交互的元素；另外，也有提示框，腳標(biāo)等等提示元素。這塊和 Web 開發(fā)很相似。

總結(jié)

相比于 Web 開發(fā)，ionic 同樣使用了 grid 的 12 列布局模式。在整體的風(fēng)格方面，受限于移動(dòng)端的顯示大小，提供的頁面分割元素相對簡單。在頁面交互中，ionic 提供 List，Card，Segment 等頁面控制風(fēng)格，我們可以根據(jù)需求選擇。

真機(jī)測試

最后一段，我們來說一下真機(jī)測試。運(yùn)行添加 IOS 平臺(tái)命令來初始化 IOS 工作區(qū)。完成后，會(huì)在項(xiàng)目的 platforms 文件夾下有 ios 目錄，這里有生成供 Xcode 調(diào)用的代碼。如清單 11。

清單 11. Ionic 初始化 ios 和 android 平臺(tái)

> ionic cordova platform add ios
 > ionic cordova platform add android

使用 xcode 打開 plaforms/ios/test.xcworkspace 工作區(qū)。在設(shè)備里面，可以選擇模擬器例如 iphone6，iphone7，也可以選擇連接到 Mac 的真機(jī)。由于 IOS 開發(fā)是要收費(fèi)的，所以我們需要配置一個(gè)臨時(shí)測試環(huán)境。

如圖 5，結(jié)果在真機(jī)上顯示。最后，祝大家早日學(xué)會(huì)用 ionic3/Angular2 開發(fā)出自己的移動(dòng)端程序。

圖 5. 真機(jī)測試

參考資源

參考 Ionic 官方網(wǎng)站 ，了解更多 Ionic UI 組件

查看 Webpack 遷移的研究 ，了解 Webpack 的具體配置方式

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com