常振業(yè) 劉佳偉 閆茜茜

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

關(guān)鍵詞： 跨平臺;移動App;混合開發(fā);Ionic框架

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

本文著錄格式：常振業(yè)，劉佳偉，閆茜茜，等. 基于Ionic的App跨平臺混合開發(fā)技術(shù)的研究[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 ?引言

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

1 ?Ionic簡介

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

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

2 ?基于Ionic跨平臺App開發(fā)的相關(guān)技術(shù)

2.1 ?與Ionic交互的前端介紹

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

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

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

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

Angular是一個用于設(shè)計動態(tài)Web應(yīng)用的結(jié)構(gòu)開發(fā)框架，它是用TypeScript構(gòu)建。

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

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

1. 低耦合;

2. 可重用性;

3. 開發(fā)與設(shè)計工作可分離;

4. 可測試性。

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

（3）Angular實現(xiàn)了聲明式界面——Angular更清晰地界定了一個Web應(yīng)用的組成部分;

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

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

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

3 ?基于Ionic跨平臺App的實現(xiàn)

方案為Hybrid App開發(fā)方式。使用Ionic框架實現(xiàn)系統(tǒng)UI，對整體框架做以布局;通過MongoDB數(shù)據(jù)庫和后端數(shù)據(jù)進行交互，實現(xiàn)數(shù)據(jù)的實時更新;并用Cordova插件來實現(xiàn)底層API的硬件接口調(diào)用，使App與手機的硬件設(shè)備緊密結(jié)合起來[11]?；诖朔桨肝覀冮_發(fā)出一個無人超市購物App，下面簡要介紹該App的環(huán)境搭建和技術(shù)開發(fā)流程。

3.1 ?App開發(fā)環(huán)境的搭建

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

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

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

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

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

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

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

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

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

3.2 ?創(chuàng)建項目框架

方案開發(fā)是基于Ionic實現(xiàn)，使用CSS來布局和渲染界面以及設(shè)計組件等，在高性能完成方案的同時，要達到最優(yōu)的靈活性以及兼容性。接下來為初始化項目設(shè)置與目錄結(jié)構(gòu)。

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

（2）使用命令I(lǐng)onic start market tabs即可生成當(dāng)前應(yīng)用最多的三段式布局，并對其編入代碼即可實現(xiàn)前端所需頁面，Ionic的頂欄區(qū)總是位于設(shè)備屏幕頂部，底欄區(qū)總是位于設(shè)備屏幕底部，而內(nèi)容區(qū)則占據(jù)設(shè)備屏幕剩余空間。

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

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

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

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

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

4 ?總結(jié)

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

參考文獻

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

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

[3] 阮曉龍. HTTP協(xié)議狀態(tài)檢測與性能分析軟件的設(shè)計與實現(xiàn)[J]. 軟件， 2015， 36（07）： 136-141.

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

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

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

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

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

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

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

[11] 臧進進， 鄂海紅. 基于響應(yīng)式Web設(shè)計的網(wǎng)頁生成系統(tǒng)研究與實現(xiàn)[J]. 軟件， 2015， 36（6）： 37-41

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

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