語言 camera platform 都是 err duration sets 平臺 cordova

一、框架集成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工程後就可以看得目錄中以下載好的插件。

---

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

Cordova與現有框架的結合，Cordova插件使用教程，Cordova自定義插件，框架集成Cordova，將Cordova集成到現有框架中