Cordova入门系列（三）Cordova插件调用
上一章我們介紹了cordova android項(xiàng)目是如何運(yùn)行的，這一章我們介紹cordova的核心內(nèi)容，插件的調(diào)用。演示一個(gè)例子，通過cordova插件，去調(diào)用攝像頭。
?
一、插件的安裝以及基本信息：
我們先在項(xiàng)目中安裝調(diào)用攝像頭的插件cordova-plugin-camera，cd到hello下，執(zhí)行：
cordova plugin add cordova-plugin-camera 然后它會(huì)為我們的hello/plugins文件夾下添加cordova-plugin-camera插件（這個(gè)是整個(gè)這個(gè)插件模塊，可用于安卓和ios。卸載插件用cordova plugin remove?cordova-plugin-camera）；
同時(shí)也會(huì)在我們的platforms/android/platform_www/plugins下面添加對(duì)應(yīng)的安卓的插件cordova-plugin-camera（這個(gè)是根據(jù)對(duì)應(yīng)的平臺(tái)生成的對(duì)應(yīng)的插件內(nèi)容，只可用于本安卓平臺(tái)）；
也會(huì)在我們的資源文件夾assets/www/plugins下添加cordova-plugin-camera插件（這個(gè)資源文件夾下的所有的文件，才是真正的app運(yùn)行的時(shí)候調(diào)用的，加載的文件）；
還會(huì)為我們的src下添加org.apache.cordova.camera包以及對(duì)應(yīng)的java文件。
為什么要在項(xiàng)目中加這么多，這只是cordova的機(jī)制，我們不作重點(diǎn)研究。這三個(gè)目錄是有不同的作用的，但我們只重點(diǎn)關(guān)注assets/www目錄下。
?
除了上面這些，加完這個(gè)插件也會(huì)改變一些其他文件的內(nèi)容，首先看res/xml/config.xml，最后多了一項(xiàng)配置信息：
<feature name="Camera"><param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature> feature · name："js中間件通過它調(diào)用java方法"。
（中間件就是我們的插件對(duì)應(yīng)的一些js文件。我們寫的js程序通過這些插件（中間件）去調(diào)用Jjava原生內(nèi)容）
param · name："android-package" ? ? value：原生插件類的包類路徑。
打開assets/www下cordova_plugins.js，發(fā)現(xiàn)其中也增加了很多內(nèi)容：
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [{"id": "cordova-plugin-camera.Camera","file": "plugins/cordova-plugin-camera/www/CameraConstants.js","pluginId": "cordova-plugin-camera","clobbers": ["Camera"]},{"id": "cordova-plugin-camera.CameraPopoverOptions","file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js","pluginId": "cordova-plugin-camera","clobbers": ["CameraPopoverOptions"]},{"id": "cordova-plugin-camera.camera","file": "plugins/cordova-plugin-camera/www/Camera.js","pluginId": "cordova-plugin-camera","clobbers": ["navigator.camera"]},{"id": "cordova-plugin-camera.CameraPopoverHandle","file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js","pluginId": "cordova-plugin-camera","clobbers": ["CameraPopoverHandle"]}
];
module.exports.metadata =
// TOP OF METADATA
{"cordova-plugin-whitelist": "1.3.0","cordova-plugin-compat": "1.0.0","cordova-plugin-camera": "2.3.0"
};
// BOTTOM OF METADATA
}); id:插件中某個(gè)模塊或具體功能的id
file:這個(gè)id對(duì)應(yīng)的js文件（實(shí)現(xiàn)這個(gè)模塊或功能的文件）
pluginId:插件的ID，通過這個(gè)ID可以進(jìn)行插件的安裝和卸載
clobbers:H5或js通過它去調(diào)用js中間件（插件）中定義的方法
?
二、在代碼中如何調(diào)用攝像頭插件
上面我們說(shuō)的都是在執(zhí)行了cordova plugin add cordova-plugin-camera，安裝好插件之后所產(chǎn)生的內(nèi)容以及插件的一些基本信息，配置信息。接下來(lái)我們說(shuō)一下如何簡(jiǎn)單使用這個(gè)插件。
首先我們修改index.html（指的assets/www下的）
<!DOCTYPE html>
<html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <!-- 這里添加一個(gè)button去調(diào)用自己寫的拍照函數(shù) --> <button onClick="takePhoto()">拍照</button> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 接下來(lái)再修改index.js
//自己定義的拍照函數(shù)
function takePhoto() {//拍照 //navigator.camera就是上面我們所說(shuō)的clobbers定義的東西，用來(lái)調(diào)用插件中的方法的 //getPicture就是插件中調(diào)用攝像頭拍照的方法 navigator.camera.getPicture(takeSuccess, takeFail, { destinationType : Camera.DestinationType.FILE_URI }); //拍照成功后回調(diào) function takeSuccess(imageURI) { console.log('success' + imageURI); } //失敗后回調(diào) function takeFail(message) { navigator.notification.alert("拍照失敗，原因：" + message); } } 至此，我們的Cordova攝像頭插件已經(jīng)在代碼中調(diào)用好了，運(yùn)行我們的項(xiàng)目，就可以拍照了。（當(dāng)然，模擬器上是不行的，得用真機(jī)）
?
三、getPicture()方法詳解：
camera.getPicture(cameraSuccess, cameraError, cameraOptions)
選擇使用攝像頭拍照，或從設(shè)備相冊(cè)中獲取一張照片。圖片以base64編碼的字符串或圖片URI形式返回。返回值會(huì)按照用戶通過cameraOptions參數(shù)所設(shè)定的下列格式之一發(fā)送給cameraSuccess回調(diào)函數(shù)：
1.一個(gè)字符串，包含Base64編碼的照片圖像（默認(rèn)情況）。
2.一個(gè)字符串，表示在本地存儲(chǔ)的圖像文件位置。
?
cameraSuccess：
提供圖像數(shù)據(jù)的onSuccess回調(diào)函數(shù)。
function(imageData) {// 對(duì)圖像進(jìn)行處理
} 參數(shù)imageData：根據(jù)cameraOptions的設(shè)定值，為Base64編碼的圖像數(shù)據(jù)或圖像文件的URI。（字符串類型）
?
errorCallback:
提供錯(cuò)誤信息的onError回調(diào)函數(shù)。
function(message) {// 顯示有用信息
} 參數(shù)：message：設(shè)備本地代碼提供的錯(cuò)誤信息。（字符串類型）
?
cameraOptions：
定制攝像頭設(shè)置的可選參數(shù)。
{ quality : 75,destinationType : Camera.DestinationType.DATA_URL,sourceType : Camera.PictureSourceType.CAMERA,allowEdit : true,encodingType : Camera.EncodingType.JPEG,targetWidth : 100, targetHeight : 100 }; quality：存儲(chǔ)圖像的質(zhì)量，范圍是[0,100]。（數(shù)字類型）
destinationType：選擇返回?cái)?shù)據(jù)的格式。通過navigator.camera.DestinationType進(jìn)行定義。（數(shù)字類型）
備注：強(qiáng)烈建議將“Camera.destinationType”設(shè)為FILE_URI。
sourceType：設(shè)定圖片來(lái)源。通過nagivator.camera.PictureSourceType進(jìn)行定義。（數(shù)字類型）
allowEdit：在選擇圖片進(jìn)行操作之前允許對(duì)其進(jìn)行簡(jiǎn)單編輯。（布爾類型）
EncodingType：選擇返回圖像文件的編碼方式，通過navigator.camera.EncodingType進(jìn)行定義。（數(shù)字類型）
targetWidth：以像素為單位的圖像縮放寬度，必須和targetHeight同時(shí)使用。相應(yīng)的寬高比保持不變。（數(shù)字類型）
targetHeight：以像素為單位的圖像縮放高度，必須和targetWidth同時(shí)使用。相應(yīng)的寬高比保持不變。（數(shù)字類型）
MediaType：設(shè)置選擇圖片的類型，只有當(dāng)PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM時(shí)才會(huì)生效，該參數(shù)由nagivator.camera.MediaType (數(shù)字類型)定義
轉(zhuǎn)載于:https://www.cnblogs.com/Free-Thinker/p/10769079.html
總結(jié)
以上是生活随笔為你收集整理的Cordova入门系列（三）Cordova插件调用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转门派多少钱啊？
- 下一篇： 2.4 Go语言基础之切片