基于Ionic和Cordova的跨平臺移植APP的設計開發(fā)

薛君

摘要??? 文章研究一種在不同操作系統(tǒng)平臺間可自由移植APP的設計與實現(xiàn)方法。該方法綜合利用驅動PhoneGap的核心引擎Cordova和Ionic開發(fā)框架，設計搭建屏蔽多操作平臺差異性的開發(fā)平臺，使得APP的開發(fā)過程不再局限于操作平臺的技術限制，降低當今市場上針對不同操作系統(tǒng)需要不同開發(fā)環(huán)境下重復設計APP的復雜性。

【關鍵詞】操作系統(tǒng)Cordova可移植APP

隨著移動互聯(lián)網的蓬勃發(fā)展，當今社會對智能電子產品的依賴感日益強烈，而APP作為為用戶提供豐富使用體驗的主要手段，APP在智能終端產品中的覆蓋率持續(xù)飛速增長。但市場上的智能產品所依托的運行平臺并不唯一，市場份額占據最大的主要集中在蘋果公司的IOS系統(tǒng)、谷歌公司的Android（安卓）系統(tǒng)和微軟公司的Windows Universal。然而，不同開發(fā)環(huán)境下開發(fā)的APP軟件在運行時需要有其相應的操作系統(tǒng)，當前的APP技術開發(fā)仍需針對不同的平臺進行不同技術的應用程序開發(fā)工作，即適用IOS平臺的APP需在Xcode中使用Swift語言開發(fā)IOS應用，適用Android平臺的APP在Android Studio中使用Java語言開發(fā)Android應用，而適用Windows Universal平臺的APP又需在Visual studio中使用.NET語言開發(fā)Windows應用。故同一功能APP的面世需要開發(fā)者針對三種不同主流平臺進行三種開發(fā)平臺下的設計工作，此對程序開發(fā)人員而言存在工作量大，實現(xiàn)時間長，技術復雜等缺點，于是設計一種跨平臺的應用即能夠同時適用在ios系統(tǒng)、Android系統(tǒng)和Windows Universal上運行的需求便十分迫切。本文針對以上問題，設計一種基于Ionic和Cordova聯(lián)合開發(fā)的技術框架，該技術框架可不受限于APP開發(fā)過程中不同操作平臺之間的技術壁壘。

1 跨平臺技術框架的設計

Ionic作為基于HTML5創(chuàng)建類似于手機平臺原生應用的開發(fā)框架，專注于用Web開發(fā)技術，其綁定了AngularJS和Sass。該框架從Web角度開發(fā)手機應用，基于PhoneGap編譯平臺，實現(xiàn)編譯各個平臺的應用程序。本設計將Ionic開發(fā)框架作為技術框架的最上層，

借助Ionic定制Android和IOS環(huán)境的插件，并調用其提供的CSS組件和JavaScriptUI庫，為應用提供編寫統(tǒng)一界面的功能，此過程中同時集成Angular框架。繼而在Ionic開發(fā)框架下用JavaScript語言實現(xiàn)程序代碼的編寫。

同時，由于驅動PhoneGap的核心引擎Cordova能夠提供一組設備相關的API，而通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。因此，本設計利用Cordova屏蔽Android平臺WebView與IOS平臺WKWebView兩者平臺之間的差異，為上層應用提供統(tǒng)一的JavaScript運行環(huán)境，該應用生成的技術框架邏輯結構如圖1所示。

2 屏蔽平臺差異的設計

由于Cordova支持多種移動操作系統(tǒng)，如：IOS、Android、ubuntu phone os、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian，并提供統(tǒng)一的JavaScript類庫，且為這些類庫所用的設備相關的原生后臺代碼。基于Cordova的這些優(yōu)點，本設計采用Cordova進行平臺間技開發(fā)環(huán)境差異性的屏蔽，使其可同時支持主流移動平臺：Android、IOS、Windows，并提供統(tǒng)一硬件控制接口，編譯命令，簽名打包控制和為上層應用提供統(tǒng)一JavaScript運行環(huán)境。

本設計中Cordova最上層運行基于Ionic框架的程序由JavaScript語言實現(xiàn)，并需要運行在游覽器環(huán)境中。Cordova為在Android平臺運行程序提供WebView的游覽器環(huán)境，而為在IOS平臺運行程序提供的是WKWebView。

Cordova硬件控制接口是以插件方式提供，目前官方已提供插件包括：cordova-plugin-battery-status，cordova-plugin-camera，cordova-plugin-device，cordova-plugin-geolocation，cordova-plugin-media，cordova-plugin-network-information，Cordova Screen Orientation Plugin。

通過這些插件，可方便的控制設備攝像頭，播放視頻，控制屏幕方向，查詢電池信息，網絡信息和位置信息。而插件通過命令“cordova plugin add WifiWizard2”即可安裝在應用中。當其他程序需要調用該插件提供的接口時，只需在程序的JavaScript文件添加聲明“declare let WifiWizard2：any;”便可實現(xiàn)。

3 應用界面開發(fā)框架設計

Ionic是應用界面開發(fā)框架，它能夠提供功能強大的命令行、豐富的控件庫和更加便捷的Cordova接口調用。而由于Ionic命令行是基于Nodejs，因此安裝Ionic前需要先安裝Nodejs。在安裝完Nodejs后，需要使用命令“npm install–g ionic cordova”安裝Ionic和Cordova。繼而，使用命令“ionic start myNewProject”創(chuàng)建程序主要框架。

創(chuàng)建程序框架主要包含app.component.ts、app.html、app.module.ts、app.scss和main.ts。其中，main.ts和app.html分別是應用程序入口和應用界面，一般不需修改;app.module.ts會標記出應用界面模塊，服務者模塊和入口模塊;app.scss全局樣式文件，會應用到整個應用程序;app.moudule.ts中標記模塊包括頁面，服務者和指令等模塊，可通過ionic generator指令創(chuàng)建。