基于Ionic的混合移動應用的研究與實現

高興建 花曉慧 邢溧萍

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

關鍵詞： Ionic； 混合應用； HTML5； Angular； TypeScript； Cordova

中圖分類號：TP311 文獻標志碼：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 引言

移動智能終端得到普及，移動學習逐漸興起。日語學習者已不滿足于書面化的資源，對在線學習資源的需求日益增加，現有的網絡資源良莠不齊，難成體系，難以滿足人們利用碎片化時間自主學習日語的需求。同時由于所需設備多，系統版本各異，移動學習平臺的開發與維護成本較高。企業成本的增加，會間接增加日語學習者的學習費用。

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

1 App開發模式

現如今，有三種主流的App開發模式：Native App、Web App和Hybrid App。

⑴ Native App

Native App是一種基于智能手機操作系統的本地化應用，靜態資源下載在本地，可以支持在線或離線訪問資源，具有良好的交互性和可靠性，用戶體驗非常優秀，是高品質產品的首選開發模式。但由于設備眾多，系統版本各異，開發與維護較為復雜，App的開發成本很高。

⑵ Web App

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

⑶ Hybrid App

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

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

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

2 Ionic框架

2.1 Ionic簡介

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

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

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

⑶ 集成到Angular中。Angular是一個JavaScript框架，旨在實現前端驅動的動態Web應用程序的輕松開發。該庫擴展了HTML語法，并支持依賴注入、路由、表單驗證、深層鏈接、模板化、數據綁定等功能。

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

⑸ 使用簡單。①Ionic圖標庫Ionicons提供許多圖標供開發者使用。②Ionic的推送服務使App能夠將本地推送通知發送到另一個平臺上的設備。③Ionic Lab允許同時開發和測試App，每次在開發或測試過程中進行更改時，它都能快速更新源代碼，實時展現App的界面。④Ionic擁有自己強大的命令行Ionic CLI，用于搭建、開發以及部署Ionic應用。

2.2 環境搭建

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

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

⑶ 在瀏覽器中調試程序。開發者可以在控制臺中通過cd命令進入項目文件夾：$ cd MyIonicProject，若要在瀏覽器中快速預覽App，可使用serve命令：$ ionic serve。

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

2.3 Ionic懶加載

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

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

3 基于Ionic的移動微課App——JL設計

3.1 移動學習

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

⑴ 個性化學習。學習者可根據自己的能力、時間安排等調節進度，滿足了學習者的個性化需求。

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

⑶ 發散性內容豐富，提高學習積極性。JL研發了單詞、語法、文化等多個學習模塊，學習閑暇之余，可幫助學習者提高學習趣味性。

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

3.2 JL架構設計

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

圖1 移動微課App——JL架構圖

3.3 JL界面設計

JL主要特點就是精煉，延展性強，產品的邏輯是簡單化、模塊化。JL的首頁如圖2，整體設計采用大圖標模式，所見即所得，風格簡約。在“我的課程”里，用戶可根據自己的需求與興趣，自定義學習，可續看自己的課程。“我的筆記”可用來寫自己的學習感悟、理解和想法，并且用戶可以根據自己的喜好來調節字體、顏色及模式。“活動中心”為App增加了極大的推廣度，其獲得一定的商業價值，讓用戶有參與感。

圖3為全部課程的頁面，用戶可在此頁面找到各種類別的視頻。“發現”是JL獨特的動態模塊（見圖4），用戶可在此模塊表達自己對日語學習的所想所感，也可以通過該平臺增添學習好友，促進交流，共同進步。圖5是個人信息的頁面，用戶可在此頁面方便地管理個性化學習信息。

圖2 首頁 圖3 課程

圖4 發現 圖5 我的

3.4 JL前后端交互

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

3.5 JL數據庫架構設計

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

3.6 JL優化

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

4 結束語

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

參考文獻（References）：

[1] 章斕.基于HTML的Web App的開發與探索[J].長沙大學學

報，2015.29（5）：50-53

[2] 陸鋼，朱培軍，李慧云等.智能終端跨平臺應用開發技術研究[J].

電信科學，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的研究與應用[J].電腦知識與技術， 2016.12（1）：119-121

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

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

[7] 凌質億，劉哲星，曹蕾.高并發環境下Apache與Nginx的I/O

性能比較[J].計算機系統應用，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] 朱秀昌，李欣，陳杰.新一代視頻編碼標準—HEVC[J].南京郵

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