Ionic在混合模式APP中的應(yīng)用

商錦　林亮　王雨

摘要摘要：Ionic是Hybrid App混合模式下實(shí)現(xiàn)跨平臺移動應(yīng)用開發(fā)的一種方案，以其開源的代碼庫讓開發(fā)者使用Web技術(shù)如HTML、CSS、AngularJS等開發(fā)出具有原生體驗(yàn)的移動應(yīng)用。分析Ionic關(guān)鍵技術(shù)，介紹如何基于Ionic平臺創(chuàng)建高性能且美觀的跨平臺移動端Hybrid APP，并結(jié)合其主要技術(shù)設(shè)計(jì)一款移動地鐵應(yīng)用。實(shí)踐證明，使用Ionic技術(shù)能夠?qū)崿F(xiàn)高效的移動端應(yīng)用開發(fā)，從而解決了原生應(yīng)用開發(fā)時間長、難度大、無法實(shí)現(xiàn)跨平臺等缺陷。

關(guān)鍵詞關(guān)鍵詞：Ionic；跨平臺；移動應(yīng)用；Hybrid App開發(fā)

DOIDOI：10.11907/rjdk.171018

中圖分類號：TP319

文獻(xiàn)標(biāo)識碼：A文章編號文章編號：16727800（2017）005013203

1移動開發(fā)模式

近年來，隨著移動技術(shù)的發(fā)展與進(jìn)步，以及操作系統(tǒng)的增多，加上對APP需求量的不斷增加，開發(fā)APP的方案已越來越多。目前有3種主流移動應(yīng)用開發(fā)模式，分別是Native APP、Web APP及Hybrid APP。

（1）Native APP。Native APP 指原生APP，一般依靠操作系統(tǒng)，具有很強(qiáng)的交互性，是一個完整的APP，可拓展性不強(qiáng)。簡單來說，原生應(yīng)用是特別為某種操作系統(tǒng)而開發(fā)，比如iOS系統(tǒng)、Android系統(tǒng)、黑莓等，它們在各自的移動設(shè)備上運(yùn)行。原生APP開發(fā)時間長、學(xué)習(xí)難度大且無法實(shí)現(xiàn)跨平臺開發(fā)，但仍是主流模式之一。

（2）Web APP。Web APP 指采用Html5網(wǎng)頁語言寫出的APP[1]，不需下載安裝即可運(yùn)行使用。類似于輕應(yīng)用的概念。Web APP是生存在瀏覽器中的應(yīng)用，某種程度上而言是觸屏版的網(wǎng)頁應(yīng)用。Web應(yīng)用本質(zhì)上是為移動瀏覽器設(shè)計(jì)的基于Web的應(yīng)用，它們是用普通Web開發(fā)語言開發(fā)的，可以在各種智能手機(jī)瀏覽器上運(yùn)行。但其過分依賴于網(wǎng)絡(luò)，且有時出現(xiàn)適配性不好的問題，用戶體驗(yàn)效果差。

（3）Hybrid APP。Hybrid APP（混合型應(yīng)用）指介于WebAPP、NativeAPP這兩者之間的APP[2]，它雖然看上去是一個Native APP，但只有一個UI WebView，訪問的是一個Web APP。Hybrid APP兼具Native APP良好用戶交互體驗(yàn)優(yōu)勢和Web APP跨平臺開發(fā)優(yōu)勢。

由此可以看出，Hybrid APP具有開發(fā)成本低、后期維護(hù)容易、可擴(kuò)展性較好等特點(diǎn)，是很有潛力的一種模式。本文主要對Hybrid技術(shù)進(jìn)行討論。

Ionic是一個用來開發(fā)混合模式手機(jī)應(yīng)用的、開源的、免費(fèi)的代碼庫。本質(zhì)上是基于MVC設(shè)計(jì)模式和angularJS基礎(chǔ)，先開發(fā)出Web應(yīng)用，再將其打包成不同移動平臺的apk。Ionic被譽(yù)為是目前最有潛力的一款混合模式手機(jī)應(yīng)用開發(fā)框架。

2Ionic開發(fā)平臺

2.1Ionic技術(shù)特點(diǎn)

Ionic是Hybrid APP開發(fā)模式中發(fā)展較快的專注于用Web開發(fā)的技術(shù)框架，有如下幾個顯著特點(diǎn)：①Ionic是一種輕量級的框架，支持Angularjs 的特性，MVVM（ModelViewViewModel），代碼易維護(hù)；②提供了漂亮的設(shè)計(jì)，通過 SASS 構(gòu)建應(yīng)用程序，以其內(nèi)置的很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用，UI體驗(yàn)效果極佳；③使用HTML5+CSS3+JavaScript技術(shù)編寫Web端應(yīng)用，通過Ionic平臺提供的本地打包服務(wù)生成Android和iOS平臺安裝運(yùn)行的APP應(yīng)用，實(shí)現(xiàn)跨平臺開發(fā)[3]。

2.2平臺搭建

首先安裝Node.js，可以直接在官網(wǎng)下載并安裝，接著在電腦的終端頁面使用命令：$ npm install g cordova ionic，將自動下載最新版本的cordova 和 ionic commandline tools，可以通過參考Android 和 iOS 官方文檔來安裝。Webstorm IDE是網(wǎng)頁語言編輯器，也是在官網(wǎng)下載并默認(rèn)安裝即可。

2.3通過Ionic創(chuàng)建項(xiàng)目

直接通過cmd命令符創(chuàng)建一個Ionic項(xiàng)目，可以使用Ionic官方提供的現(xiàn)成的應(yīng)用程序模板，或用一個空白的項(xiàng)目創(chuàng)建一個Ionic應(yīng)用。例如，創(chuàng)建一個空白項(xiàng)目：$ionic start demo blank，創(chuàng)建一個含選項(xiàng)卡組件的應(yīng)用：$ionic start demo tabs，創(chuàng)建一個含側(cè)邊欄組件的應(yīng)用：$ionic start demo sidemenu。

3Ionic關(guān)鍵技術(shù)

3.1Ionic路由管理機(jī)制

在單頁應(yīng)用中，路由的管理非常重要。ionic.js使用的是AngularUI 項(xiàng)目的 uirouter 模塊。與通常基于 URL 匹配的路由機(jī)制不同，uiroute 是基于狀態(tài)機(jī)的導(dǎo)航。 uirouter 的核心理念是將子視圖集合抽象為一個狀態(tài)機(jī)，導(dǎo)航意味著狀態(tài)的切換。在不同狀態(tài)下，ionic.js 渲染對應(yīng)的子視圖（動態(tài)加載的 HTML 片段）就實(shí)現(xiàn)了路由導(dǎo)航的功能。

由圖1可以看出，路由機(jī)制可以大致分為3個過程：

（1）在js文件中使用go（）方法驅(qū)動狀態(tài)機(jī)跳轉(zhuǎn)到“state2”這個狀態(tài)。在uiroute中的 $state服務(wù)就是一個狀態(tài)機(jī)實(shí)例，在任何時刻，可以使用其 go（）方法跳轉(zhuǎn)到指定名稱的狀態(tài)。

（2）$state服務(wù)讀取“state2”狀態(tài)的配置服務(wù)，如模板。視圖元素ui view 有多個狀態(tài)，比如：state1/state2/state3。在任何一個時刻，視圖元素只能處于某一狀態(tài)下，處于何種狀態(tài)取決于狀態(tài)機(jī)的跳轉(zhuǎn)。

（3）$state服務(wù)將“state2”對應(yīng)的模板插入到視圖文件中，通過動態(tài)加載HTML片段看到狀態(tài)所對應(yīng)的視圖。在$stateProvider服務(wù)中，配置著不同內(nèi)聯(lián)模塊的id及相應(yīng)的控制器。

基于上述路由機(jī)制，為了便于區(qū)分狀態(tài)機(jī)及控制器，在項(xiàng)目包含的js文件夾會看到3個不同的js文件。

app.js用于為整個應(yīng)用配置狀態(tài)機(jī)，controller.js用于內(nèi)聯(lián)模塊的狀態(tài)跳轉(zhuǎn)，services.js用于存放本地?cái)?shù)據(jù)。

3.2Ionic 關(guān)鍵視圖

默認(rèn)模板創(chuàng)建的項(xiàng)目中有一個templates文件夾，用于存放各內(nèi)聯(lián)模塊具體實(shí)現(xiàn)的html文件，其中index.html是總視圖文件，相當(dāng)于源程序中的main函數(shù)，運(yùn)行即可查看整個應(yīng)用。

（1）模板視圖。在Ionic 中，總是使用指令來作為模板視圖內(nèi)容的總?cè)萜鳎溆嗳萜骶诳側(cè)萜鲀?nèi)。也可寫自定義的html文件，但一般項(xiàng)目都會用到模板視圖，這是為了與Ionic 的導(dǎo)航框架等保持兼容。

（2）導(dǎo)航欄。用來聲明一個居于屏幕頂端的導(dǎo)航欄，其內(nèi)容隨導(dǎo)航視圖的狀態(tài)變化而自動同步變化，Ionic中內(nèi)置了一些css樣式，可以直接在此標(biāo)簽上定義導(dǎo)航欄的風(fēng)格、顏色等。

（3）內(nèi)容。提供一個易用的內(nèi)容區(qū)域，該區(qū)域可以用Ionic的自定義滾動視圖進(jìn)行配置，或?yàn)g覽器內(nèi)置的溢出滾動。如ionRefresher實(shí)現(xiàn)拉動刷新，ionInfiniteScroll實(shí)現(xiàn)無限滾動。

3.3Ionic 側(cè)邊欄

在Ionic項(xiàng)目中靈活運(yùn)用內(nèi)置的側(cè)邊欄可以創(chuàng)建美觀實(shí)用的應(yīng)用界面。側(cè)邊欄菜單是一個最多包含3個子容器的元素，包括：ionsidemenucontent、ionsidemenuleft、ionsidemenuright。默認(rèn)情況下，側(cè)邊欄菜單將只顯示中間容器的內(nèi)容。向左滑動時，將顯示右邊欄容器的內(nèi)容；向右滑動時，將顯示左邊欄容器的內(nèi)容。

3.4Ionic tab結(jié)合高級路由

iontabs是選項(xiàng)卡組件，即帶有標(biāo)簽欄的多標(biāo)簽界面，功能是通過標(biāo)簽切換一組“頁面”。在某個元素上可以指定任何標(biāo)簽類或動畫類來定義它的外觀和感覺。選項(xiàng)卡默認(rèn)位置是在下端，可以通過設(shè)置調(diào)節(jié)選項(xiàng)卡的位置及風(fēng)格。

通過tabs可以輕松切換不同的功能狀態(tài)，iontabs觸發(fā)狀態(tài)遷移有3種方式：①在controller里調(diào)用$state.go（）方法，便利而高效；②點(diǎn)擊包含 uisref 指令的鏈接 Go State 1，響應(yīng)較慢；③通過href導(dǎo)航到與狀態(tài)相關(guān)聯(lián)的url。

4Ionic在移動地鐵售票系統(tǒng)中的應(yīng)用

此款移動地鐵應(yīng)用采用Ionic框架進(jìn)行開發(fā)[4]，涉及的主要功能有：查看地鐵站臺信息、在線購票及充值交通卡、瀏覽地鐵相關(guān)新聞等。應(yīng)用充分利用了Ionic的ModelViewViewModel特性及其提供的UI組件進(jìn)行設(shè)計(jì)，具有功能完善、性能良好、界面美觀等特點(diǎn)。

4.1路由設(shè)計(jì)（以購票功能為例）

（1）app.js中的狀態(tài)機(jī)配置。

5結(jié)語

在Ionic平臺上開發(fā)，充分發(fā)揮此框架代碼的開源性、良好的UI設(shè)計(jì)、相比于其它h5開發(fā)的APP運(yùn)行更流暢等優(yōu)點(diǎn)[56]。同時由于技術(shù)不夠完善，在低版本的安卓及iOS平臺上運(yùn)行會出現(xiàn)卡頓現(xiàn)象。因此，應(yīng)利用Ionic代碼庫的開源特性不斷完善框架的穩(wěn)定性與適配性，實(shí)現(xiàn)更好的性能。

參考文獻(xiàn)參考文獻(xiàn)：

[1]汪佳佳.MUI在web APP開發(fā)中的應(yīng)用與研究[J].數(shù)碼世界，2016（10）：12.

[2]馮明.基于混合模式（Hybrid App）移動終端設(shè)計(jì)的方法[J].數(shù)字技術(shù)與應(yīng)用，2015（4）：148149.

[3]朱凱南，李艷平，申閆春，等.基于Ionic和Cordova的跨平臺移動APP的研究與應(yīng)用[J].電腦知識與技術(shù)，2016，12（1）：119121.

[4]陳理兵.基于Ionic的某醫(yī)院移動辦公系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[D].廈門：廈門大學(xué)，2015.

[5]聶啟陽.基于HTML5的政府移動OA系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2014（7）：4141.

[6]JEREMYWILKEN，威爾肯斯，奇舞團(tuán).Ionic實(shí)戰(zhàn)：基于Angular JS的移動混合應(yīng)用開發(fā)[M].北京：電子工業(yè)出版社，2016.

責(zé)任編輯（責(zé)任編輯：孫娟）