Cordova與現有框架的結合，Cordova外掛使用教程，Cordova自定義外掛，框架整合Cordova，將Cordova整合到現有框架中

阿新 • • 發佈：2018-11-08

一、框架整合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整合到現有框架中

一、框架整合cordova

將cordova整合到現有框架中

二、Cordova 部分外掛的使用

Cordova網路連結狀態

Cordova電池狀態

Cordova相機

Cordova聯絡人

Cordova裝置資訊

Cordova加速計

Cordova裝置朝向

Cordova 檔案系統

Cordova 檔案傳輸

Cordova內建瀏覽器

Cordova震動

Cordova地理位置

Cordova全球化

Cordova 二維碼生成和掃描

Cordova媒體捕獲

Cordova媒體

Cordova自定義外掛流程

相關推薦