利用Angular2 + Ionic3開發(fā)IOS應(yīng)用實例教程
從 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 也有組件,叫另外一個名字:指令。在 Angular1 中,指令是 DOM 元素緊密結(jié)合的一段包含控制邏輯、數(shù)據(jù)管理的代碼。在指令中,我們可以清楚的看到 Angular1 對于 Jquery/DOM 技術(shù)的使用,以及手動對 Angular 組件進(jìn)行生命周期的管理。要知道,這些在一般的 Angular 控制器/頁面模板的開發(fā)中,是不用被關(guān)心的。
Angular2 把組件擴(kuò)大化,使這種類似于指令化的開發(fā)應(yīng)用到頁面開發(fā)中。這樣有什么好處呢?
- 增加了開發(fā)人員頁面開發(fā)的靈活性
- 使用新的文件引用技術(shù),這點我們在 Webpack 的革新中具體闡述
- css 的分離化管理
如果了解其他的開發(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ā)布等等一系列功能,一般我們依賴于第三方的程序來實現(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"
}
//更多
}
這就有一個問題了,為什么有 npm task runner,還要使用三方的 gulp 來完成此項功能呢?因為 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。為什么這么說?因為,Webpack 通過插件提供的能力,可以完成打包、擾碼、開發(fā)、調(diào)試及 css 處理等任務(wù)。這塊和 grunt/gulp 的功能重復(fù)了。事實上,也可以使用 gulp 來運(yùn)行 Webpack,但是這種設(shè)計冗余了,gulp 的存在完全沒有必要。
此外,Webpack 還有一項重要的功能,它改變了代碼之間依賴的表示方法。上面的 gulp task 中 wiredep 用來在 index.html 中注入項目中所有的 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,這個代碼是放在控制器中,顯示的是聲明依賴,這里使用了 ES6 的語法 import。相比較 wiredep 中的放在全局、使用相互引用的方式,Webpack 引用更加清晰,按需所取。這樣一來,bower 管理器也沒有必要存在了,因為 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ā)展可謂是百花齊放,但是有一項技術(shù)在業(yè)界普遍達(dá)成共識,那就是 ES6。作為新一代的 js 語法規(guī)范,不但在瀏覽器端得到了廣泛實現(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àn)在各個框架提供者都會在框架之外提供一個 CLI 工具,包括 ember-cli, vue-cli 等等,幫助生成框架的腳手架。
清單 6. 使用 Angular-cli 初始化項目
> 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 是移動端混合開發(fā)技術(shù)的代表技術(shù),基于 Angular。移動混合開發(fā)技術(shù),既使用 Web 開發(fā)技術(shù),同時可以生成 IOS 和 Android native 的代碼。通過 cordova,支持調(diào)用移動設(shè)備特有的 API,包括照相機(jī),麥克風(fēng)等等。隨著 Angular 升級到 2,ionic 也支持了 Angular2 和 TS 的語法。
Ionic-cli
Ionic 提供的 CLI 工具,類似于 Angular-cli。我們使用它初始化一個項目。如清單 7。
清單 7. 使用 Ionic-cli 初始化項目
> npm install -g ionic cordova > ionic start test tabs > cd test > ionic serve
全局導(dǎo)航方式
這里可以看到運(yùn)行 ionic start 創(chuàng)建腳手架的時候可以指定一個模板。如清單 7 中的 tabs。這里的模板分為兩種,代表了 ionic 默認(rèn)提供的兩種全局導(dǎo)航方式,tabs 和 menu。
tabs 布局提供了 app 下方的導(dǎo)航。如圖 2 的 home,about 的幾個選項;menu 布局提供了左邊的滑動菜單,點擊按鈕,會出現(xiàn)滑動選項,如圖 3。
圖 2. 底部的 tabs 布局方式

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

這里提供實現(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>
頁面布局元素
回到單個的頁面布局,ionic 提供 header 和 content 兩塊。每塊都可能包含多個元素,并且支持 grid 布局。Grid 類似于 bootstrap 前端布局的方式,它會把頁面分為 12 格,可以使用 col-x 標(biāo)明一個元素在頁面中占格的區(qū)域。這里給出一個 List 元素在 grid 布局下的應(yīng)用代碼。如清單 10,采用了兩個 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 分割頁面布局

在一個 grid 控制的區(qū)域中,可以使用嵌套頁面的方式布局元素,例如圖 4 中的 list 元素。從大體上,這里的頁面布局元素分為兩大類。
- 列式元素,包括 List/Card 等
- 多頁面元素,占據(jù)整個頁,通過點擊實現(xiàn)頁面跳轉(zhuǎn)和返回,包括 Modal/Segment/Slide 等
其他元素
當(dāng)然,還有一些頁面必須元素,例如按鈕、輸入框等用于頁面交互的元素;另外,也有提示框,腳標(biāo)等等提示元素。這塊和 Web 開發(fā)很相似。
總結(jié)
相比于 Web 開發(fā),ionic 同樣使用了 grid 的 12 列布局模式。在整體的風(fēng)格方面,受限于移動端的顯示大小,提供的頁面分割元素相對簡單。在頁面交互中,ionic 提供 List,Card,Segment 等頁面控制風(fēng)格,我們可以根據(jù)需求選擇。
真機(jī)測試
最后一段,我們來說一下真機(jī)測試。運(yùn)行添加 IOS 平臺命令來初始化 IOS 工作區(qū)。完成后,會在項目的 platforms 文件夾下有 ios 目錄,這里有生成供 Xcode 調(diào)用的代碼。如清單 11。
清單 11. Ionic 初始化 ios 和 android 平臺
> 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)的,所以我們需要配置一個臨時測試環(huán)境。
- 打開 Xcode->Preferences->Accounts->Manage Certificates,新增一個 IOS Development 的證書。
- 修改 Resources 目錄下的.plist 文件的 Bundle identifier,給自己的項目填寫一個開發(fā)組。
- 最后,在手機(jī)上打開通用->設(shè)備管理,選擇信任開發(fā)的 IOS 程序。
如圖 5,結(jié)果在真機(jī)上顯示。最后,祝大家早日學(xué)會用 ionic3/Angular2 開發(fā)出自己的移動端程序。
圖 5. 真機(jī)測試

參考資源
參考 Ionic 官方網(wǎng)站 ,了解更多 Ionic UI 組件
查看 Webpack 遷移的研究 ,了解 Webpack 的具體配置方式
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- vue單應(yīng)用在ios系統(tǒng)中實現(xiàn)微信分享功能操作
- iOS如何開發(fā)簡單的手繪應(yīng)用實例詳解
- iOS指紋識別的簡單應(yīng)用
- iOS應(yīng)用腳本重簽名的實現(xiàn)方法
- 詳解IOS微信上Vue單頁面應(yīng)用JSSDK簽名失敗解決方案
- iOS實現(xiàn)應(yīng)用內(nèi)切換語言及字體大?。7挛⑿牛?/a>
- iOS應(yīng)用內(nèi)實現(xiàn)跳轉(zhuǎn)到手機(jī)淘寶天貓的方法
- IOS應(yīng)用內(nèi)支付返回新舊Receipt適配的方法
- iOS如何優(yōu)雅地消除應(yīng)用角標(biāo)詳解
- 如何在 iOS 應(yīng)用中添加位置信息
相關(guān)文章
詳解Angular5/Angular6項目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項目如何添加熱更新(HMR)功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
AngularJS自定義插件實現(xiàn)網(wǎng)站用戶引導(dǎo)功能示例
這篇文章主要介紹了AngularJS自定義插件實現(xiàn)網(wǎng)站用戶引導(dǎo)功能,結(jié)合實例形式分析了AngularJS自定義插件的實現(xiàn)步驟與相關(guān)功能技巧,需要的朋友可以參考下2016-11-11
AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
AngularJS 是一組用于創(chuàng)建單頁Web應(yīng)用的豐富框架,給構(gòu)建豐富交互地應(yīng)用帶來了所有功能,其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié),對angularjs動畫效果相關(guān)知識感興趣的朋友一起學(xué)習(xí)2015-12-12
Angular4學(xué)習(xí)筆記之實現(xiàn)綁定和分包
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之實現(xiàn)綁定和分包,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08

