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

薛君

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

【關鍵詞】操作系統Cordova可移植APP

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

1 跨平臺技術框架的設計

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

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

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

2 屏蔽平臺差異的設計

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

本設計中Cordova最上層運行基于Ionic框架的程序由JavaScript語言實現，并需要運行在游覽器環境中。Cordova為在Android平臺運行程序提供WebView的游覽器環境，而為在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;”便可實現。

3 應用界面開發框架設計

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

創建程序框架主要包含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指令創建。