Cordova与现有框架的结合，Cordova插件使用教程，Cordova自定义插件，框架集成Cordova，将Cordova集成到现有框架中

 1、框架集成cordova

将cordova集成到现有框架中

通常cordova工程是经过CMD命令来建立一个工程并添加Android、ios等平台，这样的建立方式能够完整的下载开发过程当中所须要的的插件。也是最方便和快捷一种方式。所以咱们须要用这种方式将咱们现有的框架放入到已建好的cordova工程中。

1. 建立咱们须要的cordova工程（以手上某项目为例）

CMD 命令：

$  cordova  create  ZWYPhone  com.centit.zwyphone  ZWYPhone

后面三项对应 ： 工程名称 包名 应用名称（注意：这三项最好与现有框架的保持一致，后面能够避免很多问题）。

2. 进入建好的工程目录里，增长咱们的android 平台

CMD命令：

$  cordova  platform  add  android

3. 到此工程建立完毕

开始将框架迁移进去，找到工程目录中\platforms\android目录，会有咱们建好的android工程，此时将咱们框架中全部的文件拷贝到该目录中，必定要将已有的文件全替换。下图为我拷贝后的工程，和原有的的工程结构没有区别，但文件里面的内容已改变为框架的工程

 

4. 框架迁移后，将该目录的android工程导入eclipse中

（注意必定要将cordovaLib一块儿导入）

 

5. 导入的工程就是咱们须要的android 平台下的 cordova工程，这个工程能够实现下载咱们须要的插件

6. 下载插件经过命令执行，仍是在咱们的工程目录中

CMD命令：

$  cordova  plugin  add  cordova-plugin-device

cordova-plugin-device为插件的名称

 

而后刷新一下eclipse工程后就能够看得目录中如下载好的插件。

 

 

---

 

2、Cordova 部分插件的使用

注意：鉴于本人使用Cordova5.1版本，而最新的为Cordova7.0版本，可能会存在差别，此部分仅供参考，一切以官方说明为准，官方说明网址：http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support

Cordova网络连接状态

1. 插件安装：

进入工程目录运行CMD命令（注意：后面的插件安装所有要在工程目录中执行）：

$ cordova plugin add cordova-plugin-network-information

2. 在index.html中添加一个button，用来点击获取网络获取信息

3. 添加事件监听器

在 index.js 中的 onDeviceReady 函数中添加三个事件侦听器。一个将监听咱们以前建立的按钮的点击，另外两个将监听链接状态的更改。例如：

document.getElementById("networkInfo").addEventListener("click",networkInfo);

document.addEventListener("offline", onOffline, false);

document.addEventListener("online", onOnline, false);

4. 建立函数

此时当咱们启动链接到网络的应用时，onOnline()方法将会被调用触发警报alert();反之onOffline()方法将会被调用触发alert（）提醒；按 INFO 按钮，alert将显示咱们的网络状态。

---

 

Cordova电池状态

用于监视设备的电池状态。该插件将监视设备电池发生的每个变化。

1. 插件安装 CMD命令

$ cordova plugin add cordova-plugin-battery-status

2. 添加事件监听器

打开 index.js 文件，找到 onDeviceReady 函数。 添加事件侦听器。

window.addEventListener("batterystatus", onBatteryStatus, false);

 3. 建立回调函数

function onBatteryStatus(info) {
       alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " +info.isPlugged);
}

当咱们运行应用程序时，将触发警报。当状态改变时，新的警报将通知咱们。当咱们插入或断开充电器时也会触发警报，其中info.level 定义当前的电量，info.isPlugged定义当前充电器的状态。

---

 

 

Cordova相机

用于拍摄照片或使用图像库中的文件。

1. 插件安装

$ cordova plugin add cordova-plugin-camera

2. 添加按钮和图像

建立用于调用摄像头的按钮和在拍摄后将显示图像的 img 。

3. 添加事件监听器，事件侦听器添加到 onDeviceReady 函数中，以确保Cordova在咱们开始使用它以前加载

 

4. 添加功能，建立拍照函数，建立 cameraTakePicture 函数，该函数做为回调传递给咱们的事件侦听器。

当点击按钮时，它会被触发。在这个函数中，咱们调用由插件API提供的 navigator.camera 全局对象。若是拍摄成功，数据将被发送到 onSuccess 回调函数，若是没有，将显示带有错误信息的警报。

function cameraTakePicture() {
  navigator.camera.getPicture(onSuccess, onFail, { 
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL
  })
   function onSuccess(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }
}

当启动程序并点击拍照按钮时，拍照功能就会被触发。

相同的过程能够用于从本地文件系统获取图像。 惟一的区别是在最后一步建立的函数。 您能够看到已添加 sourceType 可选参数

 

红色框中见下面参数说明：

 

---

 

Cordova联系人

此插件用于访问设备联系人数据库。

1. 插件安装

$ cordova plugin add cordova-plugin-contacts

2. 添加按钮

 

3. 添加事件监听器

4. 建立回调函数

（1）建立联系人的回调函数（navigator.contacts.create）

调用 navigator.contacts.create 方法，咱们能够指定新的联系人数据。这将建立联系人并将其分配给 myContact 变量，但不会存储在设备上。要存储它，咱们须要调用保存方法并建立成功和错误回调函数。

 

（2）查找联系人的回调函数（navigator.contacts.find）。使用 navigator.contacts.find 方法。 选项对象具备过滤器参数，用于指定搜索过滤器。 multiple = true ，由于咱们要返回设备中的全部联系人。咱们还使用字段键经过 displayName 搜索联系人，由于咱们在保存联系人时使用它。设置选项后，咱们使用 find 方法查询联系人。将为找到的每一个联系人触发警报消息。

 

（3）删除联系人的回调函数（delete）

咱们使用 find 方法，但此次咱们将设置不一样的选项。options.filter 设置为搜索测试用户，由于咱们要删除它。在 contactfindSuccess 回调返回了咱们想要的联系人后，咱们使用须要本身的成功和错误回调的 remove 方法删除它。

 

---

 

Cordova设备信息

此插件用于获取有关用户设备的信息。

 1. 插件安装

$ cordova plugin add cordova-plugin-device

2. 添加按钮

3. 添加事件监听器

4. 建立函数

 

当咱们单击 CORDOVA DEVICE 按钮时，警报将显示Cordova版本，设备型号，平台，UUID和设备版本。

---

 

Cordova加速计

该插件也称为设备运动。它用于在三维中跟踪设备运动。

1. 插件安装

$ cordova plugin add cordova-plugin-device-motion

 2. 添加按钮

3. 添加监听事件

4. 建立函数

建立两个函数。第一个将用于获取当前加速度，第二个将观察加速度，而且每三秒通知一次。咱们还添加了由 setTimeout 函数包装的 clearWatch ，以在指定时间范围后中止观看加速。frequency 参数用于每三秒触发一次回调函数。

 

按 GET ACCELERATION 按钮，咱们将得到当前的加速度值。若是咱们按WATCH ACCELERATION，警报将每三秒触发一次。在显示第三个警告后，将调用 clearWatch 函数，而且咱们不会再收到任何警报，由于咱们将超时设置为10000毫秒。

---

 

Cordova设备朝向

指南针用于显示相对于地理北基点的方向。

 1. 插件安装

$ cordova plugin add cordova-plugin-device-orientation

2. 下面的操做和加速计的开发案例相同，建立函数以下

要注意的是因为指南针插件几乎与加速插件相同，咱们将在此时显示错误代码。 某些设备没有磁罗盘工做所需的磁性传感器。 若是您的设备没有它，您会获得如下错误。

 

---

 

Cordova 文件系统

此插件用于操做用户设备上的本机文件系统。

 1. 插件安装

$ cordova plugin add cordova-plugin-file

2. 添加按钮

 

3. 添加事件监听

 

4. 函数

（1）建立文件功能

建立文件功能有两种形式：临时文件和持久化文件分别对应着WINDOW.TEMPORARY 或 WINDOW.PERSISTENT两个字段，在建立持久化文件时要注意在config.xml 配置以下，表示存在内存根目录。

 

（2）写入文件

 

（3）读取文件

 

（4）删除文件

 

---

 

Cordova 文件传输

此插件用于上传和下载文件。

 1. 插件安装

$ cordova plugin add cordova-plugin-file-transfer

2. 添加按钮

3. 添加监听事件

 

4. 建立函数

（1）下载功能

按下相应的按钮时触发。uri 是服务器下载连接， fileURI 是咱们设备上文件夹的路径

 

（2）上传功能

 

---

 

Cordova内置浏览器

此插件用于在Cordova应用程序中打开Web浏览器。

 1. 插件下载

$ cordova plugin add cordova-plugin-inappbrowser

2. 同上个插件

3. 同上个插件

4. 建立函数

咱们建立的功能将打开浏览器在咱们的应用程序。咱们将它分配给 ref 变量，咱们稍后可使用它添加事件监听器。

---

 

Cordova震动

此插件用于链接设备的振动功能。

 1. 插件安装

$ cordova plugin add cordova-plugin-vibration

2. 添加按钮

3. 添加事件监听

 

4. 建立事件监听

 

第一个方法功能是使用时间参数，此参数用于设置震动的时间，一旦按下VIBRATION按钮，设备将震动3秒。

第二个方法功能是使用pattern参数，此阵列要求设备震动1秒，而后等待1秒。而后重复该过程。

---

 

Cordova地理位置

地理位置用于获取有关设备的纬度和经度的信息。

1. 插件安装

$ cordova plugin add cordova-plugin-geolocation

2. 后续操做和函数功能和cordova的加速计和设备朝向相同，这里附上功能函数

---

 

Cordova全球化

此插件用于获取有关用户语言区域语言，日期和时区，货币等的信息。

 1. 插件安装

$ cordova plugin add cordova-plugin-globalization

2. 建立按钮

3. 添加事件监听

4. 添加监听事件的函数

（1）语言功能

使用 getPreferredLanguage 方法。该函数有两个参数 onSuccess 和 onError 。

（2）区域功能 使用 getLocaleName 方法

 

（3）此外该插件还提供了其余功能的方法

 

---

 

Cordova 二维码生成和扫描

此插件用于对二维码的生成和识别。

1. 插件安装

$ cordova plugin add cordova-plugin-barcodescanner

2. 添加按钮 和时间监听就略过

3. 添加监听函数

（1）扫描二维码功能，调用 cordova.plugins.barcodeScanner.scan()方法

该方法有两个参数，一个是成功的回调函数，一个是失败的回调函数

（2）生成二维码功能 调用 cordova.plugins.barcodeScanner.encode()方法

 

该方法有四个函数，一个是二维码类型，一个是生成的信息，后面的是成功和失败的回调函数

---

 

 

Cordova媒体捕获

此插件用于访问设备的捕获选项。

 1. 插件安装

$ cordova plugin add cordova-plugin-media-capture

2. 添加按钮和事件监听器和其余插件同样，略过

3. 建立捕获函数

（1）音频捕获  使用 captureAudio 方法。 咱们使用两个选项 - limit 将容许每次捕获操做只记录一个音频剪辑， duration 是声音片断的秒数。

（2）图像捕获函数

（3）视频捕获

 

---

 

Cordova媒体

Cordova媒体插件用于在Cordova应用程序中录制和播放音频声音。

因为cordova-plugin-media插件要求cordova的android 平台是至少6.1.0以上，而我使用的版本是4.1.1，因此使用的的是 Cordova Streaming Media plugin代替

1. 插件安装

$ cordova plugin add cordova-plugin-streaming-media

2. 按钮和事件监听略过

3. 建立函数 

 

第一个方法是播放音频功能，第二个方法是播放视屏功能，两个方法都是相同的参数，一个是播放路径，一个是播放器的样式设置。

---

 

 Cordova自定义插件流程

 述介绍的是cordova官方插件的使用方法，但有时候咱们须要使用本身定义的插件来知足项目的业务需求，简单介绍自定义插件的流程，以（自定义Dialog为例）。

1. 自定义java类实现 CordovaPlugin 类

 

在这个类中必需要重写execute()方法

 

 

Js调用插件后会回调这个方法，而后根据js传递的action去实现咱们本身目标，其中参数的意思为：

action:服务名，js传递给咱们，根据服务名咱们来作相应的处理

args  :js传递的参数，传递咱们须要的信息

callbackcontext: 接口回调，execute（）处理完后能够回调给web，用于监控。好比插件中的成功和是失败信息都是经过此参数来返回。

2. 配置config.xml

 

其中feature name能够随便取，param value填的是具体类的位置。

3. Web配置并调用

（1）在assets/www/cordova_plugins.js里面配置

 

各个注释图上已标注解释。

4. 在该目录下建立包名和dialog.js文件

 

并在dialog.js编辑

cordova.define 的第一个参数就是cordova_plugins.js里面定义的id，最主要的是exec方法，参数说明：
　　参数1：成功回调function
　　参数2：失败回调function
　　参数3：feature name，与config.xml中注册的一致
　　参数4：调用java类时的action
　　参数5：要传递的参数，json格式

5. 配置完就能够调用了

 

---

 

以上就是将Cordova集成到现有框架中的教程，以及Cordova插件和自定义插件的使用教程。