基于Ionic的App跨平臺混合開發技術的研究

常振業 劉佳偉 閆茜茜

摘 ?要： 目前市場上存在的操作系統種類繁多，針對不同的操作系統要開發不同的App。而跨平臺App開發可以做到一次開發，多平臺兼容。本文主要介紹了基于Ionic框架下的手機App開發，在Ionic框架下通過與Angular和Cordova框架的結合，只開發一種所需要的App版本即可去適用于當前大部分的操作系統，并以無人超市App為例簡述基于Ionic框架下通過與Angular和Cordova相結合的開發流程。

關鍵詞： 跨平臺;移動App;混合開發;Ionic框架

中圖分類號： TP311 ? ?文獻標識碼： A ? ?DOI：10.3969/j.issn.1003-6970.2019.04.047

本文著錄格式：常振業，劉佳偉，閆茜茜，等. 基于Ionic的App跨平臺混合開發技術的研究[J]. 軟件，2019，40（4）：215218

【Abstract】： There are many kinds of operating systems in the market，and different App are developed for different operating systems. While cross-platform App development can be done in one development and multiple platforms. This paper mainly introduces the App development based on the Ionic framework. Through the combination of the Ionic framework and the Angular and Cordova framework， it only develops one version of the App it needs to be applicable to the current operating system. Taking the unmanned supermarket App as an example， the development process of the Ionic framework and the Angular and Cordova technology is briefly described.

【Key words】： Cross-platform; Mobile App; Ionic framework

0 ?引言

在移動互聯網高速發展的今天，App的開發與應用也發展的異常迅速。但生活中使用到的操作系統種類繁多，針對不同操作系統需開發相對應的App版本，耗時長、成本高。經過技術的不斷發展與研究，我們發現可以通過基于以Angular JS為基礎的Ionic跨平臺移動開發框架來開發多系統相兼容的App版本。跨平臺混合開發的優點就在于只需一次編寫和開發，就可以實現多平臺互通，簡單易學，并適應于大多場景[1]-[2]。使用Ionic跨平臺移動開發框架開發的產品主要是用于界面結構的網頁視圖模板、定制后生成的CSS渲染文件和包含數據業務邏輯的JavaScript文件等[3-4]。

1 ?Ionic簡介

Ionic是由Angular JS衍生而來的HTML5混合開發技術，是一款混合移動應用的開發框架，針對構建混合的移動應用程序。它能讓程序直接訪問本地平臺層，同時也是運行在瀏覽器內核里面的。混合應用程序的誕生肯定有許多過人之處，Ionic即是如此。首先在布局上，它的移動UI元素以及布局都是基于類原生風格。其次，Ionic作為一款前端的UI框架，一般App能設計的外觀和一些UI交互它都可以做到。Ionic的類原生風格布局和它的UI元素都是Ionic和一般的響應式框架不同的具體表現。同時因為Ionic還是一款HTML5混合開發框架，所以它還要通過一款本地包裝去運行原生應用，例如Cordova或PhoneGap等[5]。Ionic框架組成如圖1所示。

通俗地說Ionic是在Angular基礎上的一種延伸，再通過Cordova來封裝的App構建方案。Ionic App本質上就是一個Web App，然后通過Cordova打包成一個Android、iOS的App或者桌面程序[6]。Ionic提供了許多符合移動平臺界面外觀的UI組件，以幫助開發人員開發功能強大的Internet App移動應用程序。Ionic框架的目的是使用Web技術開發移動應用程序，而基于Apache Cordova的編譯平臺實現了編譯和打包到各種移動操作系統平臺的應用程序包。Ionic專為兩款流行的設備設計，具有相當完美的表現層。利用Ionic提供的CLI，只需要通過輸入一個命令就可以完成創建應用初始框架、構建 ?測試包，將應用程序部署到指定的平臺設備或模擬器[7]。基于Ionic的跨平臺App混合開發的總體架構圖如圖2所示。

2 ?基于Ionic跨平臺App開發的相關技術

2.1 ?與Ionic交互的前端介紹

App的開發肯定會涉及到HTML5前端技術以便給用戶以視覺感受和操作。Ionic開發亦是如此。廣義的HTML5是HTML、CSS3和JavaScript的技術組合，是為了減少瀏覽器對插件的依賴而提供豐富的RIA應用。狹義的HTML5是對HTML標準的第五次修訂，而HTML5是規定的一個標準。HTML即超文本標記語言（Hyper Text Markup Language），?是一種標記語言，而HTML5能使開發者的工作大大簡化。

CSS3：CSS的第三個版本。CSS（層疊樣式表）是一組格式規則，是對Web的頁面布局，即將網頁做的美觀。

JavaScript：JavaScript是一種常用語Web客戶端編程的腳本語言，使網頁在客戶端瀏覽器中更加動態，顯示出更豐富的視覺效果。在Web應用中，我們可以理解為HTML是人的軀干，CSS是人的衣服，JavaScript是人的各種動作與思想[8]。

2.2 ?與Ionic交互的Angular框架簡述

Angular是一個用于設計動態Web應用的結構開發框架，它是用TypeScript構建。

Angular有幾大特性[9]。分別有以下幾點：

（1）Angular實現了M.V.VM模式，Angular使用M.V.VM模式獲得了四大好處：

1. 低耦合;

2. 可重用性;

3. 開發與設計工作可分離;

4. 可測試性。

（2）Angular實現了模塊化——在AngularJS中，模板相當于HTML文件被瀏覽器解析到DOM中，AngularJS遍歷這些DOM，也就是說AnguarJS把模板當做DOM來操作，去生成一些指令來完成對view的數據綁定;

（3）Angular實現了聲明式界面——Angular更清晰地界定了一個Web應用的組成部分;

（4）Angular實現了雙向數據綁定——實現了把model與view完全綁定在一起，model變化，view也變化，反之亦然。

2.3 ?與Ionic交互的Cordova框架簡述

一個普通的應用程序一般具有Android或者iOS兩個版本，而不論你使用那種手機操作系統，當出現應用更新時，你都必須去及時更新才可使用新功能。對于移動開發則要做到多版本及時更新才能正常使用，這將極其不方便。使用Cordova開發可以使其變得更為簡便，因為Cordova可以使代碼只需一次編寫，就可生成適應于多版本的功能。Cordova是一種基于HTML、CSS和JavaScript的，用于創建跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手機的核心功能——包括地理定位、加速器、聯系人、聲音和振動等，此外Cordova擁有豐富的插件可供調用。Cordova還允許客戶使用標準Web技術進行跨平臺開發，以避免在每個移動平臺上使用本機開發語言。應用程序在每個平臺的包中執行，并依賴于符合標準的API綁定來訪問每個設備功能[10]。

3 ?基于Ionic跨平臺App的實現

方案為Hybrid App開發方式。使用Ionic框架實現系統UI，對整體框架做以布局;通過MongoDB數據庫和后端數據進行交互，實現數據的實時更新;并用Cordova插件來實現底層API的硬件接口調用，使App與手機的硬件設備緊密結合起來[11]。基于此方案我們開發出一個無人超市購物App，下面簡要介紹該App的環境搭建和技術開發流程。

3.1 ?App開發環境的搭建

在進入編寫前端App代碼之前，首先需要保證

服務端API的可用，因此第一步是完成服務器端環境的部署與測試，驗證其可以正常工作，然后依次部署服務器端環境。

（1）安裝Node.js、NPM、Ionic CLI和Cordova等相關必備工具;

（2）通過命令npm install安裝后端Node.js項目依賴的npm包;

（3）通過mongo啟動MongoDB后臺服務進程;

（4）用ionic start market tabs命令生成帶完整導航欄的應用;啟動所建目錄下的index.js文件;

（5）使用mongo查詢所建數據庫是否已被初始化[12-13];

（6）使用postman測試端口以檢測前后端數據交互進程。

所需要的開發環境搭建部署成功之后，可得到用Ionic內置命令生成的完整導航欄，其文件圖如圖3所示;通過Visual Studio Code軟件我們可以打開相應文件。接下來可以在該平臺下進行所需的編程開發。

3.2 ?創建項目框架

方案開發是基于Ionic實現，使用CSS來布局和渲染界面以及設計組件等，在高性能完成方案的同時，要達到最優的靈活性以及兼容性。接下來為初始化項目設置與目錄結構。

（1）使用Ionic CLI初始化項目目錄。

（2）使用命令Ionic start market tabs即可生成當前應用最多的三段式布局，并對其編入代碼即可實現前端所需頁面，Ionic的頂欄區總是位于設備屏幕頂部，底欄區總是位于設備屏幕底部，而內容區則占據設備屏幕剩余空間。

（3）Ionic內置導航類組件——生命周期、頁面跳轉與傳值和側欄等;一個成熟的移動App在視覺上對用戶來說，一般是由多個可以互相跳轉的功能和頁面組成的。Ionic的跳轉方式一般有Nav-Con?troller、ModalController的頁面跳轉方式和跳轉傳值。

（4）Ionic內置數據展示與操作組件。前面論述了Ionic提供的布局與定義App的整體框架的內容，現在介紹用Ionic開發移動App內容部分所要用到的各種常見界面組件要素。Ionic框架做了深度的設計封裝，使開發者通過較少的代碼量就能輕松實現專業的界面與功能效果。例如對話框、輪播組件等;浮動框、彈出框等提供了一種非侵入的方式來顯示對話框，可應用于多個場景。

以對話框為例，其是在TypeScript代碼里，先導入PopoverController并通過依賴注入頁面的構造函數中，隨后通過調用它的若干方法完成對浮動框的控制。而彈出框服務組件AlertController可以看成是縮小的模態框。在其完整的導航欄中添加所設計App的功能與實現代碼。例如為App添加側欄功能，導入PopoverController并通過依賴注入頁面的構造函數中，通過調用它的若干方法對浮動框的控制。

（5）在使用Ionic framework生成的App中，還擁有直接與手機硬件進行交互和調用的功能，這種功能通過Cordova插件機制來實現。我們可以使用ionic cordovaplugin add命令來實現對Cordova插件的安裝;Cordova插件是無法使用Angular的this對象和依賴注入的，只能通過訪問全局的變量和方法來調用，此時我們可以使用它的開源Cordova插件，即Ionic Native插件集。其安裝命令為ioniccordova plugin add cordova-plugin-device與npm install --save @ionic-native/device。同時我們可將Ionic Native作為依賴的模塊注入App應用模塊中。

（6）對所需要設計的App可通過相應的編程來實現，在此我們對我們所設計的無人超市App內容進行填充，采用上面所述的tabs與側欄等功能來做以實現，編碼完成后可通過命令Ionic cordova build --release android生成發布版的apk文件，也可對其生成iOS的apk文件。然后對其發布與簽名就可以開始應用上架登記。其App部分頁面圖如圖4所示。

4 ?總結

方案前端使用Ionic框架開發，并用Cordova打包，在Ionic的Hybrid App與手機硬件調用問題中，引入了ng Cordova插件來實現。方案用目前流行的Ionic跨平臺技術，實現了精準的前端頁面設計，在性能方面，從加載、渲染等方面做了優化，并通過擴展等操作使用戶達到良好的體驗。最后簡單示例了一款跨平臺移動無人超市購物App，成功應用到Android與iOS平臺中，驗證了Ionic混合開發的良好性能，基于Ionic的App跨平臺混合開發技術的研究得以實現，也驗證其是一個可以開發使用的App開發模式。

參考文獻

[1] 陸鋼， 朱培軍， 李慧云， 文錦軍. 智能終端跨平臺應用開發技術研究[J]. 電信科學， 2012， 28（05）： 14-17.

[2] 李麗平， 薛玉倩. 基于HTML5跨平臺移動應用開發的研究與實踐[J]. 河北軟件職業技術學院學報， 2017， 19（02）： 35-38.

[3] 阮曉龍. HTTP協議狀態檢測與性能分析軟件的設計與實現[J]. 軟件， 2015， 36（07）： 136-141.

[4] 張呈宇. 基于HTML5的跨平臺移動APP開發研究[J]. 通訊世界， 2018（08）： 46-47.

[5] 商錦， 林亮， 王雨， 張智. Ionic在混合模式APP中的應用[J]. 軟件導刊， 2017， 16（05）： 132-134.

[6] 劉異， 趙輝. 基于IOS平臺的移動搜課寶系統設計[J]. 軟件， 2018， 39（06）： 118-124.

[7] 高興建， 花曉慧， 邢溧萍. 基于Ionic的混合移動應用的研究與實現[J]. 計算機時代， 2018（03）： 31-34.

[8] 邢曉鵬. HTML5核心技術的研究與價值分析[J]. 價值工程， 2011， 30（22）： 157-158.

[9] 劉青丹， 王舒憬， 強杰. Ionic+AngularJS框架在跨平臺旅游APP客戶端系統中的應用[J]. 工業控制計算機，2018， 31（01）： 142-143.

[10] 朱凱南， 李艷平， 申閆春， 魏鄧航， 余越. 基于Ionic和Cordova的跨平臺移動APP的研究與應用[J]. 電腦知識與技術， 2016， 12（01）： 119-121.

[11] 臧進進， 鄂海紅. 基于響應式Web設計的網頁生成系統研究與實現[J]. 軟件， 2015， 36（6）： 37-41

[12] 謝華成， 馬學文， MongoDB 數據庫下文件型數據存儲研究[J]. 軟件， 2015， 36（11）： 12-14.

[13] 白長清， 劉敏. MongoDB在氣象傳感器數據處理中的應用[J]. 軟件， 2015， 36（11）： 34-37.