高興建 花曉慧 邢溧萍

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

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

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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 引言

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

可喜的是，近年來(lái)Ionic、Cordova、React Native、Xamarin及Framework7等一系列跨平臺(tái)移動(dòng)應(yīng)用框架的出現(xiàn)，大大減少了App的開發(fā)成本，同時(shí)又不影響用戶體驗(yàn)，是企業(yè)移動(dòng)開發(fā)的首選。本文以Ionic框架為例，在基于對(duì)Ionic的研究之上利用Web技術(shù)構(gòu)建一個(gè)移動(dòng)微課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)資源下載在本地，可以支持在線或離線訪問(wèn)資源，具有良好的交互性和可靠性，用戶體驗(yàn)非常優(yōu)秀，是高品質(zhì)產(chǎn)品的首選開發(fā)模式。但由于設(shè)備眾多，系統(tǒng)版本各異，開發(fā)與維護(hù)較為復(fù)雜，App的開發(fā)成本很高。

⑵ Web App

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

⑶ Hybrid App

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

表1 Native App、Hybrid App、Web App對(duì)比

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

2 Ionic框架

2.1 Ionic簡(jiǎn)介

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

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

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

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

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

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

2.2 環(huán)境搭建

⑴ 安裝Ionic CLI和Cordova。Ionic App主要通過(guò)Ionic命令行（“CLI”）創(chuàng)建和開發(fā)，并使用Cordova構(gòu)建和部署為本機(jī)應(yīng)用程序。因此，要?jiǎng)?chuàng)建Ionic項(xiàng)目，開發(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)建一個(gè)Ionic項(xiàng)目。安裝完成后，便可創(chuàng)建一個(gè)空白的Ionic項(xiàng)目：$ ionic start MyIonicProject blank，也可以使用Ionic的模板如tabs、sidemenu、super及tutorial等。

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

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

2.3 Ionic懶加載

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

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

3 基于Ionic的移動(dòng)微課App——JL設(shè)計(jì)

3.1 移動(dòng)學(xué)習(xí)

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

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

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

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

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

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

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

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

3.3 JL界面設(shè)計(jì)

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

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

圖2 首頁(yè) 圖3 課程

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

3.4 JL前后端交互

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

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

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

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è)備上也能流暢地運(yùn)行，Crosswalk作為渲染運(yùn)行時(shí)的引擎被集成到JL中。 此外，Crosswalk還在不同的移動(dòng)系統(tǒng)中作為運(yùn)行時(shí)引擎運(yùn)行，以自動(dòng)更新基于不同平臺(tái)的渲染引擎[8]。為減小帶寬壓力，同時(shí)給用戶人性化體驗(yàn)，JL對(duì)其所播放的視頻進(jìn)行編碼處理。視頻采用HEVC/H.265編碼。HEVC可提高視頻編碼效率，在相同的圖像質(zhì)量前提下，壓縮率比H.264/AVC高檔次（high profile）提高一倍；支持各類規(guī)格的視頻，從QVGA（320×240）到1080p（1920×1080），直至超高清視頻4320p（7980×4320）；在計(jì)算復(fù)雜度、壓縮率、魯棒性和處理延時(shí)之間妥善折中處理[9]。

4 結(jié)束語(yǔ)

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

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

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

報(bào)，2015.29（5）：50-53

[2] 陸鋼，朱培軍，李慧云等.智能終端跨平臺(tái)應(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的跨平臺(tái)移

動(dòng)APP的研究與應(yīng)用[J].電腦知識(shí)與技術(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ì)算機(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é)報(bào)（自然科學(xué)版），2013.33（3）：1-11