简介
优点
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调用方法