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插件和自定義插件的使用教程。