1. 程式人生 > >Cordova與現有框架的結合,Cordova插件使用教程,Cordova自定義插件,框架集成Cordova,將Cordova集成到現有框架中

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

語言 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集成到現有框架中