在介紹外掛的使用之前，我們有必要先大致瞭解下外掛的原理

外掛工作原理分析

一個外掛是如何正確地在IONIC框架下執行的呢?

前臺的HTML/JS程式碼又是如何與後面具體平臺做資料互動的呢?

這個就需要對外掛的工作原理及各個模組之間的流程關係有一個基本的瞭解。

為了讓外掛能夠訪問具體平臺系統的程式碼，Cordova提供了對應的標準封裝API來完成，下面的圖簡單地示意了Android平臺情況下的封裝過程：

當用戶使用ionic platform add android這個命令之後，
ionic專案會自動將外掛下的Java檔案copy到platform/android/目錄下面，同時將JS也copy到platform/android/目錄下，最終使用Android的編譯工具(aapt/aidl/dx/apkbuilder等)生成.APK應用程式。

對於一個新建的ionic專案，目錄結構如下：

我們添加了一個相機外掛，對於該外掛下的java檔案，可以發現當前整個專案下只有該處存在這個java檔案：（在目錄：專案根目錄\plugins\cordova-plugin-camera\src\android下）

當我們使用ionic platform add android這個命令之後，可以發現，我們的外掛相關的java檔案被copy到platform/android/目錄下面，即（專案根目錄\platforms\android\src\org\apache\cordova\camera）

當我們用ionic build android命令編譯過後，可以發現，這些java檔案被編譯成了class檔案：

資料的互動

接著之前的繼續。

我們已經清楚JS和ANDROID平臺之間分別通過JS的CORDOVA.EXEC()和JAVA的CORDOVAPLUGIN.EXECUTE()函式來對接。

這兩個介面的引數對應關係如下所示：

由於JS傳送到Java的資料已經作為函式的引數傳入, 所以函式中的回撥引數，主要是幫助Java側反饋資料給JS側所用。

Cordova使用了org.apache.cordova.PluginResult來完成，當中的PluginResult.Staus代表JS呼叫外掛成功與否的狀態。

通常程式碼中判斷狀態值是否為PluginResult.Staus.OK，來確認呼叫結果成果或者失敗。

使用cordova的camera外掛

cordova plugin add cordova-plugin-camera

當我們通過上面的命令將外掛新增進專案之後就可以直接在專案中使用它了。

這裡我們就使用官網上的例子來演示一下怎麼使用。

這裡我只選擇了最簡單的功能，即拍照並且顯示在我們的頁面中。

首先，我們直接使用ionic創建出來的預設的專案（懶得改了，直接在第一個tab修改）。

在templates/tab-dash.html中修改我們的程式碼：

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2> Camera Test </h2>
    <img id="imageFile"  src="./img/ionic.png"  width="100px" height="100px"/>

    <button ng-click="openCamera()">openCamera</button>

  </ion-content>
</ion-view>

效果如下：

然後我們在 controllers.js中修改“DashCtrl”這個controller：

.controller('DashCtrl', function($scope) {

  $scope.image = "./img/ionic.png";
  $scope.openCamera = function() {
    var srcType = Camera.PictureSourceType.CAMERA;
    var options = setOptions(srcType);

    navigator.camera.getPicture(function cameraSuccess(imageUri) {

      displayImage(imageUri);

    }, function cameraError(error) {
      console.debug("Unable to obtain picture: " + error, "app");

    }, options);
  }


  function setOptions(srcType) {
    var options = {
      // Some common settings are 20, 50, and 100
      quality: 50,
      destinationType: Camera.DestinationType.FILE_URI,
      // In this app, dynamically set the picture source, Camera or photo gallery
      sourceType: srcType,
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      allowEdit: true,
      correctOrientation: true  //Corrects Android orientation quirks
    }
    return options;
  }

  function displayImage(imgUri) {
    var elem = document.getElementById('imageFile');
    elem.src = imgUri;
  }

})

實現效果如下：

當我們單機按鈕之後就會開啟相機

拍完照選擇儲存之後就會回到我們之前的介面，這時我們的img就修改為我們修剪的圖片了。

這裡我們簡單的說明下上面的程式碼：

getPicture函式的語法如下：

camera.getPicture(successCallback, errorCallback, options)

在我們進行拍照之前，需要先給getPicture設定options。

在上面的程式碼中，我們可以看到我們在這裡返回了一個options：

var options = setOptions(srcType);

這裡的srcType的值是Camera.PictureSourceType.CAMERA;。

而只有當Camera.sourceType 等於 Camera.PictureSourceType.CAMERA 時，我們的getPicture函式才能開啟手機預設的相機程式。

更詳細的說明還是參照官網。（如果我上面有理解得不對的地方歡迎指出）