混合开发项目（cordova）中遇到的一些问题_Hazzy_新浪博客
混合开发项目（cordova）中遇到的一些问题
1、在调用外部资源的html文件中的
标签中要加入
type="text/javascript"charset="utf-8"src="cordova.js"&
以确保inappbrowser插件能够被完整调用，否则会出现底部返回按钮无法出现的情况​
2、CDVUIWebViewDelegate.m​文件中有一个方法：-
(void)webView:(UIWebView*)webView
didFailLoadWithError:(NSError*)error，在这个方法的最开头要加入&
&&if([error
NSURLErrorCancelled)&
否则inaoobroswer插件无法​使用，即出现“NSURLErrorDomain”error&-999。该错误的意思是在未完成调用一个网络资源时，同时调用了另一个网络资源。
3、在config.xml文件中加入href="*"
/&（即将任何外部资源放入白名单中），就可以利用inappbrowser插件调用外部资源了。（暂时觉得其他的白名单命令没什么用，比如origin="*"
&&href="http:/*"
4、用cordova创建文件不会出现网络适配问题，但是用phonegap创建的话会出现。解决方法：在info.plist文件中，添加App
Transport Security Settings​，在下拉箭头冲下的情况下，创建Allow
Arbitrary Loads，并将该项的value设为YES。
ps：应该还有一些问题，但是我不记得了，如果有人看到这篇文章并觉得有用的话，并且如果你还有问题，欢迎和我讨论。谢谢。​
博客等级：
博客积分：0
博客访问：575
关注人气：0
荣誉徽章：1050人阅读
WebApp（5）
本文不介绍该插件的使用org.apache.cordova.inappbrowser,可以自行参考官方文档http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser。
本文介绍自己的特殊应用
& 1、开发环境：sencha touch
& 要求在web app中能够呈现复杂格式的工程报表,例如如下:
& & 2、要求能够自由缩放先写报表(双击实现放大缩小)
& & 3、填写完成的数据要进入sqlite
& 解决思路：
& & 1、采用cordova插件&org.apache.cordova.inappbrowser&,地址：http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser
& & 2、在sencha的panel中打开一个新的浏览器,在新浏览器中加载报表文件(html格式的)
& & 3、在panel中监听loadstop事件(插件提供的监听浏览器加载完成的事件)
& & 4、填写报表，将报表数据返回给父窗口。
& & 问题出在如何将浏览器上填写的报表数据返回给父窗口，采用过一下思路：
& & cookie:排除,因为,存量有限,我的信息量很大。
& & sessionStorage:排除,webapp不同于pc,不能共享
& & localStorage:排除,webapp不同于pc,出现问题,未能排除
& &最后采用如下思路解决：
& &填写完成后,必须刷新子窗口才能再次激活父窗口监听的loadstop事件,故子窗口填写完后,采用data:uri这种技术刷新当前浏览器,并将填写的值带入刷新的页面。
& &代码如下:
& &sencha panel部分：
& &app/view/Main.js:
& &report.htm页面关键代码：
& &注意事项:
& &1、report.htm属于自己的资源文件,对sencha而言需要单独添加到app.json配置文件中
& & &* Extra resources to be copied along when build
& & &resources&: [
& & & & &resources/images&,
& & & & &resources/icons&,
& & & & &resources/startup&,
&report.htm&,
&result.htm&
& &2、data:uri的中文乱码问题:
& &&Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入.
& &&目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/base64,base64编码的Javascript代码
data:image/base64,base64编码的gif图片数据
data:image/base64,base64编码的png图片数据
data:image/base64,base64编码的jpeg图片数据
data:image/x-base64,base64编码的icon图片数据
& &网上有很多关键data uri schema的基础知识,自行查阅。
& &______________________________________________________
中文乱码处理看下面()
在RFC中，完整的语法定义如下。
dataurl := “data:” [ mediatype ] [ &;base64& ] “,” data
mediatype := [ type &/& subtype ] *( “;” parameter )
data := *urlchar
parameter := attribute “=” value
urlchar指的就是一般url中允许的字符，有些字符需要转义，
parameter可以对mediatype进行属性的扩展，常见的是charset，用来定义编码格式，在多语言情况下需要用到。
例如下面的例子。
data:text/charset=UTF-8;base64,5L2g5aW977yM5Lit5paH77yB
这个例子会显示出”你好，中文！”。如果吧charset部分去掉，就会显示乱码。
代码下载地址:http://download.csdn.net/download/jiangtongcn/8501165
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：257761次
积分：4583
积分：4583
排名：第5282名
原创：195篇
转载：35篇
评论：42条
(1)(1)(1)(1)(1)(1)(2)(1)(1)(2)(1)(1)(1)(7)(1)(3)(2)(3)(9)(5)(1)(3)(5)(2)(4)(9)(6)(2)(12)(6)(4)(12)(4)(4)(11)(10)(11)(37)(3)(10)(1)(2)(3)(5)(1)(5)(12)cordova 使用指南 - 简书
cordova 使用指南
Cordova 使用指南
Cordova 版本
参考资料三、
安装以及运行Cordova
安装node.js安装node.js确保 输入node –v 后可以显示node.js 的版本信息。如果你输入的node.js 确提示“不是内部或外部命令”，很有可能是是你的环境变量配置错误。(1)
安装正确安装将会看到的结果。注意：不是在node.js command prompt 中输入查看版本的命令，而是在CMD 中。
另附 node.js 的环境变量截图。注意：我是在将node.js 安装在D盘的。第一张图是我的环境变量，第二张图是我安装nodeJs 的目录和文件。
安装npm当安装好node.js后NPM 也应该被安装好了。由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
ANDROID_SDK_HOME 环境变量配置
ANDROID_SDK_HOME 环境变量，变量值为你的SDK。
另附：SDK 下载地址
由于国内会出现无法更新的SDK 的问题，顺便给你一个镜像网站和使用方法。
安装cordova在你的CMD 中输入 npm install –g cordova 然后cordova 会自动安装的。由于国内环境，这个安装过程可能会很漫长，很有可能出现网络中断的现象，重复输入命令重新安装就好了。
安装成功后输入一下版本输入一下查看cordova 版本信息的命令。出现下面的界面就代表你安装成功了。
让我们创建一个cordova 应用程序吧。
创建cordova 项目在合适的文件夹内输入：cordova create YANG com.example.YANG YYYANG::::::: 这个是我们创建的文件夹的名字com.example.YANG:::::::::::::::::::: 这个是我们创建的apk 的包名YY:::::::::::::::::::::::: 这个是 应用的名字以上三条都属于我个人的理解，若错了，别见怪。附图： 没有报错，创建成功了。
为cordova 添加平台Cordova 可不仅仅创建android \Ios 的应用程序，还可以创建windows\Linux 等平台的应用程序哦。
添加一个android 平台。(1)
进入到我们刚刚创建的cordoav 文件中 命令：cd YANG(2)
添加平台 命令： cordova platform add android –save若出现下列信息证明，这一步操作正确啦。
！！！！！但是对于第一次安装使用cordova 的人来说，这一步可不是那么容易走的通的。你可能遇到的第一个问题是可能会下载很多的包文件，在你第一次运行android平台的时候，cordova 会向服务器请求很多的数据包，由于国内网络环境这个过程可能会的非常非常的慢，总之你就安心等着他下载好，安装好就好了。要有耐心。这个错误会报 请求网络超时的错误。
第二个问题是你的SDK 缺少一个必要文件。这个时候你用cordova requirements 这个命令查看一下。下面的信息是我的，我的都是安装好的了，要是缺少哪些东西控制台会给出提示的，到时候去你的ANDROID SDK 那边儿更新一下需要的东西就行了。
运行打包以及运行程序。添加好平台之后，我们就可以打包以及运行我们的程序啦。
Cordova 打包APK
命令：cordova build android
在打包之前我们首先看一下我们创建的cordova 项目的目录：
上图为cordova 项目的文件目录，主要几个文件：a)
www ::::::::
这个文件夹主要存放的是html 页面，注意index.html 引用的cordova.js
这个文件很重要，不要丢失。b)
platforms :::::::
这个文件夹 主要放的平台的信息的，当我们打完包后，apk 就在platforms\android\build\outputs\apk 这个目录下。c)
plugins :::::::::::
这个文件夹 主要放插件的 例如打开摄像机，获取电话簿等等。d)
config,xml :::::: 这个主要配置安卓一些系统信息的。
看到上图的信息说明打包成功。去目录里去找你的apk 吧。然后安装在手机上试试。
运行当手机连接到电脑上的时候，我们可以直接 run 命令，将apk 安装到你的手机上。 命令： cordova run android注意：你的手机要打开开发者模式，并且在cmd 输入adb devices 可以看到你的设备。
现在开始运行吧。
现在可以在你的手机查看你的应用程序啦，虽然只有一个页面，但是毕竟成功了呀。
Cordova 插件使用
添加一个插件
命令：cordova plugin add cordova-plugin-camera
查看已安装的插件 命令：cordova plugin ls
使用插件注意：老版本和新版的的cordova 在这个地方是有区别的啊！老版本是手动的添加插件的，但是新版的cordova 已经帮我们做了这一块了，所以说老版本的程序用新版本的cordova 重新进行打包，会出现插件失灵的情况。我们来使用一个插件功能吧，打开摄像机。
&!DOCTYPEhtml&
&title&Capture Photo&/title&
&script type="text/javascript"charset="utf-8" src="cordova.js"&&/script&
&script type="text/javascript"charset="utf-8"&
var pictureS
// picture source
var destinationT // sets the formatof returned value
// Wait for device API libraries toload
document.addEventListener("deviceready", onDeviceReady,false);
// device APIs are available
function onDeviceReady() {
pictureSource =navigator.camera.PictureSourceT
destinationType =navigator.camera.DestinationT
// Called when a photo is successfullyretrieved
function onPhotoDataSuccess(imageData){
// Uncomment to view thebase64-encoded image data
console.log(imageData);
// Get image handle
var smallImage =document.getElementById('smallImage');
// Unhide image elements
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used toresize the image
smallImage.src ="data:image/base64," + imageD
// Called when a photo is successfullyretrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image fileURI
console.log(imageURI);
// Get image handle
var largeImage =document.getElementById('largeImage');
// Unhide image elements
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used toresize the image
largeImage.src = imageURI;
// A button will call this function
function capturePhoto() {
// Take picture using device cameraand retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType:destinationType.DATA_URL
// A button will call thisfunction
function capturePhotoEdit() {
// Take picture using devicecamera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType:destinationType.DATA_URL
// A button will call thisfunction
function getPhoto(source) {
// Retrieve image file locationfrom specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType:destinationType.FILE_URI,
sourceType: source
// Called if something badhappens.
function onFail(message) {
alert('Failed because: ' +message);
&buttononclick="capturePhoto();"&Capture Photo&/button&
&buttononclick="capturePhotoEdit();"&Capture EditablePhoto&/button&
&buttononclick="getPhoto(pictureSource.PHOTOLIBRARY);"&From PhotoLibrary&/button&
&buttononclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);"&From PhotoAlbum&/button&
&imgstyle="display:width:60height:60"id="smallImage" src=""/&
&imgstyle="display:" id="largeImage" src=""/&
将以上的html 代码，替换你的index.html 代码。然后重新run/build 一下，试试新的apk 是不是可以调用你的相机了呢。
Debug 程序（自行整理的）
首先打开你的app。
运行如下命令
现在进入了我手机的shell 窗口，命令窗口。
运行 logcat –c
这个是清除之前的log信息。
运行 logcat *:D
这是查看当前系统所有的日志信息，信息量很大。
运行 logcat *: D | grep www.example.YANG
这个这是查 指定app 的日志。Gerp 后面跟的你app 的包名。
8.常用命令
一.插件相关常用命令
1，查看所有已经安装的插件
cordova plugin ls
2，安装插件（以camera插件为例）
cordova plugin add cordova-plugin-camera
3，删除插件（以camera插件为例）
cordova plugin rm cordova-plugin-camera
4，更新插件
cordova plugin update
二，常用的Cordova插件
1，Console（调试控制台）
让程序可以在控制台中打印输出日志。
cordova plugin add cordova-plugin-console
2，Connection（网络连接）
用来判断网络连接类型（2G、3G、4G、Wifi、无连接等）
cordova plugin add cordova-plugin-network-information
3，Device（设备）
获取一些设备信息。
cordova plugin add cordova-plugin-device
4，Hardware Nofifications（硬件消息提醒）
让设备蜂鸣或振动。
cordova plugin add cordova-plugin-vibration
5，Visual Notification（可视化消息提醒）
不同于js的alert()、confirm()和prompt()方法是同步的。Cordova的alert()、confirm()和prompt()方法是异步的，并且对显示内容有更大的控制权限。
cordova plugin add cordova-plugin-dialogs
6，Battery（电池）
可以获取电池状态信息。
cordova plugin add cordova-plugin-battery-status
7，Accelerometer(加速计)
让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。
cordova plugin add cordova-plugin-device-motion
8，Compass(指南针)
可以让开发者读取移动设备的朝向。
cordova plugin add cordova-plugin-device-orientation
9，Geolocation(地理定位)
让应用判断设备的物理位置。
cordova plugin add cordova-plugin-geolocation
10，Camera(相机)
用相机获取图像。
cordova plugin add cordova-plugin-camera
11，Media Capture （媒体捕获）
与Camera API相比，不仅能获取图像，还可以录视频或者录音。
cordova plugin add cordova-plugin-media-capture
12，Globalization(全球化)
允许应用查询操作系统的当前设置，判断用户使用的语言。
cordova plugin add cordova-plugin-globalization
13，Contacts（联系人）
读取联系人列表并在应用中使用联系人数据，或使用应用数据向联系人列表中写新的联系人。
cordova plugin add cordova-plugin-contacts
14，Media（播放/记录媒体文件）
让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。
cordova plugin add cordova-plugin-media
15，InAppBrowser（内置浏览器）
允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理，但有时候需要不同的用户体验，InAppBrowser加载网页内容，应用用户可以更方便的直接返回到主应用。
cordova plugin add cordova-plugin-inappbrowser
16，Splashscreen（闪屏）
用来在Cordova应用启动时显示自定义的闪屏。
cordova plugin add cordova-plugin-splashscreen
17，exitApp（退出应用）
让 Android 或者 Windows Phone 8 上的APP关闭退出（iOS系统不支持）。
cordova plugin add cordova-plugin-exitapp
18，barcodeScanner（条形码/二维码扫描）
不仅可以通过摄像头识别二维码/条形码，还能生成二维码。
cordova plugin add cordova-plugin-barcodescanner
19，file（文件访问操作类）
提供对设备上的文件进行读取和写入的功能支持。
cordova plugin add cordova-plugin-file
20，fileTransfer（文件传输）
实现文件上传、下载及共享等功能。
cordova plugin add cordova-plugin-file-transfer
常用命令来自：/blog/cache/detail_1158.html使用Cordova API开发(下) - 推酷
使用Cordova API开发(下)
本文承接上篇《使用Cordova API开发（上）》。文中示例代码见篇尾链接。
Cordova提供了一些与常见的智能手机硬件交互的API，这让Cordova应用可以以某种方式与外部世界交互。
对这些API Cordova文档没有专门分组显示，我们把它们放在一起了解，包括：
Accelerometer(加速度计)
Camera(相机)
Capture(采集)
Compass(指南针)
Geolocation(地理定位)
Acclerometer , Compass ， Geolocation API以相同的方式工作。应用可以测量某段距离的当前值，或者设置监视器，这样可以测量一段时间内的位移。 Camera 和 Capture API使用设备相机抓取图像，但它们操作不一样， Capture API还可以录制视频和和音频。
World Wide Web组织对这些功能做了规范定义。 Compass API规范定义在
， Geolocation API规范在
， Device Orientation 规范定义在
会发现一些Cordova API和W3C规范的很接近，另外一些则不然。例如，Cordova Compass API有一个 getCurrentHead 方法，而W3C规范使用 getCurrentOrientation ,可以预见未来Cordova API会逐渐采用标准定义，应该时刻关注这种改进。下面简单说一点使用方法，其中一些API支持许多选项，要深入全面了解这部分内容可参考相关书籍。
Accelerometer(加速计)
Cordova Accelerometer API让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。使用这个API前要安装插件，使用以下命令：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git
API公开了三个方法：
accelerometer.getCurrentAcceleration
accelerometer.watchAcceleration
accelerometer.clearWidth
getCurrentAcceleration 方法让应用查询设备当前方向。 watchAcceleration 和 clearWatch 方法用于捕获一段时间内在某个设备方向的位移，重复地在某个时间间隔上用加加速计测量。
在应用中这么写测量设备当前方向：
navigator.accelerometer.getCurrentAcceleration(onSuccess, onFailure)
参数是两个函数名， onSuccess 在测量成功时执行而 onFailure 在出错时执行，如下例定义两个函数：
function onSuccess(res) {
x = res.x;
y = res.y;
z = res.z;
var d = new Date(res.timestamp);
timestamp = d.toLocaleString();
function onFailure() {
alert('I have no idea why this failed, but it did.');
onSuccess 函数传递了一个表示加速计测量值各个不同部分，X、Y和Z表示设备在三维坐标系统中的方向， timestamp 值表示日期/时间，它由测量值生成。显示在桌面上，生成图像如下图。
一些Android设备如果平放在桌面上，加速计大致返回这样的值：X:0, Y:0, Z:10，翻转后它就位于现在位置的左边，值就调整为X:10,Y:0,Z:0，把设备从底边立起来，置变为X:0, Y:10, Z:0，从顶边立起来，置变为X:0, Y:-10, Z:0。应用就使用这样的值判断用户怎么拿设备，多用在游戏和交互性的应用上。
但是Cordova不会在错误发生并调用 onFailure 函数时提供信息，像可以识别错误来源的错误代码或错误信息。但在调用加速计接口时如果失败，很有可能是设备就没有加速计。
getCurrentAcceleration 用来在快速检查设备方向，比如在游戏中想在一段时间监视方向， getCurrentAcceleration 就不好用了，而应该写代码定期检查，为了方便开发者解决这种问题，Cordova API允许开发者通过监视加速计定期的读取，使用 accelerometer.watchAcceleration 方法。应用使用如下代码设置监听：
var options = {frequency:1000};
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onFailure, options);
onSuccess 和 onFailure 用法和上例相同， options 对象以毫秒级定义了加速计测量的频率。如果每半秒测量一次， frenquency 设置成500。
示例中把 watchAcceleration 函数的调用结果赋给了 watchID 变量，用来在后边取消监视：
navigator.accelerometer.clearWatch(watchID);
这样应用会每秒读一次加速计，并把值传给 onSuccess 函数来处理结果。
Compass(指南针)
Compass API可以让开发者读取移动设备的朝向。这个API的使用和 Accelerometer API基本一样，既可以一次查找朝向值也可以定义个监视器定期测量朝向值。两者主要不同在于上例中的 results 和 options 。
要使应用能够读朝向值首先要安装 orientation 插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git
和 Compass API提供了也三个方法：
compass.getCurrentHeading
compass.watchHeading
compass.clearWatch
getCurrentHeading 方法允许应用查询 compass 的当前方向。 watchHeading 和 clearWatch 方法用来在一段时间内获得compass朝向，即每隔一段时间从compass获得测量结果。
这样获得compass测量结果：
<pass.getCurrentHeading(onSuccess, onFailure);
参数是两个函数名： onSuccess 在成功测量朝向值时执行，发生错误时执行 onFailure 。可以像下面这样使用：
function onSuccess(res) {
magneticHeading = res.magneticH
trueHeading = res.trueH
headingAccuracy = res.headingA
var d = new Date(res.timestamp);
timestamp = d.toLocaleString();
function onFailure(err) {
alert(&Error: & + err.code);
heading 对象(即例子中的 res )返回给 onSuccess 函数，它的属性值如下表：
magneticHeading
以从0到359的度数表示compass的朝向值
trueHeading
compass相对于北极的朝向值，范围从0到259度。负值表示真实的朝向值不能确定
headingAccuracy
用度数表示磁极朝向和真实朝向值的不同
朝向值测量的日期和时间(从日午夜开始的毫秒数)
错误发生时， onFailure 函数传入错误代码可以判断错误的原因。可能的值有PASS_INTERNAL_ERR和PASS_NOT_SUPPORTED。
使用 compass.watchHeading ，使用如下代码设置监听：
var options = {frequency:1000};
watchID = pass.watchHeading(onSuccess, onFailure, options);
各参数的说明和 accelerator 一样，还可以指定 filter 值，用来定义最小度数值变化，它一定在监听触发前调用。因为compass值变化频繁，可能需要设置 filter 减少朝向值测量的次数，这样可以让应用只回应变化大的朝向。
代码中，调用 watchHeading 的结果赋给了变量 watchID ，用来取消监听，用法如下：
<pass.clearWatch(watchID);
上面的代码应用会每隔1秒读compass并把值传给 onSuccess 函数。
Geolocation(地理定位)
Cordova Geolocation API让应用判断设备的物理位置。它基于W3C的Geolocation API，工作方式和 Accelerometer 及 Compass 一样。既可以查找一次位置也可以设置监听定期计算位置，唯一不同的是传递给 onSuccess 函数的 results 对象，以及创建 watch 时用到的 option 。
使用前安装 Geolocation 插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
Geoloaction API提供3个方法：
compass.getCurrentPosition
compass.watchPosition
compass.clearWatch
getCurrentPosition 方法让应用判断设备当前位置， watchPosition 和 clearWatch 方法允许应用定期计算设备位置。API返回了一个位置对象，包括 coordinates 和 timestamp 属性。 timestamp 见上面相关说明。 coordinates 属性包括下表属性：
用米做单位的经度和纬度坐标的精确度
用米做单位的设备的海拔高度
altitudeAccuracy
用米做单位的海拔高度坐标的精度
设备上用度数为单位的朝向(移动的方向)
用小数度数表示的位置的纬度部分
longtitude
用小数度数表示的位置的经度部分
设备以米为单位的每秒的速度
Camera(相机)
Cordova框架提供了两个用于访问设备相机的API，一个是Camera API，它使用开发者能直接访问本地相机的API，另一个是Media Capture API。两者的不同是Camera API只用相机获取图像，而Media Capture API不仅能获取图像，还可以录视频或者录音。Capture API将在接下来介绍。
首先是安装 Camera 插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
获得相机图像很简单，只需要这样调用：
navigator.camera.getPicture(onCameraSuccess, onCameraError);
下面用一个简单的相机应用(源码见附件)说明展示API如何工作,应用首先调用 getPicture ，然后把相机返回的数据显示出来，应用界面如下图：
点&Take Photo&按钮，打开设备本地相机应用，操作并照像。可以看到没有取消照像的方法，即使不照也要点一下拍照，然后在下一步取消。
选择保存图像并关闭设备的相机应用后，会把像片的信息返回给Cordova应用，如下图所示。例子中没有告诉 getPicture 任何关于怎样拍照或者处理的信息，API将使用默认设置并简单的返回一个图像文件的URI。这样Cordova应用可以使用URI访问文件，并把它显示在屏幕上、上传到服务器或其他你想做的任何事。如果上一步选择取消，API会向应用返回取消的错误信息。
以上只是camera API的默认操作，也可以调用 getPicture 方法并传入一个选项对象，它告诉API拍什么样的照片及怎样去拍。下面是调用 getPicture 方法的另一种调用方式：
navigator.camera.getPicture(onCameraSuccess, onCameraError, cameraOptions);
cameraOptions 是一个js对象，cordova文档中写些起是这样的：
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWdith : 100,
targetHeight : 100,
popoverOptions : CameraPopoverOptions,
saveToPhotoAlbum : false
有些平台可能会忽略其中一些属性，用之前要检查Cordova文档的 quirks 部分。
开发者可能会用一些或全部属性控制拍照过程。每个选项描述如下：
布尔值，照片在返回Cordova应用之前用户是否可以编辑，但并不是所有移动平台都支持。
cameraDirection
数值型，规定使用前面或后面的相机。*navigator.camera.Direction.FRONT*和*navigator.camera.Direction.BACK*分别指前面和后面。
correctOrientation
布尔值，告诉API在拍照时旋转图像来调整设备方向。
destinationType
数值型，规定API怎样返回照片。*Camera.DestinationType.FILE_URI*是默认选项前边提到过，*Camera.DestinationType.DATA_URL*，返回用base-64编码的图像，*Camera.DestinationType.NATIVE_URI*, 返回图像的本地的URI。注意使用*DATA_URL*，因为js不处理用字符编码的图像，可能会使用js应用崩溃。
encodingType
数值型，指明图像输出格式。*Camera.EncodingType.JPEG*让API返回JPEG图像。
数值型，当*SoruceType*设置为*PHOTOLIBRARY*或*SAVEDPHOTOALBUM*，规定了用户可选择什么类型的文件。使用*Camera.MediaType.PICTURE*时只允许选择图像，*Camera.MediaType.VIDEO*允许选择视频文件，*Camera.MediaType.ALLMEDIA*允许选择任何支持的媒体文件。选择*VIDEO*时，API只返回文件的URI；如果是图像会返回信息，它的格式请参考*destinationType*。
数值型，用从0到100%的百分比来控制图像的质量，100表示不经过压缩。
saveToPhotoAlbum
布尔值，指示API在拍照后把图像保存到设备照片相册中。
sourceType
数值型，指明图像来源。可能值有*Camera.PictureSourceType.CAMERA*(默认值)，或者*Camera.PictureSourceType.PHOTOLIBRARY*、*Camera.PictureSourceType.SAVEDPHOTOALBUM*。选项的行为会根据应用运行的平台不同而不同，像有些平台没有*photo libraries*或*photo albums*。
targetHeight
数值型，用来设定获得的图像的高度。
targetWidth
数值型，用来设定获得的图像的宽。
用户在返回给Cordova应用的是一张图像，但可能拍了不止一张。Cordova有一个 cleanup 方法用来清理这种图像。调用这个方法并且传入成功和失败的回调函数名作为参数，如下：
navigator.camera.cleanup(onCameraCleanupSuccess, onCameraCleanupError);
录制多媒体文件
Capture API和Camera API类似，可以用来拍照也可以录相或录音。它原来基于W3C Media Capture API，但开发团队没有实现API的一些功能。并且W3C也停止这个标准的工作转而关注于完全不一样的Media Capture and Streams API。首先安装Capture API：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git
API提供如下方法：
* capture.captureAudio
* capture.captureImage
* capture.captureVideo
* MediaFile.getFormData
前三个方法用法完全一样。 getFormData 获得关于媒体文件的信息，但由于移动设备的限制，通过这种方法获得的信息非常有限。
以三个方法之一为例，使用如下方法声明使用API：
navigator.device.capture.captureAudio(onSuccess, onFailure, options);
onSucess 和 onFailure 方法在录制成功或失败后调用。 onSuccess 函数传入了一个 fileList 对象，可以迭代访问指向每个录制的文件的路径，如下面代码所示：
function onSuccess(fileList) {
var len, I,
len = fileList.
if (len & 0) {
for (i = 0, i & i+=1) {
path = fileList[i].fullP
// Do something with the file here
alert(&Error:No files returned.&);
有了媒体文件的路径，就可以向服务器上传文件，在应用中播放或显示，等等。
调用 onFailure 函数时会传入 error 对象，用来查找错误代码，如下面代码所示:
var onError = function(error) {
alert('Capture error: ' + error.code);
可能的错误代码有：
CaptureError.CAPTURE_INTERNAL_ERR
CaptureError.CAPTURE_APPLICATION_BUSY
CaptureError.CAPTURE_INVALID_ARGUMENT
CaptureError.CAPTURE_NO_MEDIA_FILES
CaptureError.CAPTURE_NOT_SUPPORTED
可选的 options 参数控制要录制多少媒体文件，对音频文件有一个 duration 属性控制音频录制长度。
var options = { limit: 3, duration: 10};
有的平台上的一些 options 属性不可用，用之前要检查Cordova Capture API文档的 quirks 部分。
Globalization(全球化)
许多应用的用户是使用不同语言的人，如果应用受欢迎，不久就需要在多语言环境下使用。Globalization API使全球化更方便，它允许应用查询操作系统的当前设置。开发者通过这个API判断用户使用的语言，然后使用适当的语言加载内容，还使用API中的方法更好的显示日期、时间、数字和货币单位。首先安装：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
globalization 对象的方法的用法都类似，也是异步的，调用方法并传入成功和失败函数，像下面这样调用：
navigator.globalization.getPreferredLanguage(onGPLSuccess, onGPLFailure);
调用成功函数传了一个对象，应用用它查询一个或一些由方法返回的值。大多数原生方法，像前边的 getPreferredLanguage 方法，返回了一个像下面这样传递的字符串：
function onGPLSuccess(lang) {
alert(&Preferred language: & + lang.value);
这样当调用 getPreferredLanguage 成功时， onGPLSuccess 函数执行并显示如下图：
失败函数传入了一个 error 对象，用来查询判断错误代码和错误信息，如下面代码所示：
function onGPLFailure(err) {
alert(&Error: & + err.code + & - & + err.message);
可能的错误代码如下：
GlobalizationError.UNKNOWN_ERROR
GlobalizationError.FORMATTING_ERROR
GlobalizationError.PARSING_ERROR
GlobalizationError.PATTERN_ERROR
下面表格列出了所有Globalization API方法和传入方法的参数
dateToString
JS Date值，options
表示基于options格式化的日期的字符串值和用户当前的语言设置
getCurrencyPattern
描述货币格式的Pattern对象和一个基于用户当前语言设置的货币值部分
getDateNames
一个月和天的名字的数组，有长和短的版本，要看options和用户当前语言设置
getDatePattern
描述基于用户当前语言设置的日期格式的Pattern对象
getFirstDayOfWeek
表示基于当前用户语言设置的周第一天数值
getLocaleName
表示用户当前位置的字符串，用ISO 3166国家代码表示
getNumberPattern
描述基于用户当前语言设置的数值的格式的Pattern对象
getPreferredLanaguage
用户选用语言的字符串表示，使用ISO 639-1 双字母代码
isDayLightSavingsTie
表示白天可用时间是否有效的字符值
numberToString
Number, Options
表示使用options和用户偏好格式化的数值的字符值
stringToDate
String, Options
把一个日期字符串解析成若干基于options和用户偏好的单个部分/td&
stringToNumber
String, Options
把一个数值字符串解析成基于options和用户偏好的单个部分
从表中可以看到一些方法接受属性对象，让开发者控制方法操作。如，使用 dateToString 方法把日期对象转换成字符串，应用中可能会这么用：
var d = new Date();
navigator.globalization.dateToString(d, onSuccess, onFailure);
onSuccess 函数在日期转换完成后调用，传入一个可查询到显示结果的对象，如：
function onSuccess(res) {
alert(&Result: & + res.value);
dateToString 方法支持 options 参数，开发者用它改变输出格式，如：
var d = new Date();
var options = {
formateLength: 'short',
selector: 'date'
navigator.globalization.dateToString(d, onSuccess, onFailure, options);
上面例子中 options 对象定义了 formateLength 和 selector 属性，用来控制结果字符串长度和是否包括日期和(或)时间值。它返回了每个日期部分各自的属性对象：
&month&:7,
&second&:0,
&millisecond&:0,
&year&:2013,
&hour&:10,
&minute&:47
使用Contacts应用工作
Cordova Contacts API让开发者构建和通讯录或联系人应用交互的应用，它基于W3C Contacts API。它用于构建这样的应用：读取联系人列表并在应用中使用联系人数据，或使用应用数据向联系人列表中写新的联系人。
首先要安装Contacts插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
因为每个移动平台上联系人的功能都不同，Contacts API使用起来有些不一样，像Android设备上使用的联系人一些字段与在iOS上不一样。另外Contacts的实现与其他API还有些不同。
Contacts API有两个方法和一个 contacts 对象，方法用来创建新的 contacts 对象和在设备上查找联系人， contacts 对象表示设备上的联系人。
创建联系人使用API的 create 方法，如下：
var newContact = navigator.contacts.create();
和之前的API方法不一样，这个方法是同步的，没有提供 success 和 failure 回调函数。它并没有在设备联系人应用中创建联系人，只是创建了一个新的 contact 对象，上面代码创建了一个空的 contact 对象，直到使用 save 方法才会保存到联系人应用。
也可以在创建时填充 contact 对象，如下在对象中填充了一个 displayName 属性：
var newContact = navigator.contacts.create({&displayName&: &Zhang San&});
contact 对象包括以下属性：
addresses: 包括联系人所有不同地址的数组。
birthday: 联系人的生日。
categories: 包括所有与联系人相关的用户定义的分类的数组。
displayName: 联系人的显示名。
emails: 包括联系人所有邮件地址的数组。
id: 联系人的全局唯一标识符。
ims: 包括联系人所有的即时消息地址的数组。
nickname: 联系人的昵称。
note: 和联系人相关的记录。
organizations: 包括和联系人相关的所有的组织的数组。
phoneNumbers: 包括所有与联系人相关的所有电话号码的数组。
photos: 包括所有与联系人相关的图像的数组。
urls: 包括所有与联系人相关的网页的数组。
一些属性是其他属性的数组。如联系人常常会有两个或更多的邮件地址。
可以像上例一样在创建对象时填充 contact 对象，或者在创建后再填充对象的属性。如下：
var newContact = navigator.contacts.create();
var fullName = &Zhang San&;
newContact.displayName = fullN
newContact.nickName = &GouSheng&;
var tmpName = new ContactName();
tmpName.givenName = &San&;
tmpName.familyName = &Zhang&;
tmpName.formatted = fullN
newContact.name = tmpN
上面代码创建了一个新的contact对象，然后用值填充。其中填充了一个ContactName对象(Contacts API中定义的)，然后添加到 newContact 对象。ContactName对象包括以下属性：
familyName
honorificsSuffix
middleName
有许多不同的可以添加到联系人记录的对象类型和对象数组。关于支持的选项详情请参考API文档。
设定好 contact 对象属性后，必须调用 save 方法把改动添加到真实的联系人记录中：
newContact.save(onSuccess, onError);
和其他API一样 save 方法接受成功和失败函数作为参数，失败函数传入了一个 error 对象识别错误原因并做出相应的回应，如下：
function onError(err) {
console.log(&Error Saving Contact: & + err.code);
如果要操作现有的联系人，可以用API的 find 方法定位记录，如下：
navigator.contacts.find(contactFields, onSuccess, onError, options);
上面的代码的 contactFields 对象表示字段名数组，如下:
var contactFileds = [&displayName&, &name&, &phoneNumbers&, &emails&, &address&];
find 方法定义了在查找结果中返回哪些字段值。 options 对象定义了查找如何执行的参数，如下：
var options = {filter: &Zhang&, multiple: true};
fileter 属性用来向 find 方法提供用到的查找字符串。 multiple 属性是一个布尔值控制是返回一个或多个联系人。
下面代码完整展示了如何调用 find 方法，传入联系人字段列表和查找选项。在 onSuccess 函数中，代码把联系人详细信息写到控制台上：
function findContact() {
var contactFileds = [&displayName&, &name&, &phoneNumbers&, &emails&, &address&];
var contactOptions = {
filter: &Zhang&,
multiple: true
navigator.contacts.find(contactFields, onSuccess, onError, contactOptions);
function onSuccess(contacts) {
for (var i = 0; i & contacts. i++) {
console.log(&Contact[& + i + &]: & + JSON.stringify(contacts[i]));
下面是上面代码在我的设备上查找结果返回的JSON数据块：
其中可以看到电话号码是如何组织的：
每个电话号码有一个 type 、 value 、 ID 和推荐状态值。 ID 在把电话号码添加到联系人记录时自动创建。不同移动平台管理联系人数据也不一样，确定在每个平台上都测试联系人格式。
当调用 find 方法并返回了一个 contact 对象时，就可以改变对象属性并用 save 方法把改动写回联系人应用。如果要删除联系人，首先要找到联系人对象的句柄并调用 remove ：
foundContact.remove(onSuccess, onFailure);
关于Contacts API还有很多，请参考Cordova文档获得更多信息。
播放/记录媒体文件
Cordova API包括一个 Media API 让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。
首先要安装插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
Media API像其他API一样也是异步的，但触发回调函数的有些不一样。要用API，应用要创建一个 Media 对象，如下：
var mediaObj = new Media(srcFile, onSuccess, onError, onStatus);
这样创建了一个mediaObj对象，它指向一个由 srcFile 参数指定的媒体文件。应用还没有打开或连接文件，只是创建了一个引用文件的对象。
onSuccess 和 onFailure 函数并不像以前的一样触发。上面代码中的回调函数实际上在 media 对象创建后以下方法调用时调用：
getCurrentPosition
getDuration
startRecord
stopRecord
比如要播放一个叫soundtrack.mp3的媒体文件，代码可以这么写：
srcFile = 'soundtrack.mp3';
var mediaObj = new Media(srcFile, onSuccess, onError, onStatus);
mediaObj.play();
function onSuccess() {
console.log(&Media: Success&);
function onError(error) {
alert('Media Error: ' + error.code + ': ' + error.message);
function onStatus(statCode) {
console.log(&Media status: & + statCode);
停止播放只需调用mediaObj.stop();上面代码的 onStatus 函数传递了一个状态代码参数让应用理解媒体播放或记录的状态。可能的状态代码如下：
Media.MEDIA_NONE
Media.MEDIA_STARTING
Media.MEDIA_RUNNING
Media.MEDIA_PAUSED
Media.MEDIA_STOPPED
使用Media API中所有的方法和回调函数可以构建一个完整的媒体播放应用，或者不用任何UI加载和播放音频文件。API还为开发者提供了可扩展性。
Cordova应用存储打包的媒体文件的位置因不同的移动设备平台而不同。如Android中位于/android_asset文件夹中。
InAppBrowser
InAppBrowser的版本和Cordova API的版本更接近，允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理，但有时候需要不同的用户体验，InAppBrowser加载网页内容，应用用户可以更方便的直接返回到主应用。
使用前首先安装InAppBrowser插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
使用如下代码在窗口打开网页内容：
var ref = window.open('', '_blank', 'location=yes');
上面代码打开一个网址并返回一个表示浏览器窗口的对象。稍后可以用这个对象和浏览器窗口交互。也可以创建一个浏览器窗口但不显示，如下：
var ref = window.open('', '_blank', 'hidden=yes');
之后要想显示浏览器窗口，如下:
ref.show();
window.open 方法的参数中， _blank 告诉应用在自已的窗口中打开内容；也可以用 _self ，即在当前窗口中打开页面， _system 在默认的网页浏览器打开内容。使用 _self 的问题是加载的网页替换了当前应用的网页内容，对于用户没法回退。
'location=yes'告诉InAppBrowser在浏览器窗口中显示页面地址。还有几个其他选项在加载页面时使用，这些选项因移动设备平台而异，更多信息请参考Cordova文档。调用的结果如下图，用户可以点击&X&按钮返回原应用：
要关闭页面地址栏，找开页面时使用如下代码：
var ref = window.open('', '_blank', 'location=no');
也可以加载本地内容，如下，在项目的www文件夹中有一个叫help.html的文件：
var ref = window.open('help.html', '_blank');
想关闭网页只需要调用 close 方法：
ref.close();
浏览器窗口事件
应用在很多场景下需要知道在InAppBrowser窗口中进行的情况。为此InAppBrowser API在窗口生命周期的不同时期触发不同事件。支持的事件有：
loadstart: 在InAppBrowser开始加载一个URL时触发。
loadstop: 在InAppBrowser完成加载URL时触发。
loaderror: 在InAppBrowser加载URL遇到错误时触发。
exit: 在InAppBrowser窗口被关闭时触发(由用户或应用调用 close 方法)。
以下是一些代码段，用InAppBrowser打开一个本地HTML文件，然后为每个窗口事件定义了事件监听器：
var ref = window.open('help.html', '_blank');
ref.addEventListener('loadstart', onEvent);
ref.addEventListener('loadstop', onEvent);
ref.addEventListener('loaderror', onLoadError);
ref.addEventListener('exit', onEvent);
除了错误事件其他都用一个回调函数，是因为此时回调函数都传入了一个 event 对象，它描述了触发的事件，如下：
function onEvent(event) {
console.log('Type: ' + event.type);
console.log('URL: ' + event.url);
// Do something based on event.type
开发者可以查询event.type并为特定的事件并做适当的处理。
错误发生时，错误回调函数传入了一个包括代码和消息属性的对象，如下。开发者之后查询event.code，并显示一个恰当的错误消息或者执行恰当的恢复步骤。
function onLoadError(event) {
console.log('onLoadError: ' + event.code + '-' + event.message));
只是加载网页是不够的，可能会需要修改内容或执行页面的一些js脚本。InAppBrowser有让应用在窗口执行js代码的方法 executeScript ，如下：
ref.executeScript(scriptInfo, onSucess);
scriptInfo 参数定义了执行的js代码和代码位置，可以直接传入方法或从文件加载。要执行特定的js代码，需要以 code 和一个包括字符串的值组成的属性传入一个js对象，其中字符串包括要执行的js代码，如下：
{code: &$('#heading').replaceWith('&h2&This is some injected text&/h2&');&}
上面代码使用jQuery的 replaceWith 函数替换页面的一些内容。
可以在页面加载完成后执行js代码，一般是在页面加载后执行js脚本的位置添加对 executeScript 的调用，如在 loadstop 事件监听器中，如下：
var ref = window.open('help.html', '_blank', 'loaction=no');
ref.addEventListener('loadstop', function() {
ref.executeScript({
code: &$(#heading').replaceWith('&h2&This is some injected text&/h2&');&
}, onSuccess);
除了直接传入js代码，还可以把代码保存到文件中并发文件名通过scriptInfo参数传给 executeScript ，如下：
{ file: &myscript.js& }
执行结果是一样的，只是示例代码的js代码来源改变了。
和在InAppBrowser中执行js脚本一样，也可以使用方法向窗口中插入CSS。比如像网页来源于外部，想要改变它的样式来匹配应用的其他部分。调用InAppBrowser的 insertCSS 方法，传入CSS或CSS文件的引用，如下：
ref.insertCSS(cssInfo, onSuccess);
cssInfo 参数定义了插入的CSS脚本和它的位置，直接传入或从文件加载。要传入CSS脚本，要使用js对象，它包括 code 和一个值，值由表示CSS脚本的字符串构成，如下：
{code : &body {background-color: color:white}&}
不能在页面加载完成之前插入CSS，如下面代码在 loadstop 事件监听器处理：
var ref = window.open('help.html', '_blank', 'location=no');
ref.addEventListener('loadstop', function() {
ref.insertCSS({
code: &body {background: color:white}&
}, onSuccess);
也可以把CSS保存到文件，把文件名通过 cssInfo 参数传给 insertCSS 方法，如下：
{file: &mystuff.css&}
Cordova提供了 Splashscreen API 能够用来在Cordova应用启动时显示自定义的闪屏。使用前首先安装插件：
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
要在创建适当的闪屏图像文件用于支持不同设备平台，还有各操作系统中各种表单元素。还有些要你为每个移动设备平台做手动设置，即修改Cordova容器代码。
如果有合适的图像并添加到Cordova和平台项目中，可以用如下代码展示和隐藏应用闪屏：
function showSplash() {
navigator.splashscreen.show();
setTimeout(hideSplash, 2000);
function hideSplash() {
navigator.splashscreen.hide();
上面例子中 showSpash 函数显示了闪屏，然后设置一个定时器让闪屏2秒后隐藏。
关于API的部分就先介绍到这里了，本篇内容比较多。下一篇介绍如何创建插件，再之后以一个综合示例结束。
本篇代码链接：
（提取码：25c1）
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}