基于Ionic框架的混合應用開發技術探究與實現

童茂林

摘 要：Ionic作為一個基于主流技術HTML5和AngularJS的快速應用開發工具，不僅技術先進而且開源免費，獲得了業內的廣泛認可。但是，由于Ionic的技術領先且更新太快，國內的初學者很難找到相關的中文資料。文章從Ionic的框架到開發過程，結合Cordova插件調用原生接口的實例，比較系統地簡述了Ionic框架的使用方法。

關鍵詞：Ionic框架；混合應用開發；跨平臺

借助政府推動的“大眾創新，萬眾創業”熱潮，企業和個人紛紛利用互聯網的優勢來改造傳統的行業，開發出了大量的移動應用[1]。但是，現在市場上智能手機的操作系統種類繁多，并且操作系統之間的不同導致了APP應用文件也是不兼容的，例如蘋果和谷歌推出的IOS和Android移動操作系統，都各自有指定的技術開發平臺和官方推薦的開發語言。分別在各個系統上開發應用無疑會大大增加開發商的成本，為了解決這一問題，人們提出了混合應用開發。

混合應用開發是指基本經過一次開發，然后通過打包工具適配輸出可以在多個移動操作系統流暢運行并能調用豐富的硬件設備功能的開發框架。為了實現各系統間的兼容，一般采用HTML5/CSS/JavaScript為主力開發語言，利用移動操作系統對Web技術的支持來執行代碼邏輯，使用開發環境提供的工具生成適合各操作系統平臺的安裝文件。

2015年5月12日Ionic正式發布并被認為是當前最成熟且有潛力的一款混合應用開發框架。它提供了很多實用且美觀的用戶界面（User Interface，UI）組件來幫助開發者快速開發強大的APP移動應用[2]。目前據Ionic網站的官方統計，已有超過140萬的APP應用是用Ionic框架開發的。

其具有以下的優勢：（1）相對的性能優勢。混合應用的運行速度一直沒有原生開發的程序運行流暢，所以運行速度一直都是評估混合應用開發框架優劣的重要標準。而Ionic編寫的應用在移動設備中運行流暢，表現卓越。（2）適合團隊協作。Ionic已經成為MVVM（Model-View-View Model，MVVM）前端框架AnjularJS的移動端標準解決方案。所以Ionic不僅適合個人快速開發，也適合團隊協作開發。（3）完整的社區生態。Ionic開發運營團隊提供了官方的網站http：//Ionic.io/discover可供讀者學習。對于有bug尚未解決的部分，官方文檔網站上都會及時提醒開發者避開雷區。

1 Ionic框架

1.1 Ionic組成

Ionic組成如圖1所示，可以看到Ionic可以分為黑色和白色兩個部分。大體上白色為底層部分，黑色為表現層。其中Cordova提供的是底層的硬件設備功能庫和APP的打包功能，需要用到各個系統的軟件開發工具包（Software Development Kit，SDK），例如Android SDK和IOS SDK。而Ionic JavaScript和Ionic CSS的主要職責是提供UI層功能。

為了便于團隊間合作開發大型的項目，Ionic又集成了Angular UI Router和AngularJS。最后為了提供給開發者一站式開發平臺，Ionic又集成了Cordova的構建打包功能，使開發者最終可以直接用Ionic CLI來調用Cordova的創建、編譯、打包等功能。

1.2 Ionic開發概述

使用Ionic開發移動端應用基本可以分為4個部分：用戶操作的界面、邏輯控制、調用系統原生接口和調試。

用戶操作的界面以超文本標記語言（HyperText Markup Language，HTML）和層疊樣式表（Cascading Style Sheets，CSS）開發為主，然后混合使用Ionic官網上自帶的UI框架和UI組件，更加方便的是使用第三方網站上用戶上傳的豐富的自定義UI框架。主要功能是實現移動客戶端所有的界面。

邏輯控制是基于AngularJS框架，采用傳統Javascript實現具體的代碼編寫，實現了控制、視圖和數據的分離，使代碼更加明朗，易于閱讀和修改。主要功能是控制界面的一些行為，如修改數據或者點擊按鈕后的反應等。

調用系統原生接口則是采用Cordova的插件和應用程序編程接口（Application Programming Interface，API）接口，但是官網上的接口遠遠不能滿足大多數用戶的要求，更多的是需要使用用戶的自定義接口，怎么使用自定義接口會在下文中介紹。主要功能是實現一些硬件接口的調用，如移動客戶端的相機、指南針和GPS等。

最后的調試階段一共有3種調試方式：在瀏覽器上調試、在移動設備上調試、使用瀏覽器連接設備調試，其中直接在瀏覽器上調試最為方便。

2 Ionic開發實現過程

2.1 Ionic開發環境

根據上一章節介紹，Ionic依賴于Cordova框架，此外還需要適配IOS和Android等操作系統平臺，因此在能夠使用Ionic開發APP之前，需要檢查是否完整地搭建好了開發環境。

需要安裝的內容以及版本如圖2所示。

如果是開發Android的APP，還需要安裝JDK和一些常用的Android SDK；如果是IOS平臺的APP，也需要安裝相應的開發環境和SDK。如果這些都安裝完成，就可以進行項目的開發了。

由于Ionic是開源項目，官方沒有提供專用的集成開發環境（Integrated Development Environment，IDE）供開發者使用，網上一些流行的開發工具如Sublime Text3和WebStorm等都很好用，其中Sublime Text3免費用戶更多，但是WebStorm穩定且界面美觀，本文使用的是WebStorm進行開發。

2.2 創建項目

Ionic官網提供了blank，sidemenu和tabs 3種模版，本文以sidemenu模版為例，創建一個項目名為“testApp”的應用，在命令行中輸入：

$ Ionic start testApp sidemenu

執行該條命令后，會從Ionic的官網上下載sidemenu模版的代碼到本機上，可以在創建該項目的位置找到模版的代碼。但是這些代碼只能在瀏覽器上運行，如果需要在手機上運行，還需要添加相應的平臺。

以Android系統為例，讓該模版運行在Android設備上，首先需要進入項目文件夾，然后添加平臺[3]：

$ Ionic platform add Android

最后在手機上運行：

$ Ionic run Android

2.3 Ionic項目目錄結構簡介

創建一個項目名為“testApp”的項目，目錄結構如圖3所示，下面將介紹重要的目錄與配置文件，了解這些對于未來的問題定位與應用定制是有助益的。

2.3.1 platforms文件夾

因為Ionic支持跨平臺運行，所以該文件夾下存放的是運行在各個平臺下的代碼，這些代碼經過打包后可以直接在設備上運行。需要注意的是，Ionic的代碼有兩種運行方式，一種是在命令行下運行整個Ionic項目，另一種是取出platforms下的代碼打包運行，但是在platforms下修改了代碼后，用Ionic命令行運行是未修改狀態，所以一般不會去修改platforms下面的代碼。

2.3.2 plugins文件夾

存儲插件的文件夾，這里的插件既可以存放Cordova的插件也可以存放開發者自己開發的插件，如何使用將在后文介紹。

2.3.3 res和resources文件夾

res文件夾存放Web端的一些圖片和音頻資源，resources文件夾下存放的是各個平臺的圖片和音頻資源。

2.3.4 www文件夾

該文件夾存放著Web端的代碼，index.html是程序的入口，Web端的開發工作也在該文件夾下進行。

2.4 項目調試

Ionic有兩種調試的方法，分別是在瀏覽器上調試和在手機設備上調試。

2.4.1 瀏覽器上調試

是Ionic專門提供的調試方法，非常方便，但是缺點是外部的Cordova接口有時候會顯示不出來，比如手機設備上的照相機接口等。進入項目所在文件夾，執行以下命令就可以實現瀏覽器上調試：

$ Ionic serve

以上面創建的testApp項目為例，執行命令后的效果如圖4所示。

執行完畢后，當修改www文件夾下面的代碼時，瀏覽器也會隨時更新，可以邊修改邊看修改的效果，調試的效率很高。

2.4.2 手機設備上調試

手機上調試可以發現所有的問題，功能非常強大，例如有時候在瀏覽器上調試沒有問題，但是手機上因為不同的版本導致了Web的內核不同，所以顯示不正常。但是缺點是調試的速度很慢，調試的效果比較依賴手機設備。在Android手機設備上調試則需要執行以下代碼：

$Ionic run Android

然后就會將程序打包成手機運行的Android安裝包（Android Package，APK）并在手機上直接運行。如果是IOS設備，則只需要將Android改成IOS即可。這種模式下調試時，每次修改代碼，都需要重新執行一遍上面的代碼。

3 Cordova插件

使用Ionic框架制作APP除了能使用瀏覽器引擎提供的HTML5的功能集以外，也包含了與手機硬件設備專有功能如攝像頭拍照、本地文件訪問、地理位置、陀螺儀、振動傳感器、推送緊密結合的無限可能。這種無限可能性是通過Cordova插件機制來實現的，本章將介紹如何查找與使用Codova插件以及由Ionic開發團隊包裝的ngCordova插件的使用。

3.1 cordova-plugin-battery-status插件使用示例

目前社區提供的Cordova插件數有上千個，支持各種設備平臺的各類硬件特性，讀者可以先到網站http：//cordova.apache.org/plugins/進行查詢。在找到Cordova插件后，可以直接點擊插件名，頁面會跳轉到該組件的npm頁面，該頁面一般會介紹所選插件的安裝方法和使用文檔。本小節將選擇cordova-plugin-battery-status示例講解如何使用一個Cordova插件[1]。

這個插件提供了一個實現舊版本的電池狀態事件API。其增加了以下3個事件 Window對象：

Batterystatus

Batterycritical

batterylow

應用程序可以使用Window.addEventListener附加一個事件偵聽器對任何上述事件之后 deviceready事件觸發。

3.1.1 安裝

首先通過運行安裝命令來安裝該插件：

$cordova plugin add cordova-plugin-battery-status

3.1.2 狀態對象

所有事件在這個插件返回一個對象有以下屬性。

（1）電量級別：電池充電百分比（0—100）。

（2）是否充電：一個布爾值來指示設備插入。

3.1.3 batterystatus事件

發生在電池充電至少1%的比例變化，或者當設備插入或拔插頭。返回一個對象包含電池的狀態。

例子：

Window.addEventListener（"batterystatus"， onBatteryStatus， false）；

function onBatteryStatus（status） {

alert（"電量級別： " + status.level +”%，充電狀態：”+（status.isPlugged？”是”：”否”））；

}

主要的電池狀態變更事件處理在回調函數onBatteryStatus中，傳入參數對象包含當前設備剩余電量級別和是否處于充電狀態。這些信息從標準的瀏覽器中是無法獲取的，而Cordova以JavaScript對象的形式使之在移動設備上成為可能。在真機上調試后顯示的手機電量和充電狀態如圖5所示。

4 結語

Ionic是一款基于HTML5/CSS 3/JavaScript的跨平臺開發框架，使用其進行開發的主要產品是用于界面結構的網頁視圖模版。定制后生成的層疊樣式表（Cascading Style Sheets，CSS）渲染文件和包含數據業務邏輯的JavaScript文件。為了能夠安裝在各個操作系統平臺上，它會調用底層的Cordova框架來打包成響應的安裝包文件[4]。配合AngularJS這個主流的前端開發框架，使開發人員不用從頭開始寫代碼，通過定制和修改擴展，能夠快速地將商業計劃變成可以運行的APP應用。