簡介
優點
Hybrid App介于Native App和Web App之間,它能兼顧Native App的良好用戶體驗及強大的功能并具有Web App跨平臺快速開發的優勢。
缺點
依賴于各平臺的WebView,WebView的性能好壞直接決定了Hybrid App的性能。
同類比較
目前國內外的Hybrid App開發框架很多,比較有代表的是國外的Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和國內的AppCan、Rexsee、xFace,而Dr. Dobb's Journal頒布的2014年度移動開發工具類Jolt大獎中PhoneGap和Titanium獲得Jolt生產力獎。Titanium應該屬于Web到Native的Converter,還有一種就是Native JavaScript的應用,比如Chrome Apps/Firefox OS/Windows 8 apps。 基于開源的Cordova,各大公司都推出了自己的產品,比如:Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。
安裝
安裝Ant
把%ANT_HOME%\bin加到Path環境變量中
安裝Android SDK
把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools加到Path環境變量中,不然會報"Error: An error occurred while listing Android targets"錯,并提前創建好一個AVD。
安裝Node.js
安裝Cordova CLI
'npm install -g cordova'
運行
創建project
cordova create myapp com.yourname.myapp MyApp
添加平臺支持
cordova platforms add android
cordova platforms ls
添加插件
cordova plugin add org.apache.cordova.device
cordova plugin ls
編譯代碼
cordova build android
運行
在模擬器上運行(前提是創建好AVD)
cordova emulate android
在瀏覽器運行
cordova serve android
通過USB直接安裝到真機
cordova run android
目錄結構
config.xml cordova的配置文件
hooks目錄
存放自定義cordova命令的腳本文件。每個project命令都可以定義before和after的Hook,比如:before_build、after_build。
這里提供了3個常用的Hook腳本:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/
merges目錄
存放各個平臺特殊的文件,會和www進行合并編譯,相同的文件merges下的文件優先。
platforms目錄
各個平臺的原生代碼工程,不要手動修改,因為在build的時候會被覆蓋。
plugins目錄
插件目錄(cordova提供的原生API也是以插件的形式提供的)。
www目錄
源代碼目錄,在cordova prepare的時候會被copy到各個平臺工程的assets\www目錄中。
其中index.html為應用的入口文件。
應用圖標icon和啟動頁面SplashScreen
在config.xml中配置<splash> 和 <icon>,具體可以參考官方文檔:Icons and Splash Screens
或本文來源
調試工具
哪個合適?待定,目前chrome已經夠用了
捕獲錯誤
需要注意的是,在Cordova的app中如果js執行失敗,前臺不會有任何提示(后臺會出log),所以很多時候點擊都沒有任何反應,那說明JS執行出錯了,把以下代碼加到index.html中,當應用發生JS錯誤的時候,會調用window的onerror方法從而顯示錯誤信息,從而捕獲JavaScript的Error提示用戶。
window.onerror = function(msg, url, line) {
var idx = url.lastIndexOf("/");
if(idx > -1) {
url = url.substring(idx+1);
}
alert("ERROR in " + url + " (line #" + line + "): " + msg);
return false;
};
deviceready事件
Cordova框架在讀入HTML5代碼之后,要進行HTML5和Native建立橋接,在未能完成這個橋接的初始的情況下,是不能調用Native功能的。在Cordova框架中,當這個橋接的初始化完成后,會調用他自身特有的事件,即deviceready事件。
所以首先應該在HTML中注冊deviceready的事件監聽,在它的CallBack函數中再去使用Cordova的功能。
document.addEventListener('deviceready', function () {
console.log('Device is Ready!');
// ....your code
}, false);
需要注意的是,deviceready事件是在每回讀入HTML的時候都會被調用,而不只是應用啟動時調用。
除了deviceready事件以外,Cordova應用在內部讀取HTML代碼的時候還會調用一些其他的事件。但這些并不是Cordova框架提供的事件,而是嵌入的Webview的瀏覽器Render引擎提供的。
DOMContentLoaded事件
頁面的DOM內容加載完成后即觸發,而無需等待其他資源(CSS、JS)的加載。
load事件
在DOMContentLoaded事件之后,其他資源加載完成后觸發。
所以,其實調用的順序是:DOMContentLoaded -> load -> deviceready
deviceready事件一定是在load事件之后,所以load事件的執行速度會影響到deviceready事件的調用。把一些不必要的資源可以在deviceready事件之后調用從而提高執行速度。
配置文件config.xml
在build工程的是時候,會看到“Generating config.xml from defaults for platform "android"”這樣的字樣,他會生成各個平臺的config.xml。
preference:
選項設置。應用運行時的一些參數,根據平臺設置的內容不同。
Android設置
iOS設置
access:
域限制設置。應用中如果讀取其他域中的HTML文件,而該文件中如果使用了cordova.js,那么他就能訪問手機的本地功能。
**feature: **
應用中使用了哪些Native功能,Cordova在運行時會掃描feature屬性就知道哪些Plugin是有效的。在執行cordova plugin add的時候會自動添加feature。
**content: **
應用的入口文件。默認是index.html。
Native API
移動設備的Hardware接口包括:Accelerometer、Camera、Capture、Compass、Connection、Contacts、Device、Native Events、File、Geolocation、Notification、Storage、Gestures/Multitouch、Messages/Telephone、Bluetooth、NFC、Vibration。
例子列舉一下常用的API調用方法