基于Ionic的混合移動應(yīng)用的研究與實現(xiàn)

高興建 花曉慧 邢溧萍

摘 要： Ionic框架是一種開源軟件開發(fā)工具包（SDK），用于開發(fā)具有HTML5，CSS和JavaScript的混合移動應(yīng)用。開發(fā)者可使用HTML5、CSS、TypeScript來創(chuàng)建可在Android，iOS和Windows Phone上有效部署的移動應(yīng)用程序。文章討論了這三種開發(fā)模式的優(yōu)缺點，闡述了如何基于Ionic開發(fā)混合移動應(yīng)用，并通過開發(fā)實例——移動微課App，證明了方案的有效性。

關(guān)鍵詞： Ionic； 混合應(yīng)用； HTML5； Angular； TypeScript； Cordova

中圖分類號：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2018）03-31-04

Research and implementation of Ionic based hybrid mobile application

Gao Xingjian1， Hua Xiaohui1， Xing Liping2

（1. Institute of Computer Science & Technology， Nantong University， Nantong 226019， China； 2. Institute of Foreign Languages， Nantong University）

Abstract： Ionic framework is an open source Software Development Kit （SDK） for developing hybrid mobile application with HTML5， CSS， and JavaScript. Developers can use HTML5， CSS， TypeScript to create mobile application that can be effectively deployed on Android， iOS and Windows Phone. This article discusses the advantages and disadvantages of three development modes， and elaborates how to develop an Ionic based hybrid mobile application. And through a development instance， the mobile micro-class App， proves the effectiveness of the solution.

Key words： Ionic； HybridApp； HTML5； Angular； TypeScript； Cordova

0 引言

移動智能終端得到普及，移動學(xué)習(xí)逐漸興起。日語學(xué)習(xí)者已不滿足于書面化的資源，對在線學(xué)習(xí)資源的需求日益增加，現(xiàn)有的網(wǎng)絡(luò)資源良莠不齊，難成體系，難以滿足人們利用碎片化時間自主學(xué)習(xí)日語的需求。同時由于所需設(shè)備多，系統(tǒng)版本各異，移動學(xué)習(xí)平臺的開發(fā)與維護(hù)成本較高。企業(yè)成本的增加，會間接增加日語學(xué)習(xí)者的學(xué)習(xí)費用。

可喜的是，近年來Ionic、Cordova、React Native、Xamarin及Framework7等一系列跨平臺移動應(yīng)用框架的出現(xiàn)，大大減少了App的開發(fā)成本，同時又不影響用戶體驗，是企業(yè)移動開發(fā)的首選。本文以Ionic框架為例，在基于對Ionic的研究之上利用Web技術(shù)構(gòu)建一個移動微課App。

1 App開發(fā)模式

現(xiàn)如今，有三種主流的App開發(fā)模式：Native App、Web App和Hybrid App。

⑴ Native App

Native App是一種基于智能手機(jī)操作系統(tǒng)的本地化應(yīng)用，靜態(tài)資源下載在本地，可以支持在線或離線訪問資源，具有良好的交互性和可靠性，用戶體驗非常優(yōu)秀，是高品質(zhì)產(chǎn)品的首選開發(fā)模式。但由于設(shè)備眾多，系統(tǒng)版本各異，開發(fā)與維護(hù)較為復(fù)雜，App的開發(fā)成本很高。

⑵ Web App

Web App，即網(wǎng)絡(luò)應(yīng)用。它是一種依賴于Web瀏覽器，通過網(wǎng)絡(luò)進(jìn)行訪問的應(yīng)用程序[1]。Web App可以跨多個平臺提供一致的用戶界面，因為外觀取決于瀏覽器而不是操作系統(tǒng)。但Web App完全依賴于網(wǎng)絡(luò)，當(dāng)處在離線狀態(tài)時，App基本無法使用，用戶體驗差。

⑶ Hybrid App

Hybrid App是指混合移動應(yīng)用，同時使用網(wǎng)頁語言與程序語言編寫，包含原生視圖和Web視圖兩種方式，使用方式和Native App一致，而又繼承了Web App實時更新、開發(fā)成本低等優(yōu)點[2]。Hybrid App托管在使用WebView的本機(jī)應(yīng)用程序中，用戶界面操作邏輯及部分靜態(tài)資源駐留本地，因而，App的部分功能可以離線使用。如表1所示，Hybrid App相比于其他類型App，有很多優(yōu)點。在開發(fā)成本、平臺獨立開發(fā)和維護(hù)所需的時間方面，Hybrid App是最好的選擇[3]。

表1 Native App、Hybrid App、Web App對比

[ Native App Hybrid App Web App 跨平臺 差 優(yōu) 優(yōu) 體驗 優(yōu) 中 差 開發(fā)難度 難 易 易 開發(fā)周期 長 短 短 開發(fā)成本 高 低 低 安裝 需要 需要 不需要 ]

2 Ionic框架

2.1 Ionic簡介

Ionic是免費、開源、輕量級的Hybrid App框架，用于使用HTML5、CSS3、SASS（CSS擴(kuò)展語言）和JavaScript等Web技術(shù)開發(fā)跨平臺移動應(yīng)用。Ionic比較注重終端用戶的體驗及移動應(yīng)用的交互[4]，它主要有如下幾個特性。

⑴ 提供多種UI組件。Ionic為開發(fā)者提供了多種Native風(fēng)格UI組件，豐富的CSS庫，包括Button、Grid、List、Menu、Tab和Toggle等。這些組件顏色樣式繁多，界面現(xiàn)代化、美觀，用戶體驗度極高。

⑵ 將TypeScript作為編程語言。TypeScript是JavaScript的超集，因此，所有的JavaScript代碼都可以用于Ionic的移動App開發(fā)。Typescript允許開發(fā)者編寫用于處理用戶數(shù)據(jù)的復(fù)雜邏輯，以提供良好的交互式用戶體驗。

⑶ 集成到Angular中。Angular是一個JavaScript框架，旨在實現(xiàn)前端驅(qū)動的動態(tài)Web應(yīng)用程序的輕松開發(fā)。該庫擴(kuò)展了HTML語法，并支持依賴注入、路由、表單驗證、深層鏈接、模板化、數(shù)據(jù)綁定等功能。

⑷ 采用Cordova插件。Cordova針對不同平臺的WebView做了擴(kuò)展和封裝，使WebView這個組件變成可訪問設(shè)備本地API的強(qiáng)大瀏覽器，所以開發(fā)人員在Cordova框架下可通過JavaScript訪問設(shè)備本地API[5]。Ionic Native是Cordova/PhoneGap插件的封裝，開發(fā)者可通過它將所需的本地功能添加到應(yīng)用中。

⑸ 使用簡單。①Ionic圖標(biāo)庫Ionicons提供許多圖標(biāo)供開發(fā)者使用。②Ionic的推送服務(wù)使App能夠?qū)⒈镜赝扑屯ㄖl(fā)送到另一個平臺上的設(shè)備。③Ionic Lab允許同時開發(fā)和測試App，每次在開發(fā)或測試過程中進(jìn)行更改時，它都能快速更新源代碼，實時展現(xiàn)App的界面。④Ionic擁有自己強(qiáng)大的命令行Ionic CLI，用于搭建、開發(fā)以及部署Ionic應(yīng)用。

2.2 環(huán)境搭建

⑴ 安裝Ionic CLI和Cordova。Ionic App主要通過Ionic命令行（“CLI”）創(chuàng)建和開發(fā)，并使用Cordova構(gòu)建和部署為本機(jī)應(yīng)用程序。因此，要創(chuàng)建Ionic項目，開發(fā)者需要安裝最新版本的CLI和Cordova。首先安裝Node.js，在官網(wǎng)下載Node.js 6或更高版本的安裝包進(jìn)行安裝，然后繼續(xù)安裝Ionic CLI和Cordova進(jìn)行App開發(fā)：$ npm install -g ionic cordova。

⑵ 創(chuàng)建一個Ionic項目。安裝完成后，便可創(chuàng)建一個空白的Ionic項目：$ ionic start MyIonicProject blank，也可以使用Ionic的模板如tabs、sidemenu、super及tutorial等。

⑶ 在瀏覽器中調(diào)試程序。開發(fā)者可以在控制臺中通過cd命令進(jìn)入項目文件夾：$ cd MyIonicProject，若要在瀏覽器中快速預(yù)覽App，可使用serve命令：$ ionic serve。

⑷ 部署到設(shè)備。在App開發(fā)過程中，使用瀏覽器或模擬器可以快速、輕松地調(diào)試App，但最終測試Ionic Native插件或App制作完成時，App不得不在設(shè)備上進(jìn)行調(diào)試以達(dá)到準(zhǔn)確測試的目的。如果要運行App，只需在命令行運行$ ionic cordova run android/ios -device，之后便會產(chǎn)生App的調(diào)試版本，并在設(shè)備上運行。

2.3 Ionic懶加載

懶加載是一種設(shè)計模式，頁面只在第一次啟動應(yīng)用時才加載。如果用戶導(dǎo)航到新頁面，那么該頁面的組件將立即加載。但是，這并不意味著它總是在改變頁面的時候加載組件。實際上，它只加載第一個訪問頁面，當(dāng)我們再次訪問該頁面時，它不會加載。

Ionic的懶加載方式帶來許多的新特性。①懶加載能夠減少程序啟動時間，減少打包后的體積，讓用戶體驗更友好的加載，更快的響應(yīng)，在優(yōu)化內(nèi)容交付和用戶體驗之間達(dá)成了平衡。②避免在每一個使用到某Page 的Module 或其他Page 中重復(fù)導(dǎo)入這個類（需要寫一堆路徑），大大的簡化了代碼量。③可以很方便的使用路由的功能，通過字符串key在任何想使用的地方獲取某一Page。④讓開發(fā)過程實時編譯更快。

3 基于Ionic的移動微課App——JL設(shè)計

3.1 移動學(xué)習(xí)

移動學(xué)習(xí)（M-Learning）是指在移動電話或平板電腦上學(xué)習(xí)，其在數(shù)字化學(xué)習(xí)（E-Learning）中發(fā)揮了重要作用[6]。在信息化時代，移動學(xué)習(xí)的進(jìn)步與發(fā)展已然成為必然的趨勢。JL（Japanese Lesson）是一款基于移動學(xué)習(xí)的理念，致力于提高非專業(yè)日語學(xué)習(xí)者的學(xué)習(xí)效率與興趣的App，主要有以下幾個特點：

⑴ 個性化學(xué)習(xí)。學(xué)習(xí)者可根據(jù)自己的能力、時間安排等調(diào)節(jié)進(jìn)度，滿足了學(xué)習(xí)者的個性化需求。

⑵ 學(xué)習(xí)時間碎片化。JL所收錄的微課時長為5-10分鐘，簡單清晰便于記憶，利于提高學(xué)習(xí)效率，極大地滿足了非專業(yè)日語學(xué)習(xí)者的學(xué)習(xí)要求。

⑶ 發(fā)散性內(nèi)容豐富，提高學(xué)習(xí)積極性。JL研發(fā)了單詞、語法、文化等多個學(xué)習(xí)模塊，學(xué)習(xí)閑暇之余，可幫助學(xué)習(xí)者提高學(xué)習(xí)趣味性。

⑷ 適用人群范圍廣。移動學(xué)習(xí)是建立在移動平臺上的學(xué)習(xí)方式，即所有持有移動設(shè)備的適合學(xué)習(xí)的人群都是移動學(xué)習(xí)可適用范圍。

3.2 JL架構(gòu)設(shè)計

JL采用MVC架構(gòu)模式（見圖1），Model層用于封裝數(shù)據(jù)及處理數(shù)據(jù)的方法，由User、Course、Dynamic、News組成，User用于存儲用戶數(shù)據(jù)，Course用于存儲課程數(shù)據(jù)，Dynamic用于存儲動態(tài)數(shù)據(jù)，News用于存儲資訊數(shù)據(jù)；View層通過HTML5、CSS實現(xiàn)；Controller層采用TypeScript語言，通過方法監(jiān)聽和處理用戶的請求，封裝Services及API，接收基于HTTP協(xié)議的GET、POST請求，實現(xiàn)與Server的交互，另外，Controller層還可以調(diào)用Ionic Native已經(jīng)封裝好的Cordova/PhoneGap插件，實現(xiàn)拍照、SQLite數(shù)據(jù)庫及視頻播放等功能。

圖1 移動微課App——JL架構(gòu)圖

3.3 JL界面設(shè)計

JL主要特點就是精煉，延展性強(qiáng)，產(chǎn)品的邏輯是簡單化、模塊化。JL的首頁如圖2，整體設(shè)計采用大圖標(biāo)模式，所見即所得，風(fēng)格簡約。在“我的課程”里，用戶可根據(jù)自己的需求與興趣，自定義學(xué)習(xí)，可續(xù)看自己的課程?！拔业墓P記”可用來寫自己的學(xué)習(xí)感悟、理解和想法，并且用戶可以根據(jù)自己的喜好來調(diào)節(jié)字體、顏色及模式?！盎顒又行摹睘锳pp增加了極大的推廣度，其獲得一定的商業(yè)價值，讓用戶有參與感。

圖3為全部課程的頁面，用戶可在此頁面找到各種類別的視頻?！鞍l(fā)現(xiàn)”是JL獨特的動態(tài)模塊（見圖4），用戶可在此模塊表達(dá)自己對日語學(xué)習(xí)的所想所感，也可以通過該平臺增添學(xué)習(xí)好友，促進(jìn)交流，共同進(jìn)步。圖5是個人信息的頁面，用戶可在此頁面方便地管理個性化學(xué)習(xí)信息。

圖2 首頁 圖3 課程

圖4 發(fā)現(xiàn) 圖5 我的

3.4 JL前后端交互

Ionic與后端存在于完全獨立的空間中，后端所使用的技術(shù)與Ionic是完全不相關(guān)的。Ionic不直接與后端集成，只是與它通信。為使Ionic能夠與后端交互，后端需要實現(xiàn)Ionic應(yīng)用可以進(jìn)行HTTP請求的各種API。JL的前后端是分離的，通信通過跨域請求，頁面路由由前端處理，所有數(shù)據(jù)均通過HTTP請求獲得，因而前后端開發(fā)互不影響，更有利于進(jìn)行維護(hù)。JL的前端中可集中所有數(shù)據(jù)，所有頁面均可以訪問這些數(shù)據(jù)，從而避免了重復(fù)請求獲取相同數(shù)據(jù)的現(xiàn)象，也減少了用戶等待數(shù)據(jù)加載的時間。

3.5 JL數(shù)據(jù)庫架構(gòu)設(shè)計

JL數(shù)據(jù)庫采用Apache+PHP+MySQL的組合，即Apache作為Web服務(wù)器，PHP實現(xiàn)數(shù)據(jù)庫與服務(wù)器的連接，MySQL作為后臺數(shù)據(jù)庫。Apache是一個開放源代碼的網(wǎng)頁服務(wù)器。由于其可以在大多數(shù)電腦操作系統(tǒng)下運行和具有較高的安全性而被廣泛使用，是目前使用排名第一的Web服務(wù)器[7]。若要訪問MySQL數(shù)據(jù)庫，JL先要利用HTTP協(xié)議發(fā)送Request請求給Apache，PHP根據(jù)請求訪問MySQL數(shù)據(jù)庫，并將讀取的數(shù)據(jù)庫內(nèi)容封裝成JSON格式，回傳給JL客戶端，JL客戶端再對JSON解析，生成相應(yīng)的頁面。

3.6 JL優(yōu)化

由于Android系統(tǒng)碎片化比較嚴(yán)重，不同Android版本的Webview的HTML5能力也有較大差異，導(dǎo)致Ionic應(yīng)用的一致性難以保證。為了增強(qiáng)JL的性能，使JL在裝有低版本Android系統(tǒng)的設(shè)備上也能流暢地運行，Crosswalk作為渲染運行時的引擎被集成到JL中。 此外，Crosswalk還在不同的移動系統(tǒng)中作為運行時引擎運行，以自動更新基于不同平臺的渲染引擎[8]。為減小帶寬壓力，同時給用戶人性化體驗，JL對其所播放的視頻進(jìn)行編碼處理。視頻采用HEVC/H.265編碼。HEVC可提高視頻編碼效率，在相同的圖像質(zhì)量前提下，壓縮率比H.264/AVC高檔次（high profile）提高一倍；支持各類規(guī)格的視頻，從QVGA（320×240）到1080p（1920×1080），直至超高清視頻4320p（7980×4320）；在計算復(fù)雜度、壓縮率、魯棒性和處理延時之間妥善折中處理[9]。

4 結(jié)束語

Ionic擁有一個龐大的國際開發(fā)商和貢獻(xiàn)者社區(qū)，促進(jìn)其成長，在4年的快速發(fā)展中，Ionic已成為世界上最受歡迎的移動應(yīng)用開發(fā)框架之一。隨著硬件的升級、框架的優(yōu)化，Ionic App逐漸趨近于Native App的體驗，以Ioinc為代表的混合移動應(yīng)用逐漸變成了一種趨勢。

參考文獻(xiàn)（References）：

[1] 章斕.基于HTML的Web App的開發(fā)與探索[J].長沙大學(xué)學(xué)

報，2015.29（5）：50-53

[2] 陸鋼，朱培軍，李慧云等.智能終端跨平臺應(yīng)用開發(fā)技術(shù)研究[J].

電信科學(xué)，2012.5：14-17

[3] A. Khanderparkar， R. Gupta and B. Sindhya. An

introduction to Hybrid Platform Mobile Application Development[J]. International Journal of Computer Applications，2015.118（15）：31-33

[4] R. Khanna， M. Harlington. Getting Started with Ionic[M].

Birmingham， UK： Packet Publishing Ltd， 2016.

[5] 朱凱南，李艷平，申閆春等.基于Ionic和Cordova的跨平臺移

動APP的研究與應(yīng)用[J].電腦知識與技術(shù)， 2016.12（1）：119-121

[6] M. Saylor. The Mobile Wave： How Mobile Intelligence Will

Change Everything[M]. US： Vanguard Press，2012.

[7] 凌質(zhì)億，劉哲星，曹蕾.高并發(fā)環(huán)境下Apache與Nginx的I/O

性能比較[J].計算機(jī)系統(tǒng)應(yīng)用，2013.22（6）：204-208

[8] Ning Wang， Xuemin Chen， Gangbing Song， Qianlong Lan，

Hamid R.Parsaei. Design a New Mobile Optimized Remote Laboratory Application Architecture for M-Learning[J]. IEEE Transactions on Industrial Electronics，2017.64（3）：2382-2391

[9] 朱秀昌，李欣，陳杰.新一代視頻編碼標(biāo)準(zhǔn)—HEVC[J].南京郵

電大學(xué)學(xué)報（自然科學(xué)版），2013.33（3）：1-11