基于Ionic的App跨平臺(tái)混合開(kāi)發(fā)技術(shù)的研究

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

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

關(guān)鍵詞： 跨平臺(tái);移動(dòng)App;混合開(kāi)發(fā);Ionic框架

中圖分類(lèi)號(hào)： TP311 ? ?文獻(xiàn)標(biāo)識(shí)碼： A ? ?DOI：10.3969/j.issn.1003-6970.2019.04.047

本文著錄格式：常振業(yè)，劉佳偉，閆茜茜，等. 基于Ionic的App跨平臺(tái)混合開(kāi)發(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 ?引言

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

1 ?Ionic簡(jiǎn)介

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

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

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

2.1 ?與Ionic交互的前端介紹

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

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

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

2.2 ?與Ionic交互的Angular框架簡(jiǎn)述

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

Angular有幾大特性[9]。分別有以下幾點(diǎn)：

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

1. 低耦合;

2. 可重用性;

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

4. 可測(cè)試性。

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

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

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

2.3 ?與Ionic交互的Cordova框架簡(jiǎn)述

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

3 ?基于Ionic跨平臺(tái)App的實(shí)現(xiàn)

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

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

在進(jìn)入編寫(xiě)前端App代碼之前，首先需要保證

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

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

（2）通過(guò)命令npm install安裝后端Node.js項(xiàng)目依賴(lài)的npm包;

（3）通過(guò)mongo啟動(dòng)MongoDB后臺(tái)服務(wù)進(jìn)程;

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

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

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

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

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

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

（1）使用Ionic CLI初始化項(xiàng)目目錄。

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

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

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

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

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

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

4 ?總結(jié)

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

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