基于Ionic框架的混合應(yīng)用開(kāi)發(fā)技術(shù)探究與實(shí)現(xiàn)

童茂林

摘 要：Ionic作為一個(gè)基于主流技術(shù)HTML5和AngularJS的快速應(yīng)用開(kāi)發(fā)工具，不僅技術(shù)先進(jìn)而且開(kāi)源免費(fèi)，獲得了業(yè)內(nèi)的廣泛認(rèn)可。但是，由于Ionic的技術(shù)領(lǐng)先且更新太快，國(guó)內(nèi)的初學(xué)者很難找到相關(guān)的中文資料。文章從Ionic的框架到開(kāi)發(fā)過(guò)程，結(jié)合Cordova插件調(diào)用原生接口的實(shí)例，比較系統(tǒng)地簡(jiǎn)述了Ionic框架的使用方法。

關(guān)鍵詞：Ionic框架；混合應(yīng)用開(kāi)發(fā)；跨平臺(tái)

借助政府推動(dòng)的“大眾創(chuàng)新，萬(wàn)眾創(chuàng)業(yè)”熱潮，企業(yè)和個(gè)人紛紛利用互聯(lián)網(wǎng)的優(yōu)勢(shì)來(lái)改造傳統(tǒng)的行業(yè)，開(kāi)發(fā)出了大量的移動(dòng)應(yīng)用[1]。但是，現(xiàn)在市場(chǎng)上智能手機(jī)的操作系統(tǒng)種類繁多，并且操作系統(tǒng)之間的不同導(dǎo)致了APP應(yīng)用文件也是不兼容的，例如蘋(píng)果和谷歌推出的IOS和Android移動(dòng)操作系統(tǒng)，都各自有指定的技術(shù)開(kāi)發(fā)平臺(tái)和官方推薦的開(kāi)發(fā)語(yǔ)言。分別在各個(gè)系統(tǒng)上開(kāi)發(fā)應(yīng)用無(wú)疑會(huì)大大增加開(kāi)發(fā)商的成本，為了解決這一問(wèn)題，人們提出了混合應(yīng)用開(kāi)發(fā)。

混合應(yīng)用開(kāi)發(fā)是指基本經(jīng)過(guò)一次開(kāi)發(fā)，然后通過(guò)打包工具適配輸出可以在多個(gè)移動(dòng)操作系統(tǒng)流暢運(yùn)行并能調(diào)用豐富的硬件設(shè)備功能的開(kāi)發(fā)框架。為了實(shí)現(xiàn)各系統(tǒng)間的兼容，一般采用HTML5/CSS/JavaScript為主力開(kāi)發(fā)語(yǔ)言，利用移動(dòng)操作系統(tǒng)對(duì)Web技術(shù)的支持來(lái)執(zhí)行代碼邏輯，使用開(kāi)發(fā)環(huán)境提供的工具生成適合各操作系統(tǒng)平臺(tái)的安裝文件。

2015年5月12日Ionic正式發(fā)布并被認(rèn)為是當(dāng)前最成熟且有潛力的一款混合應(yīng)用開(kāi)發(fā)框架。它提供了很多實(shí)用且美觀的用戶界面（User Interface，UI）組件來(lái)幫助開(kāi)發(fā)者快速開(kāi)發(fā)強(qiáng)大的APP移動(dòng)應(yīng)用[2]。目前據(jù)Ionic網(wǎng)站的官方統(tǒng)計(jì)，已有超過(guò)140萬(wàn)的APP應(yīng)用是用Ionic框架開(kāi)發(fā)的。

其具有以下的優(yōu)勢(shì)：（1）相對(duì)的性能優(yōu)勢(shì)。混合應(yīng)用的運(yùn)行速度一直沒(méi)有原生開(kāi)發(fā)的程序運(yùn)行流暢，所以運(yùn)行速度一直都是評(píng)估混合應(yīng)用開(kāi)發(fā)框架優(yōu)劣的重要標(biāo)準(zhǔn)。而Ionic編寫(xiě)的應(yīng)用在移動(dòng)設(shè)備中運(yùn)行流暢，表現(xiàn)卓越。（2）適合團(tuán)隊(duì)協(xié)作。Ionic已經(jīng)成為MVVM（Model-View-View Model，MVVM）前端框架AnjularJS的移動(dòng)端標(biāo)準(zhǔn)解決方案。所以Ionic不僅適合個(gè)人快速開(kāi)發(fā)，也適合團(tuán)隊(duì)協(xié)作開(kāi)發(fā)。（3）完整的社區(qū)生態(tài)。Ionic開(kāi)發(fā)運(yùn)營(yíng)團(tuán)隊(duì)提供了官方的網(wǎng)站http：//Ionic.io/discover可供讀者學(xué)習(xí)。對(duì)于有bug尚未解決的部分，官方文檔網(wǎng)站上都會(huì)及時(shí)提醒開(kāi)發(fā)者避開(kāi)雷區(qū)。

1 Ionic框架

1.1 Ionic組成

Ionic組成如圖1所示，可以看到Ionic可以分為黑色和白色兩個(gè)部分。大體上白色為底層部分，黑色為表現(xiàn)層。其中Cordova提供的是底層的硬件設(shè)備功能庫(kù)和APP的打包功能，需要用到各個(gè)系統(tǒng)的軟件開(kāi)發(fā)工具包（Software Development Kit，SDK），例如Android SDK和IOS SDK。而Ionic JavaScript和Ionic CSS的主要職責(zé)是提供UI層功能。

為了便于團(tuán)隊(duì)間合作開(kāi)發(fā)大型的項(xiàng)目，Ionic又集成了Angular UI Router和AngularJS。最后為了提供給開(kāi)發(fā)者一站式開(kāi)發(fā)平臺(tái)，Ionic又集成了Cordova的構(gòu)建打包功能，使開(kāi)發(fā)者最終可以直接用Ionic CLI來(lái)調(diào)用Cordova的創(chuàng)建、編譯、打包等功能。

1.2 Ionic開(kāi)發(fā)概述

使用Ionic開(kāi)發(fā)移動(dòng)端應(yīng)用基本可以分為4個(gè)部分：用戶操作的界面、邏輯控制、調(diào)用系統(tǒng)原生接口和調(diào)試。

用戶操作的界面以超文本標(biāo)記語(yǔ)言（HyperText Markup Language，HTML）和層疊樣式表（Cascading Style Sheets，CSS）開(kāi)發(fā)為主，然后混合使用Ionic官網(wǎng)上自帶的UI框架和UI組件，更加方便的是使用第三方網(wǎng)站上用戶上傳的豐富的自定義UI框架。主要功能是實(shí)現(xiàn)移動(dòng)客戶端所有的界面。

邏輯控制是基于AngularJS框架，采用傳統(tǒng)Javascript實(shí)現(xiàn)具體的代碼編寫(xiě)，實(shí)現(xiàn)了控制、視圖和數(shù)據(jù)的分離，使代碼更加明朗，易于閱讀和修改。主要功能是控制界面的一些行為，如修改數(shù)據(jù)或者點(diǎn)擊按鈕后的反應(yīng)等。

調(diào)用系統(tǒng)原生接口則是采用Cordova的插件和應(yīng)用程序編程接口（Application Programming Interface，API）接口，但是官網(wǎng)上的接口遠(yuǎn)遠(yuǎn)不能滿足大多數(shù)用戶的要求，更多的是需要使用用戶的自定義接口，怎么使用自定義接口會(huì)在下文中介紹。主要功能是實(shí)現(xiàn)一些硬件接口的調(diào)用，如移動(dòng)客戶端的相機(jī)、指南針和GPS等。

最后的調(diào)試階段一共有3種調(diào)試方式：在瀏覽器上調(diào)試、在移動(dòng)設(shè)備上調(diào)試、使用瀏覽器連接設(shè)備調(diào)試，其中直接在瀏覽器上調(diào)試最為方便。

2 Ionic開(kāi)發(fā)實(shí)現(xiàn)過(guò)程

2.1 Ionic開(kāi)發(fā)環(huán)境

根據(jù)上一章節(jié)介紹，Ionic依賴于Cordova框架，此外還需要適配IOS和Android等操作系統(tǒng)平臺(tái)，因此在能夠使用Ionic開(kāi)發(fā)APP之前，需要檢查是否完整地搭建好了開(kāi)發(fā)環(huán)境。

需要安裝的內(nèi)容以及版本如圖2所示。

如果是開(kāi)發(fā)Android的APP，還需要安裝JDK和一些常用的Android SDK；如果是IOS平臺(tái)的APP，也需要安裝相應(yīng)的開(kāi)發(fā)環(huán)境和SDK。如果這些都安裝完成，就可以進(jìn)行項(xiàng)目的開(kāi)發(fā)了。

由于Ionic是開(kāi)源項(xiàng)目，官方?jīng)]有提供專用的集成開(kāi)發(fā)環(huán)境（Integrated Development Environment，IDE）供開(kāi)發(fā)者使用，網(wǎng)上一些流行的開(kāi)發(fā)工具如Sublime Text3和WebStorm等都很好用，其中Sublime Text3免費(fèi)用戶更多，但是WebStorm穩(wěn)定且界面美觀，本文使用的是WebStorm進(jìn)行開(kāi)發(fā)。

2.2 創(chuàng)建項(xiàng)目

Ionic官網(wǎng)提供了blank，sidemenu和tabs 3種模版，本文以sidemenu模版為例，創(chuàng)建一個(gè)項(xiàng)目名為“testApp”的應(yīng)用，在命令行中輸入：

$ Ionic start testApp sidemenu

執(zhí)行該條命令后，會(huì)從Ionic的官網(wǎng)上下載sidemenu模版的代碼到本機(jī)上，可以在創(chuàng)建該項(xiàng)目的位置找到模版的代碼。但是這些代碼只能在瀏覽器上運(yùn)行，如果需要在手機(jī)上運(yùn)行，還需要添加相應(yīng)的平臺(tái)。

以Android系統(tǒng)為例，讓該模版運(yùn)行在Android設(shè)備上，首先需要進(jìn)入項(xiàng)目文件夾，然后添加平臺(tái)[3]：

$ Ionic platform add Android

最后在手機(jī)上運(yùn)行：

$ Ionic run Android

2.3 Ionic項(xiàng)目目錄結(jié)構(gòu)簡(jiǎn)介

創(chuàng)建一個(gè)項(xiàng)目名為“testApp”的項(xiàng)目，目錄結(jié)構(gòu)如圖3所示，下面將介紹重要的目錄與配置文件，了解這些對(duì)于未來(lái)的問(wèn)題定位與應(yīng)用定制是有助益的。

2.3.1 platforms文件夾

因?yàn)镮onic支持跨平臺(tái)運(yùn)行，所以該文件夾下存放的是運(yùn)行在各個(gè)平臺(tái)下的代碼，這些代碼經(jīng)過(guò)打包后可以直接在設(shè)備上運(yùn)行。需要注意的是，Ionic的代碼有兩種運(yùn)行方式，一種是在命令行下運(yùn)行整個(gè)Ionic項(xiàng)目，另一種是取出platforms下的代碼打包運(yùn)行，但是在platforms下修改了代碼后，用Ionic命令行運(yùn)行是未修改狀態(tài)，所以一般不會(huì)去修改platforms下面的代碼。

2.3.2 plugins文件夾

存儲(chǔ)插件的文件夾，這里的插件既可以存放Cordova的插件也可以存放開(kāi)發(fā)者自己開(kāi)發(fā)的插件，如何使用將在后文介紹。

2.3.3 res和resources文件夾

res文件夾存放Web端的一些圖片和音頻資源，resources文件夾下存放的是各個(gè)平臺(tái)的圖片和音頻資源。

2.3.4 www文件夾

該文件夾存放著Web端的代碼，index.html是程序的入口，Web端的開(kāi)發(fā)工作也在該文件夾下進(jìn)行。

2.4 項(xiàng)目調(diào)試

Ionic有兩種調(diào)試的方法，分別是在瀏覽器上調(diào)試和在手機(jī)設(shè)備上調(diào)試。

2.4.1 瀏覽器上調(diào)試

是Ionic專門(mén)提供的調(diào)試方法，非常方便，但是缺點(diǎn)是外部的Cordova接口有時(shí)候會(huì)顯示不出來(lái)，比如手機(jī)設(shè)備上的照相機(jī)接口等。進(jìn)入項(xiàng)目所在文件夾，執(zhí)行以下命令就可以實(shí)現(xiàn)瀏覽器上調(diào)試：

$ Ionic serve

以上面創(chuàng)建的testApp項(xiàng)目為例，執(zhí)行命令后的效果如圖4所示。

執(zhí)行完畢后，當(dāng)修改www文件夾下面的代碼時(shí)，瀏覽器也會(huì)隨時(shí)更新，可以邊修改邊看修改的效果，調(diào)試的效率很高。

2.4.2 手機(jī)設(shè)備上調(diào)試

手機(jī)上調(diào)試可以發(fā)現(xiàn)所有的問(wèn)題，功能非常強(qiáng)大，例如有時(shí)候在瀏覽器上調(diào)試沒(méi)有問(wèn)題，但是手機(jī)上因?yàn)椴煌陌姹緦?dǎo)致了Web的內(nèi)核不同，所以顯示不正常。但是缺點(diǎn)是調(diào)試的速度很慢，調(diào)試的效果比較依賴手機(jī)設(shè)備。在Android手機(jī)設(shè)備上調(diào)試則需要執(zhí)行以下代碼：

$Ionic run Android

然后就會(huì)將程序打包成手機(jī)運(yùn)行的Android安裝包（Android Package，APK）并在手機(jī)上直接運(yùn)行。如果是IOS設(shè)備，則只需要將Android改成IOS即可。這種模式下調(diào)試時(shí)，每次修改代碼，都需要重新執(zhí)行一遍上面的代碼。

3 Cordova插件

使用Ionic框架制作APP除了能使用瀏覽器引擎提供的HTML5的功能集以外，也包含了與手機(jī)硬件設(shè)備專有功能如攝像頭拍照、本地文件訪問(wèn)、地理位置、陀螺儀、振動(dòng)傳感器、推送緊密結(jié)合的無(wú)限可能。這種無(wú)限可能性是通過(guò)Cordova插件機(jī)制來(lái)實(shí)現(xiàn)的，本章將介紹如何查找與使用Codova插件以及由Ionic開(kāi)發(fā)團(tuán)隊(duì)包裝的ngCordova插件的使用。

3.1 cordova-plugin-battery-status插件使用示例

目前社區(qū)提供的Cordova插件數(shù)有上千個(gè)，支持各種設(shè)備平臺(tái)的各類硬件特性，讀者可以先到網(wǎng)站http：//cordova.apache.org/plugins/進(jìn)行查詢。在找到Cordova插件后，可以直接點(diǎn)擊插件名，頁(yè)面會(huì)跳轉(zhuǎn)到該組件的npm頁(yè)面，該頁(yè)面一般會(huì)介紹所選插件的安裝方法和使用文檔。本小節(jié)將選擇cordova-plugin-battery-status示例講解如何使用一個(gè)Cordova插件[1]。

這個(gè)插件提供了一個(gè)實(shí)現(xiàn)舊版本的電池狀態(tài)事件API。其增加了以下3個(gè)事件 Window對(duì)象：

Batterystatus

Batterycritical

batterylow

應(yīng)用程序可以使用Window.addEventListener附加一個(gè)事件偵聽(tīng)器對(duì)任何上述事件之后 deviceready事件觸發(fā)。

3.1.1 安裝

首先通過(guò)運(yùn)行安裝命令來(lái)安裝該插件：

$cordova plugin add cordova-plugin-battery-status

3.1.2 狀態(tài)對(duì)象

所有事件在這個(gè)插件返回一個(gè)對(duì)象有以下屬性。

（1）電量級(jí)別：電池充電百分比（0—100）。

（2）是否充電：一個(gè)布爾值來(lái)指示設(shè)備插入。

3.1.3 batterystatus事件

發(fā)生在電池充電至少1%的比例變化，或者當(dāng)設(shè)備插入或拔插頭。返回一個(gè)對(duì)象包含電池的狀態(tài)。

例子：

Window.addEventListener（"batterystatus"， onBatteryStatus， false）；

function onBatteryStatus（status） {

alert（"電量級(jí)別： " + status.level +”%，充電狀態(tài)：”+（status.isPlugged？”是”：”否”））；

}

主要的電池狀態(tài)變更事件處理在回調(diào)函數(shù)onBatteryStatus中，傳入?yún)?shù)對(duì)象包含當(dāng)前設(shè)備剩余電量級(jí)別和是否處于充電狀態(tài)。這些信息從標(biāo)準(zhǔn)的瀏覽器中是無(wú)法獲取的，而Cordova以JavaScript對(duì)象的形式使之在移動(dòng)設(shè)備上成為可能。在真機(jī)上調(diào)試后顯示的手機(jī)電量和充電狀態(tài)如圖5所示。

4 結(jié)語(yǔ)

Ionic是一款基于HTML5/CSS 3/JavaScript的跨平臺(tái)開(kāi)發(fā)框架，使用其進(jìn)行開(kāi)發(fā)的主要產(chǎn)品是用于界面結(jié)構(gòu)的網(wǎng)頁(yè)視圖模版。定制后生成的層疊樣式表（Cascading Style Sheets，CSS）渲染文件和包含數(shù)據(jù)業(yè)務(wù)邏輯的JavaScript文件。為了能夠安裝在各個(gè)操作系統(tǒng)平臺(tái)上，它會(huì)調(diào)用底層的Cordova框架來(lái)打包成響應(yīng)的安裝包文件[4]。配合AngularJS這個(gè)主流的前端開(kāi)發(fā)框架，使開(kāi)發(fā)人員不用從頭開(kāi)始寫(xiě)代碼，通過(guò)定制和修改擴(kuò)展，能夠快速地將商業(yè)計(jì)劃變成可以運(yùn)行的APP應(yīng)用。