Ionic在混合模式APP中的應用

商錦　林亮　王雨

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

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

DOIDOI：10.11907/rjdk.171018

中圖分類號：TP319

文獻標識碼：A文章編號文章編號：16727800（2017）005013203

1移動開發(fā)模式

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

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

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

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

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

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

2Ionic開發(fā)平臺

2.1Ionic技術特點

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

2.2平臺搭建

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

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

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

3Ionic關鍵技術

3.1Ionic路由管理機制

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

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

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

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

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

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

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

3.2Ionic 關鍵視圖

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

（1）模板視圖。在Ionic 中，總是使用指令來作為模板視圖內容的總容器，其余容器均要包含在總容器內。也可寫自定義的html文件，但一般項目都會用到模板視圖，這是為了與Ionic 的導航框架等保持兼容。

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

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

3.3Ionic 側邊欄

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

3.4Ionic tab結合高級路由

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

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

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

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

4.1路由設計（以購票功能為例）

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

5結語

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

參考文獻參考文獻：

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

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

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

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

[5]聶啟陽.基于HTML5的政府移動OA系統(tǒng)設計與實現(xiàn)[J].網絡安全技術與應用，2014（7）：4141.

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

責任編輯（責任編輯：孫娟）