使用Cordova API开发(下)

时间  2019-12-08
标签 使用 cordova api 开发 栏目 Cordova 繁體版
原文   原文链接

本文承接上篇《使用Cordova API开发（上）》。文中示例代码见篇尾连接。css

硬件API

Cordova提供了一些与常见的智能手机硬件交互的API，这让Cordova应用能够以某种方式与外部世界交互。html

对这些API Cordova文档没有专门分组显示，咱们把它们放在一块儿了解，包括：android

  • Accelerometer(加速度计)
  • Camera(相机)
  • Capture(采集)
  • Compass(指南针)
  • Geolocation(地理定位)

Acclerometer, Compass，Geolocation API以相同的方式工做。应用能够测量某段距离的当前值，或者设置监视器，这样能够测量一段时间内的位移。Camera和Capture API使用设备相机抓取图像，但它们操做不同，Capture API还能够录制视频和和音频。git

World Wide Web组织对这些功能作了规范定义。Compass API规范定义在http://dev.w3.org/2009/dap/system-info/compass.html，Geolocation API规范在http://dev.w3.org/geo/api/spec-source.html，Device Orientation规范定义在http://www.w3.org/geo/api/spec-source-orientation。apache

会发现一些Cordova API和W3C规范的很接近，另一些则否则。例如，Cordova Compass API有一个getCurrentHead方法，而W3C规范使用getCurrentOrientation,能够预见将来Cordova API会逐渐采用标准定义，应该时刻关注这种改进。下面简单说一点使用方法，其中一些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测量结果：

navigator.compass.getCurrentHeading(onSuccess, onFailure);

参数是两个函数名：onSuccess在成功测量朝向值时执行，发生错误时执行onFailure。能够像下面这样使用：

function onSuccess(res) {
    magneticHeading = res.magneticHeading;
    trueHeading = res.trueHeading;
    headingAccuracy = res.headingAccuracy;
    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 用度数表示磁极朝向和真实朝向值的不一样
timestamp 朝向值测量的日期和时间(从1970年1月1日午夜开始的毫秒数)

错误发生时，onFailure函数传入错误代码能够判断错误的缘由。可能的值有CompassError.COMPASS_INTERNAL_ERR和CompassError.COMPASS_NOT_SUPPORTED。

使用compass.watchHeading，使用以下代码设置监听：

var options = {frequency:1000};
watchID = navigator.compass.watchHeading(onSuccess, onFailure, options);

各参数的说明和accelerator同样，还能够指定filter值，用来定义最小度数值变化，它必定在监听触发前调用。由于compass值变化频繁，可能须要设置filter减小朝向值测量的次数，这样可让应用只回应变化大的朝向。

代码中，调用watchHeading的结果赋给了变量watchID，用来取消监听，用法以下：

navigator.compass.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属性包括下表属性：

属性 描述
accuracy 用米作单位的经度和纬度坐标的精确度
altitude 用米作单位的设备的海拔高度
altitudeAccuracy 用米作单位的海拔高度坐标的精度
heading 设备上用度数为单位的朝向(移动的方向)
latitude 用小数度数表示的位置的纬度部分
longtitude 用小数度数表示的位置的经度部分
speed 设备以米为单位的每秒的速度

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，而后把相机返回的数据显示出来，应用界面以下图：

![](img/26.png)

点"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部分。

开发者可能会用一些或所有属性控制拍照过程。每一个选项描述以下：

属性 描述
allowEdit 布尔值，照片在返回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图像。
mediaType 数值型，当*SoruceType*设置为*PHOTOLIBRARY*或*SAVEDPHOTOALBUM*，规定了用户可选择什么类型的文件。使用*Camera.MediaType.PICTURE*时只容许选择图像，*Camera.MediaType.VIDEO*容许选择视频文件，*Camera.MediaType.ALLMEDIA*容许选择任何支持的媒体文件。选择*VIDEO*时，API只返回文件的URI；若是是图像会返回信息，它的格式请参考*destinationType*。
quality 数值型，用从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, path;
    len = fileList.length;
    if (len > 0) {
        for (i = 0, len; i < len; i+=1) {
            path = fileList[i].fullPath;

            // Do something with the file here
        }
    } else {
        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函数执行并显示以下图：

![](img/27.png)

失败函数传入了一个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 一个月和天的名字的数组，有长和短的版本，要看options和用户当前语言设置
getDatePattern Options 描述基于用户当前语言设置的日期格式的Pattern对象
getFirstDayOfWeek 表示基于当前用户语言设置的周第一天数值
getLocaleName 表示用户当前位置的字符串，用ISO 3166国家代码表示
getNumberPattern Options 描述基于用户当前语言设置的数值的格式的Pattern对象
getPreferredLanaguage 用户选用语言的字符串表示，使用ISO 639-1 双字母代码
isDayLightSavingsTie Date 表示白天可用时间是否有效的字符值
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,
"day":31,
"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 = fullName;
newContact.nickName = "GouSheng";

var tmpName = new ContactName();
tmpName.givenName = "San";
tmpName.familyName = "Zhang";     
tmpName.formatted = fullName;

newContact.name = tmpName;

上面代码建立了一个新的contact对象，而后用值填充。其中填充了一个ContactName对象(Contacts API中定义的)，而后添加到newContact对象。ContactName对象包括如下属性：

  • familyName
  • formatted
  • givenName
  • 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.length; 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
  • pause
  • play
  • release
  • seekTo
  • setVolume
  • startRecord
  • stop
  • 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('http://www.segmentFault.com', '_blank', 'location=yes');

上面代码打开一个网址并返回一个表示浏览器窗口的对象。稍后能够用这个对象和浏览器窗口交互。也能够建立一个浏览器窗口但不显示，以下：

var ref = window.open('http://www.segmentFault.com', '_blank', 'hidden=yes');

以后要想显示浏览器窗口，以下:

ref.show();

window.open方法的参数中，_blank告诉应用在自已的窗口中打开内容；也能够用_self，即在当前窗口中打开页面，_system在默认的网页浏览器打开内容。使用_self的问题是加载的网页替换了当前应用的网页内容，对于用户无法回退。

'location=yes'告诉InAppBrowser在浏览器窗口中显示页面地址。还有几个其余选项在加载页面时使用，这些选项因移动设备平台而异，更多信息请参考Cordova文档。调用的结果以下图，用户能够点击"X"按钮返回原应用：

图片描述

要关闭页面地址栏，找开页面时使用以下代码：

var ref = window.open('http://www.segmentFault.com', '_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代码来源改变了。

插入CSS

和在InAppBrowser中执行js脚本同样，也可使用方法向窗口中插入CSS。好比像网页来源于外部，想要改变它的样式来匹配应用的其余部分。调用InAppBrowser的insertCSS方法，传入CSS或CSS文件的引用，以下：

ref.insertCSS(cssInfo, onSuccess);

cssInfo参数定义了插入的CSS脚本和它的位置，直接传入或从文件加载。要传入CSS脚本，要使用js对象，它包括code和一个值，值由表示CSS脚本的字符串构成，以下：

{code : "body {background-color:black; color:white}"}

不能在页面加载完成以前插入CSS，以下面代码在loadstop事件监听器处理：

var ref = window.open('help.html', '_blank', 'location=no');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({
        code: "body {background:black; 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的部分就先介绍到这里了，本篇内容比较多。下一篇介绍如何建立插件，再以后以一个综合示例结束。

本篇代码连接：http://yunpan.cn/cctIXAtxdv5GC （提取码：25c1）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程