Cordova與現有框架的結合,Cordova插件使用教程,Cordova自定義插件,框架集成Cordova,將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集成到現有框架中