使用Cordova API開發(下)

時間  2019-12-08
標籤 使用 cordova api 開發 欄目 Cordova 简体版
原文   原文鏈接

本文承接上篇《使用Cordova API開發（上）》。文中示例代碼見篇尾連接。css

硬件API

Cordova提供了一些與常見的智能手機硬件交互的API，這讓Cordova應用能夠以某種方式與外部世界交互。html

對這些API Cordova文檔沒有專門分組顯示，咱們把它們放在一塊兒瞭解，包括：android

  • Accelerometer(加速度計)
  • Camera(相機)
  • Capture(採集)
  • Compass(指南針)
  • Geolocation(地理定位)

Acclerometer, Compass，Geolocation API以相同的方式工做。應用能夠測量某段距離的當前值，或者設置監視器，這樣能夠測量一段時間內的位移。Camera和Capture API使用設備相機抓取圖像，但它們操做不同，Capture API還能夠錄製視頻和和音頻。git

World Wide Web組織對這些功能作了規範定義。Compass API規範定義在http://dev.w3.org/2009/dap/system-info/compass.html，Geolocation API規範在http://dev.w3.org/geo/api/spec-source.html，Device Orientation規範定義在http://www.w3.org/geo/api/spec-source-orientation。apache

會發現一些Cordova API和W3C規範的很接近，另一些則否則。例如，Cordova Compass API有一個getCurrentHead方法，而W3C規範使用getCurrentOrientation,能夠預見將來Cordova API會逐漸採用標準定義，應該時刻關注這種改進。下面簡單說一點使用方法，其中一些API支持許多選項，要深刻全面瞭解這部份內容可參考相關書籍。api

Accelerometer(加速計)

Cordova Accelerometer API讓應用在三維空間(使用笛卡爾三維座標系統)中決定設備方向。使用這個API前要安裝插件，使用如下命令：數組

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

API公開了三個方法：瀏覽器

  • accelerometer.getCurrentAcceleration
  • accelerometer.watchAcceleration
  • accelerometer.clearWidth

getCurrentAcceleration方法讓應用查詢設備當前方向。watchAcceleration和clearWatch方法用於捕獲一段時間內在某個設備方向的位移，重複地在某個時間間隔上用加加速計測量。服務器

在應用中這麼寫測量設備當前方向：併發

navigator.accelerometer.getCurrentAcceleration(onSuccess, onFailure)

參數是兩個函數名，onSuccess在測量成功時執行而onFailure在出錯時執行，以下例定義兩個函數：

function onSuccess(res) {
    x = res.x;
    y = res.y;
    z = res.z;
    var d = new Date(res.timestamp);
    timestamp = d.toLocaleString();
}                

function onFailure() {
    alert('I have no idea why this failed, but it did.');
}

onSuccess函數傳遞了一個表示加速計測量值各個不一樣部分，X、Y和Z表示設備在三維座標系統中的方向，timestamp值表示日期/時間，它由測量值生成。顯示在桌面上，生成圖像以下圖。

圖片描述

一些Android設備若是平放在桌面上，加速計大體返回這樣的值：X:0, Y:0, Z:10，翻轉後它就位於如今位置的左邊，值就調整爲X:10,Y:0,Z:0，把設備從底邊立起來，置變爲X:0, Y:10, Z:0，從頂邊立起來，置變爲X:0, Y:-10, Z:0。應用就使用這樣的值判斷用戶怎麼拿設備，多用在遊戲和交互性的應用上。

可是Cordova不會在錯誤發生並調用onFailure函數時提供信息，像能夠識別錯誤來源的錯誤代碼或錯誤信息。但在調用加速計接口時若是失敗，頗有多是設備就沒有加速計。

getCurrentAcceleration用來在快速檢查設備方向，好比在遊戲中想在一段時間監視方向，getCurrentAcceleration就很差用了，而應該寫代碼按期檢查，爲了方便開發者解決這種問題，Cordova API容許開發者經過監視加速計按期的讀取，使用accelerometer.watchAcceleration方法。應用使用以下代碼設置監聽：

var options = {frequency:1000};
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onFailure, options);

onSuccess和onFailure用法和上例相同，options對象以毫秒級定義了加速計測量的頻率。若是每半秒測量一次，frenquency設置成500。

示例中把watchAcceleration函數的調用結果賦給了watchID變量，用來在後邊取消監視：

navigator.accelerometer.clearWatch(watchID);

這樣應用會每秒讀一次加速計，並把值傳給onSuccess函數來處理結果。

Compass(指南針)

Compass API可讓開發者讀取移動設備的朝向。這個API的使用和Accelerometer API基本同樣，既能夠一次查找朝向值也能夠定義個監視器按期測量朝向值。二者主要不一樣在於上例中的results和options。

要使應用可以讀朝向值首先要安裝orientation插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

和Compass API提供了也三個方法：

  • compass.getCurrentHeading
  • compass.watchHeading
  • compass.clearWatch

getCurrentHeading方法容許應用查詢compass的當前方向。watchHeading和clearWatch方法用來在一段時間內得到compass朝向，即每隔一段時間從compass得到測量結果。

這樣得到compass測量結果：

navigator.compass.getCurrentHeading(onSuccess, onFailure);

參數是兩個函數名：onSuccess在成功測量朝向值時執行，發生錯誤時執行onFailure。能夠像下面這樣使用：

function onSuccess(res) {
    magneticHeading = res.magneticHeading;
    trueHeading = res.trueHeading;
    headingAccuracy = res.headingAccuracy;
    var d = new Date(res.timestamp);
    timestamp = d.toLocaleString();
}                

function onFailure(err) {
    alert("Error: " + err.code);
}

heading對象(即例子中的res)返回給onSuccess函數，它的屬性值以下表：

屬性 描述
magneticHeading 以從0到359的度數表示compass的朝向值
trueHeading compass相對於北極的朝向值，範圍從0到259度。負值表示真實的朝向值不能肯定
headingAccuracy 用度數表示磁極朝向和真實朝向值的不一樣
timestamp 朝向值測量的日期和時間(從1970年1月1日午夜開始的毫秒數)

錯誤發生時，onFailure函數傳入錯誤代碼能夠判斷錯誤的緣由。可能的值有CompassError.COMPASS_INTERNAL_ERR和CompassError.COMPASS_NOT_SUPPORTED。

使用compass.watchHeading，使用以下代碼設置監聽：

var options = {frequency:1000};
watchID = navigator.compass.watchHeading(onSuccess, onFailure, options);

各參數的說明和accelerator同樣，還能夠指定filter值，用來定義最小度數值變化，它必定在監聽觸發前調用。由於compass值變化頻繁，可能須要設置filter減小朝向值測量的次數，這樣可讓應用只回應變化大的朝向。

代碼中，調用watchHeading的結果賦給了變量watchID，用來取消監聽，用法以下：

navigator.compass.clearWatch(watchID);

上面的代碼應用會每隔1秒讀compass並把值傳給onSuccess函數。

Geolocation(地理定位)

Cordova Geolocation API讓應用判斷設備的物理位置。它基於W3C的Geolocation API，工做方式和Accelerometer及Compass同樣。既能夠查找一次位置也能夠設置監聽按期計算位置，惟一不一樣的是傳遞給onSuccess函數的results對象，以及建立watch時用到的option。

使用前安裝Geolocation插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

Geoloaction API提供3個方法：

  • compass.getCurrentPosition
  • compass.watchPosition
  • compass.clearWatch

getCurrentPosition方法讓應用判斷設備當前位置，watchPosition和clearWatch方法容許應用按期計算設備位置。API返回了一個位置對象，包括coordinates和timestamp屬性。timestamp見上面相關說明。coordinates屬性包括下表屬性：

屬性 描述
accuracy 用米作單位的經度和緯度座標的精確度
altitude 用米作單位的設備的海拔高度
altitudeAccuracy 用米作單位的海拔高度座標的精度
heading 設備上用度數爲單位的朝向(移動的方向)
latitude 用小數度數表示的位置的緯度部分
longtitude 用小數度數表示的位置的經度部分
speed 設備以米爲單位的每秒的速度

Camera(相機)

Cordova框架提供了兩個用於訪問設備相機的API，一個是Camera API，它使用開發者能直接訪問本地相機的API，另外一個是Media Capture API。二者的不一樣是Camera API只用相機獲取圖像，而Media Capture API不只能獲取圖像，還能夠錄視頻或者錄音。Capture API將在接下來介紹。

首先是安裝Camera插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

得到相機圖像很簡單，只須要這樣調用：

navigator.camera.getPicture(onCameraSuccess, onCameraError);

下面用一個簡單的相機應用(源碼見附件)說明展現API如何工做,應用首先調用getPicture，而後把相機返回的數據顯示出來，應用界面以下圖：

![](img/26.png)

點"Take Photo"按鈕，打開設備本地相機應用，操做並照像。能夠看到沒有取消照像的方法，即便不照也要點一下拍照，而後在下一步取消。

選擇保存圖像並關閉設備的相機應用後，會把像片的信息返回給Cordova應用，以下圖所示。例子中沒有告訴getPicture任何關於怎樣拍照或者處理的信息，API將使用默認設置並簡單的返回一個圖像文件的URI。這樣Cordova應用可使用URI訪問文件，並把它顯示在屏幕上、上傳到服務器或其餘你想作的任何事。若是上一步選擇取消，API會嚮應用返回取消的錯誤信息。

以上只是camera API的默認操做，也能夠調用getPicture方法並傳入一個選項對象，它告訴API拍什麼樣的照片及怎樣去拍。下面是調用getPicture方法的另外一種調用方式：

navigator.camera.getPicture(onCameraSuccess, onCameraError, cameraOptions);

cameraOptions是一個js對象，cordova文檔中寫些起是這樣的：

var options = {
    quality : 75,
    destinationType : Camera.DestinationType.DATA_URL,
    sourceType : Camera.PictureSourceType.CAMERA,
    allowEdit : true,
    encodingType : Camera.EncodingType.JPEG,
    targetWdith : 100,
    targetHeight : 100,
    popoverOptions : CameraPopoverOptions,
    saveToPhotoAlbum : false
};

有些平臺可能會忽略其中一些屬性，用以前要檢查Cordova文檔的quirks部分。

開發者可能會用一些或所有屬性控制拍照過程。每一個選項描述以下：

屬性 描述
allowEdit 布爾值，照片在返回Cordova應用以前用戶是否能夠編輯，但並非全部移動平臺都支持。
cameraDirection 數值型，規定使用前面或後面的相機。*navigator.camera.Direction.FRONT*和*navigator.camera.Direction.BACK*分別指前面和後面。
correctOrientation 布爾值，告訴API在拍照時旋轉圖像來調整設備方向。
destinationType 數值型，規定API怎樣返回照片。*Camera.DestinationType.FILE_URI*是默認選項前邊提到過，*Camera.DestinationType.DATA_URL*，返回用base-64編碼的圖像，*Camera.DestinationType.NATIVE_URI*, 返回圖像的本地的URI。注意使用*DATA_URL*，由於js不處理用字符編碼的圖像，可能會使用js應用崩潰。
encodingType 數值型，指明圖像輸出格式。*Camera.EncodingType.JPEG*讓API返回JPEG圖像。
mediaType 數值型，當*SoruceType*設置爲*PHOTOLIBRARY*或*SAVEDPHOTOALBUM*，規定了用戶可選擇什麼類型的文件。使用*Camera.MediaType.PICTURE*時只容許選擇圖像，*Camera.MediaType.VIDEO*容許選擇視頻文件，*Camera.MediaType.ALLMEDIA*容許選擇任何支持的媒體文件。選擇*VIDEO*時，API只返回文件的URI；若是是圖像會返回信息，它的格式請參考*destinationType*。
quality 數值型，用從0到100%的百分比來控制圖像的質量，100表示不通過壓縮。
saveToPhotoAlbum 布爾值，指示API在拍照後把圖像保存到設備照片相冊中。
sourceType 數值型，指明圖像來源。可能值有*Camera.PictureSourceType.CAMERA*(默認值)，或者*Camera.PictureSourceType.PHOTOLIBRARY*、*Camera.PictureSourceType.SAVEDPHOTOALBUM*。選項的行爲會根據應用運行的平臺不一樣而不一樣，像有些平臺沒有*photo libraries*或*photo albums*。
targetHeight 數值型，用來設定得到的圖像的高度。
targetWidth 數值型，用來設定得到的圖像的寬。

用戶在返回給Cordova應用的是一張圖像，但可能拍了不止一張。Cordova有一個cleanup方法用來清理這種圖像。調用這個方法而且傳入成功和失敗的回調函數名做爲參數，以下：

navigator.camera.cleanup(onCameraCleanupSuccess, onCameraCleanupError);

錄製多媒體文件

Capture API和Camera API相似，能夠用來拍照也能夠錄相或錄音。它原來基於W3C Media Capture API，但開發團隊沒有實現API的一些功能。而且W3C也中止這個標準的工做轉而關注於徹底不同的Media Capture and Streams API。首先安裝Capture API：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

API提供以下方法：

* capture.captureAudio
* capture.captureImage
* capture.captureVideo
* MediaFile.getFormData

前三個方法用法徹底同樣。getFormData得到關於媒體文件的信息，但因爲移動設備的限制，經過這種方法得到的信息很是有限。

以三個方法之一爲例，使用以下方法聲明使用API：

navigator.device.capture.captureAudio(onSuccess, onFailure, options);

onSucess和onFailure方法在錄製成功或失敗後調用。onSuccess函數傳入了一個fileList對象，能夠迭代訪問指向每一個錄製的文件的路徑，以下面代碼所示：

function onSuccess(fileList) {
    var len, I, path;
    len = fileList.length;
    if (len > 0) {
        for (i = 0, len; i < len; i+=1) {
            path = fileList[i].fullPath;

            // Do something with the file here
        }
    } else {
        alert("Error:No files returned.");
    }
}

有了媒體文件的路徑，就能夠向服務器上傳文件，在應用中播放或顯示，等等。

調用onFailure函數時會傳入error對象，用來查找錯誤代碼，以下面代碼所示:

var onError = function(error) {
    alert('Capture error: ' + error.code);
}

可能的錯誤代碼有：

  • CaptureError.CAPTURE_INTERNAL_ERR
  • CaptureError.CAPTURE_APPLICATION_BUSY
  • CaptureError.CAPTURE_INVALID_ARGUMENT
  • CaptureError.CAPTURE_NO_MEDIA_FILES
  • CaptureError.CAPTURE_NOT_SUPPORTED

可選的options參數控制要錄製多少媒體文件，對音頻文件有一個duration屬性控制音頻錄製長度。

var options = { limit: 3, duration: 10};

有的平臺上的一些options屬性不可用，用以前要檢查Cordova Capture API文檔的quirks部分。

Globalization(全球化)

許多應用的用戶是使用不一樣語言的人，若是應用受歡迎，不久就須要在多語言環境下使用。Globalization API使全球化更方便，它容許應用查詢操做系統的當前設置。開發者經過這個API判斷用戶使用的語言，而後使用適當的語言加載內容，還使用API中的方法更好的顯示日期、時間、數字和貨幣單位。首先安裝：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

globalization對象的方法的用法都相似，也是異步的，調用方法並傳入成功和失敗函數，像下面這樣調用：

navigator.globalization.getPreferredLanguage(onGPLSuccess, onGPLFailure);

調用成功函數傳了一個對象，應用用它查詢一個或一些由方法返回的值。大多數原生方法，像前邊的getPreferredLanguage方法，返回了一個像下面這樣傳遞的字符串：

function onGPLSuccess(lang) {
    alert("Preferred language: " + lang.value);
}

這樣當調用getPreferredLanguage成功時，onGPLSuccess函數執行並顯示以下圖：

![](img/27.png)

失敗函數傳入了一個error對象，用來查詢判斷錯誤代碼和錯誤信息，以下面代碼所示：

function onGPLFailure(err) {
    alert("Error: " + err.code + " - " + err.message);
}

可能的錯誤代碼以下：

  • GlobalizationError.UNKNOWN_ERROR
  • GlobalizationError.FORMATTING_ERROR
  • GlobalizationError.PARSING_ERROR
  • GlobalizationError.PATTERN_ERROR

下面表格列出了全部Globalization API方法和傳入方法的參數

方法 參數 返回
dateToString JS Date值，options 表示基於options格式化的日期的字符串值和用戶當前的語言設置
getCurrencyPattern 貨幣代碼 描述貨幣格式的Pattern對象和一個基於用戶當前語言設置的貨幣值部分
getDateNames Options 一個月和天的名字的數組，有長和短的版本，要看options和用戶當前語言設置
getDatePattern Options 描述基於用戶當前語言設置的日期格式的Pattern對象
getFirstDayOfWeek 表示基於當前用戶語言設置的周第一天數值
getLocaleName 表示用戶當前位置的字符串，用ISO 3166國家代碼表示
getNumberPattern Options 描述基於用戶當前語言設置的數值的格式的Pattern對象
getPreferredLanaguage 用戶選用語言的字符串表示，使用ISO 639-1 雙字母代碼
isDayLightSavingsTie Date 表示白天可用時間是否有效的字符值
numberToString Number, Options 表示使用options和用戶偏好格式化的數值的字符值
stringToDate String, Options 把一個日期字符串解析成若干基於options和用戶偏好的單個部分/td>
stringToNumber String, Options 把一個數值字符串解析成基於options和用戶偏好的單個部分

從表中能夠看到一些方法接受屬性對象，讓開發者控制方法操做。如，使用dateToString方法把日期對象轉換成字符串，應用中可能會這麼用：

var d = new Date();
navigator.globalization.dateToString(d, onSuccess, onFailure);

onSuccess函數在日期轉換完成後調用，傳入一個可查詢到顯示結果的對象，如：

function onSuccess(res) {
    alert("Result: " + res.value);
}

dateToString方法支持options參數，開發者用它改變輸出格式，如：

var d = new Date();
var options = {
    formateLength: 'short',
    selector: 'date'
};
navigator.globalization.dateToString(d, onSuccess, onFailure, options);

上面例子中options對象定義了formateLength和selector屬性，用來控制結果字符串長度和是否包括日期和(或)時間值。它返回了每一個日期部分各自的屬性對象：
{
"month":7,
"second":0,
"millisecond":0,
"day":31,
"year":2013,
"hour":10,
"minute":47
}

使用Contacts應用工做

Cordova Contacts API讓開發者構建和通信錄或聯繫人應用交互的應用，它基於W3C Contacts API。它用於構建這樣的應用：讀取聯繫人列表並在應用中使用聯繫人數據，或使用應用數據向聯繫人列表中寫新的聯繫人。

首先要安裝Contacts插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

由於每一個移動平臺上聯繫人的功能都不一樣，Contacts API使用起來有些不同，像Android設備上使用的聯繫人一些字段與在iOS上不同。另外Contacts的實現與其餘API還有些不一樣。

Contacts API有兩個方法和一個contacts對象，方法用來建立新的contacts對象和在設備上查找聯繫人，contacts對象表示設備上的聯繫人。

建立聯繫人使用API的create方法，以下：

var newContact = navigator.contacts.create();

和以前的API方法不同，這個方法是同步的，沒有提供success和failure回調函數。它並無在設備聯繫人應用中建立聯繫人，只是建立了一個新的contact對象，上面代碼建立了一個空的contact對象，直到使用save方法纔會保存到聯繫人應用。

也能夠在建立時填充contact對象，以下在對象中填充了一個displayName屬性：

var newContact = navigator.contacts.create({"displayName": "Zhang San"});

contact對象包括如下屬性：

  • addresses: 包括聯繫人全部不一樣地址的數組。
  • birthday: 聯繫人的生日。
  • categories: 包括全部與聯繫人相關的用戶定義的分類的數組。
  • displayName: 聯繫人的顯示名。
  • emails: 包括聯繫人全部郵件地址的數組。
  • id: 聯繫人的全局惟一標識符。
  • ims: 包括聯繫人全部的即時消息地址的數組。
  • nickname: 聯繫人的暱稱。
  • note: 和聯繫人相關的記錄。
  • organizations: 包括和聯繫人相關的全部的組織的數組。
  • phoneNumbers: 包括全部與聯繫人相關的全部電話號碼的數組。
  • photos: 包括全部與聯繫人相關的圖像的數組。
  • urls: 包括全部與聯繫人相關的網頁的數組。

一些屬性是其餘屬性的數組。如聯繫人經常會有兩個或更多的郵件地址。

能夠像上例同樣在建立對象時填充contact對象，或者在建立後再填充對象的屬性。以下：

var newContact = navigator.contacts.create();

var fullName = "Zhang San";
newContact.displayName = fullName;
newContact.nickName = "GouSheng";

var tmpName = new ContactName();
tmpName.givenName = "San";
tmpName.familyName = "Zhang";     
tmpName.formatted = fullName;

newContact.name = tmpName;

上面代碼建立了一個新的contact對象，而後用值填充。其中填充了一個ContactName對象(Contacts API中定義的)，而後添加到newContact對象。ContactName對象包括如下屬性：

  • familyName
  • formatted
  • givenName
  • honorificsSuffix
  • middleName

有許多不一樣的能夠添加到聯繫人記錄的對象類型和對象數組。關於支持的選項詳情請參考API文檔。

設定好contact對象屬性後，必須調用save方法把改動添加到真實的聯繫人記錄中：

newContact.save(onSuccess, onError);

和其餘API同樣save方法接受成功和失敗函數做爲參數，失敗函數傳入了一個error對象識別錯誤緣由並作出相應的迴應，以下：

function onError(err) {
    console.log("Error Saving Contact: " + err.code);
}

若是要操做現有的聯繫人，能夠用API的find方法定位記錄，以下：

navigator.contacts.find(contactFields, onSuccess, onError, options);

上面的代碼的contactFields對象表示字段名數組，以下:

var contactFileds = ["displayName", "name", "phoneNumbers", "emails", "address"];

find方法定義了在查找結果中返回哪些字段值。options對象定義了查找如何執行的參數，以下：

var options = {filter: "Zhang", multiple: true};

fileter屬性用來向find方法提供用到的查找字符串。multiple屬性是一個布爾值控制是返回一個或多個聯繫人。

下面代碼完整展現瞭如何調用find方法，傳入聯繫人字段列表和查找選項。在onSuccess函數中，代碼把聯繫人詳細信息寫到控制檯上：

function findContact() {
    var contactFileds = ["displayName", "name", "phoneNumbers", "emails", "address"];
    var contactOptions = {
        filter: "Zhang",
        multiple: true
    };
    navigator.contacts.find(contactFields, onSuccess, onError, contactOptions);
}                

function onSuccess(contacts) {
    for (var i = 0; i < contacts.length; i++) {
        console.log("Contact[" + i + "]: " + JSON.stringify(contacts[i]));
    }
}

下面是上面代碼在個人設備上查找結果返回的JSON數據塊：

其中能夠看到電話號碼是如何組織的：

每一個電話號碼有一個type、value、ID和推薦狀態值。ID在把電話號碼添加到聯繫人記錄時自動建立。不一樣移動平臺管理聯繫人數據也不同，肯定在每一個平臺上都測試聯繫人格式。

當調用find方法並返回了一個contact對象時，就能夠改變對象屬性並用save方法把改動寫回聯繫人應用。若是要刪除聯繫人，首先要找到聯繫人對象的句柄並調用remove：

foundContact.remove(onSuccess, onFailure);

關於Contacts API還有不少，請參考Cordova文檔得到更多信息。

播放/記錄媒體文件

Cordova API包括一個Media API讓應用能記錄或播放媒體文件。用它能夠在手機後臺播放音頻文件或玩桌面視頻遊戲。

首先要安裝插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

Media API像其餘API同樣也是異步的，但觸發回調函數的有些不同。要用API，應用要建立一個Media對象，以下：

var mediaObj = new Media(srcFile, onSuccess, onError, onStatus);

這樣建立了一個mediaObj對象，它指向一個由srcFile參數指定的媒體文件。應用尚未打開或鏈接文件，只是建立了一個引用文件的對象。

onSuccess和onFailure函數並不像之前的同樣觸發。上面代碼中的回調函數實際上在media對象建立後如下方法調用時調用：

  • getCurrentPosition
  • getDuration
  • pause
  • play
  • release
  • seekTo
  • setVolume
  • startRecord
  • stop
  • stopRecord

好比要播放一個叫soundtrack.mp3的媒體文件，代碼能夠這麼寫：

srcFile = 'soundtrack.mp3';
var mediaObj = new Media(srcFile, onSuccess, onError, onStatus);
mediaObj.play();

function onSuccess() {
    console.log("Media: Success");
}               

function onError(error) {
    alert('Media Error: ' + error.code + ': ' + error.message);
}

function onStatus(statCode) {
    console.log("Media status: " + statCode);
}

中止播放只需調用mediaObj.stop();上面代碼的onStatus函數傳遞了一個狀態代碼參數讓應用理解媒體播放或記錄的狀態。可能的狀態代碼以下：

  • Media.MEDIA_NONE
  • Media.MEDIA_STARTING
  • Media.MEDIA_RUNNING
  • Media.MEDIA_PAUSED
  • Media.MEDIA_STOPPED

使用Media API中全部的方法和回調函數能夠構建一個完整的媒體播放應用，或者不用任何UI加載和播放音頻文件。API還爲開發者提供了可擴展性。

Cordova應用存儲打包的媒體文件的位置因不一樣的移動設備平臺而不一樣。如Android中位於/android_asset文件夾中。

InAppBrowser

InAppBrowser的版本和Cordova API的版本更接近，容許在在單獨的窗口中加載網頁。例如要嚮應用用戶展現其餘網頁。固然能夠很容易地在應用中加載網頁內容並管理，但有時候須要不一樣的用戶體驗，InAppBrowser加載網頁內容，應用用戶能夠更方便的直接返回到主應用。

使用前首先安裝InAppBrowser插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

加載內容

使用以下代碼在窗口打開網頁內容：

var ref = window.open('http://www.segmentFault.com', '_blank', 'location=yes');

上面代碼打開一個網址並返回一個表示瀏覽器窗口的對象。稍後能夠用這個對象和瀏覽器窗口交互。也能夠建立一個瀏覽器窗口但不顯示，以下：

var ref = window.open('http://www.segmentFault.com', '_blank', 'hidden=yes');

以後要想顯示瀏覽器窗口，以下:

ref.show();

window.open方法的參數中，_blank告訴應用在自已的窗口中打開內容；也能夠用_self，即在當前窗口中打開頁面，_system在默認的網頁瀏覽器打開內容。使用_self的問題是加載的網頁替換了當前應用的網頁內容，對於用戶無法回退。

'location=yes'告訴InAppBrowser在瀏覽器窗口中顯示頁面地址。還有幾個其餘選項在加載頁面時使用，這些選項因移動設備平臺而異，更多信息請參考Cordova文檔。調用的結果以下圖，用戶能夠點擊"X"按鈕返回原應用：

圖片描述

要關閉頁面地址欄，找開頁面時使用以下代碼：

var ref = window.open('http://www.segmentFault.com', '_blank', 'location=no');

也能夠加載本地內容，以下，在項目的www文件夾中有一個叫help.html的文件：

var ref = window.open('help.html', '_blank');

想關閉網頁只須要調用close方法：

ref.close();

瀏覽器窗口事件

應用在不少場景下須要知道在InAppBrowser窗口中進行的狀況。爲此InAppBrowser API在窗口生命週期的不一樣時期觸發不一樣事件。支持的事件有：

  • loadstart: 在InAppBrowser開始加載一個URL時觸發。
  • loadstop: 在InAppBrowser完成加載URL時觸發。
  • loaderror: 在InAppBrowser加載URL遇到錯誤時觸發。
  • exit: 在InAppBrowser窗口被關閉時觸發(由用戶或應用調用close方法)。

如下是一些代碼段，用InAppBrowser打開一個本地HTML文件，而後爲每一個窗口事件定義了事件監聽器：

var ref = window.open('help.html', '_blank');
ref.addEventListener('loadstart', onEvent);
ref.addEventListener('loadstop', onEvent);
ref.addEventListener('loaderror', onLoadError);
ref.addEventListener('exit', onEvent);

除了錯誤事件其餘都用一個回調函數，是由於此時回調函數都傳入了一個event對象，它描述了觸發的事件，以下：

function onEvent(event) {
    console.log('Type: ' + event.type);
    console.log('URL: ' + event.url);

    // Do something based on event.type
}

開發者能夠查詢event.type併爲特定的事件並作適當的處理。

錯誤發生時，錯誤回調函數傳入了一個包括代碼和消息屬性的對象，以下。開發者以後查詢event.code，並顯示一個恰當的錯誤消息或者執行恰當的恢復步驟。

function onLoadError(event) {
    console.log('onLoadError: ' + event.code + '-' + event.message));
}

執行腳本

只是加載網頁是不夠的，可能會須要修改內容或執行頁面的一些js腳本。InAppBrowser有讓應用在窗口執行js代碼的方法executeScript，以下：

ref.executeScript(scriptInfo, onSucess);

scriptInfo參數定義了執行的js代碼和代碼位置，能夠直接傳入方法或從文件加載。要執行特定的js代碼，須要以code和一個包括字符串的值組成的屬性傳入一個js對象，其中字符串包括要執行的js代碼，以下：

{code: "$('#heading').replaceWith('<h2>This is some injected text</h2>');"}

上面代碼使用jQuery的replaceWith函數替換頁面的一些內容。

能夠在頁面加載完成後執行js代碼，通常是在頁面加載後執行js腳本的位置添加對executeScript的調用，如在loadstop事件監聽器中，以下：

var ref = window.open('help.html', '_blank', 'loaction=no');
ref.addEventListener('loadstop', function() {
    ref.executeScript({
        code: "$(#heading').replaceWith('<h2>This is some injected text</h2>');" 
    }, onSuccess);
});

除了直接傳入js代碼，還能夠把代碼保存到文件中併發文件名經過scriptInfo參數傳給executeScript，以下：

{ file: "myscript.js" }

執行結果是同樣的，只是示例代碼的js代碼來源改變了。

插入CSS

和在InAppBrowser中執行js腳本同樣，也可使用方法向窗口中插入CSS。好比像網頁來源於外部，想要改變它的樣式來匹配應用的其餘部分。調用InAppBrowser的insertCSS方法，傳入CSS或CSS文件的引用，以下：

ref.insertCSS(cssInfo, onSuccess);

cssInfo參數定義了插入的CSS腳本和它的位置，直接傳入或從文件加載。要傳入CSS腳本，要使用js對象，它包括code和一個值，值由表示CSS腳本的字符串構成，以下：

{code : "body {background-color:black; color:white}"}

不能在頁面加載完成以前插入CSS，以下面代碼在loadstop事件監聽器處理：

var ref = window.open('help.html', '_blank', 'location=no');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({
        code: "body {background:black; color:white}"
    }, onSuccess);
});

也能夠把CSS保存到文件，把文件名經過cssInfo參數傳給insertCSS方法，以下：

{file: "mystuff.css"}

閃屏

Cordova提供了Splashscreen API可以用來在Cordova應用啓動時顯示自定義的閃屏。使用前首先安裝插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

要在建立適當的閃屏圖像文件用於支持不一樣設備平臺，還有各操做系統中各類表單元素。還有些要你爲每一個移動設備平臺作手動設置，即修改Cordova容器代碼。

若是有合適的圖像並添加到Cordova和平臺項目中，能夠用以下代碼展現和隱藏應用閃屏：

function showSplash() {
    navigator.splashscreen.show();
    setTimeout(hideSplash, 2000);
}            

function hideSplash() {
    navigator.splashscreen.hide();
}

上面例子中showSpash函數顯示了閃屏，而後設置一個定時器讓閃屏2秒後隱藏。

關於API的部分就先介紹到這裏了，本篇內容比較多。下一篇介紹如何建立插件，再以後以一個綜合示例結束。

本篇代碼連接：http://yunpan.cn/cctIXAtxdv5GC （提取碼：25c1）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程