Cordova 3.x 基础

离线API文档4.0.0的CHM版

简介

优点

Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势。

缺点

依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能。

同类比较

目前国内外的Hybrid App开发框架很多,比较有代表的是国外的Cordova(aka PhoneGap)、Sencha TouchTitaniumIntel XDKRhoMobileXamarin等和国内的AppCanRexseexFace,而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调用方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容