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

一、外掛工作原理分析

一個外掛是如何正確地在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

四、外掛使用

1、仿微信模式（拍照，從相簿選擇兩種模式），做好模式選擇模板（photo.html）

1  <ion-modal-view style="min-height:90px;height:90px;top:40%" id="photo">
2    <ion-content class="padding" scroll="false" style="height:90px;padding:0px;">
3        <button class="button button-full button-calm photo" style="width:100%;marigin-top:0px;marigin-bottom:0px;border-bottom:1px solid white" ng-click="takePhoto(str,data)">拍照</button>
4        <button class="button button-full button-calm photo" style="width:100%;marigin-top:0px;marigin-bottom:0px;" ng-click="takePhoto1(str,data)">從相簿選擇</button>
5    </ion-content>
6  </ion-modal-view>

2、modal展示

 1       $ionicModal.fromTemplateUrl('templates/photo.html', {
 2             scope: $scope
 3           }).then(function(modal) {
 4             $scope.modal1 = modal;
 5       });
 6       $scope.show1 = function(str,taskData) { 
 7             $scope.str=str;
 8             $scope.data=taskData;
 9             $scope.modal1.show();
10       };

3、介面呼叫modal，展示模板介面：通過選擇拍照，呼叫takePhoto；選擇從相簿選擇，呼叫taskPhoto1；

<button ng-click="show1('afterImg',taskData)" style="width:132px;height:173px;background:url('camera.png') no-repeat;"></button> 

4、呼叫攝像頭

  1 //呼叫攝像頭
  2   $scope.takePhoto = function (str,taskData) {
  3     $scope.modal1.hide();
  4     document.addEventListener("deviceready", function () {
  5            var options = {
  6                 quality: 100,                                            //相片質量0-100
  7                 destinationType: Camera.DestinationType.FILE_URI,        //返回型別：DATA_URL= 0，返回作為 base64 編碼字串。 FILE_URI=1，返回影像檔的 URI。NATIVE_URI=2，返回影象本機URI 
  8                 sourceType: Camera.PictureSourceType.CAMERA,             //從哪裡選擇圖片：PHOTOLIBRARY=0，相機拍照=1，SAVEDPHOTOALBUM=2。0和1其實都是本地相簿
  9                 allowEdit: false,                                        //在選擇之前允許修改截圖
 10                 encodingType: Camera.EncodingType.JPEG,                   //儲存的圖片格式： JPEG = 0, PNG = 1
 11                 targetWidth: 375,                                        //照片寬度
 12                 targetHeight: 667,                                       //照片高度
 13                 mediaType: 2,                                             //可選媒體型別：圖片=0，只允許選擇圖片將返回指定DestinationType的引數。 視訊格式=1，允許選擇視訊，最終返回 FILE_URI。ALLMEDIA= 2，允許所有媒體型別的選擇。
 14                 cameraDirection: 0,                                       //槍後攝像頭型別：Back= 0,Front-facing = 1
 15                 popoverOptions: CameraPopoverOptions,
 16                 saveToPhotoAlbum: true,                                   //照片是否儲存到相簿
 17                 correctOrientation:true                                   //此項為true,照片於拍照方向一樣（但個別圖片依然會出現旋轉90度問題）；為false圖片會選擇90度；
 18               };
 19 
 20           $cordovaCamera.getPicture(options).then(function (imageData) {  //此處根據實際需求，對上傳檔案地址（imageData）進行相應的操作，本專案是將其放入陣列當中，以便通過ng-reapeat進行迴圈展示
 21               if(str=="img"){
 22 /*                  $scope.isShow=false;*/
 23                   $scope.arrayObj.push(imageData);
 24                   $scope.id=taskData.id;
 25 /*                  $scope.imageSrc = imageData;*/
 26               }else{
 27 /*                  $scope.isShowAfter=false;*/
 28                   $scope.arrayObj1.push(imageData);
 29                   $scope.id1=taskData.id;
 30 /*                  $scope.imageSrcAfter = imageData;*/
 31               }
 32 /*            $scope.uploadPhoto(taskData.id);*/
 33           }, function (err) {
 34             // error
 35           });
 36 
 37     }, false);
 38   };
 39 //呼叫攝像頭（從相簿選擇）
 40   $scope.takePhoto1 = function (str,taskData) {
 41     $scope.modal1.hide();
 42     document.addEventListener("deviceready", function () {
 43            var options = {
 44                 quality: 100,                                            //相片質量0-100
 45                 destinationType: Camera.DestinationType.FILE_URI,        //返回型別：DATA_URL= 0，返回作為 base64 編碼字串。 FILE_URI=1，返回影像檔的 URI。NATIVE_URI=2，返回影象本機URI 
 46                 sourceType: Camera.PictureSourceType.PHOTOLIBRARY,             //從哪裡選擇圖片：PHOTOLIBRARY=0，相機拍照=1，SAVEDPHOTOALBUM=2。0和1其實都是本地相簿
 47                 allowEdit: false,                                        //在選擇之前允許修改截圖
 48                 encodingType: Camera.EncodingType.JPEG,                   //儲存的圖片格式： JPEG = 0, PNG = 1
 49                 targetWidth: 375,                                        //照片寬度
 50                 targetHeight: 667,                                       //照片高度
 51                 mediaType: 2,                                             //可選媒體型別：圖片=0，只允許選擇圖片將返回指定DestinationType的引數。 視訊格式=1，允許選擇視訊，最終返回 FILE_URI。ALLMEDIA= 2，允許所有媒體型別的選擇。
 52                 cameraDirection: 0,                                       //槍後攝像頭型別：Back= 0,Front-facing = 1
 53                 popoverOptions: CameraPopoverOptions,
 54                 saveToPhotoAlbum: true,
 55                 correctOrientation:true
 56               };
 57 
 58           $cordovaCamera.getPicture(options).then(function(imageData) {
 59               if(str=="img"){                                             //標記str中，如果從相簿選擇的檔案是mp4格式，將其放入arrayVideo陣列，進行迴圈顯示
 60 /*                  $scope.isShow=false;*/      
 61                   var type=imageData.split('.');
 62                   var last=type.length-1;
 63                    if(type[last]=='mp4'){
 64                       $scope.arrayVideo.push(imageData);
 65                    }
 66                    if(type[last]=='jpg'||type[last]=='png'){
 67                       $scope.arrayObj.push(imageData);
 68                    }
 69                   $scope.id=taskData.id;
 70 /*                  $scope.imageSrc = imageData;*/
 71               }else{
 72 /*                  $scope.isShowAfter=false;*/
 73                   $scope.arrayObj1.push(imageData);
 74                   $scope.id1=taskData.id;
 75 /*                  $scope.imageSrcAfter = imageData;*/
 76               }
 77 /*            $scope.uploadPhoto(taskData.id);*/
 78           }, function (err) {
 79             // error
 80           });
 81 
 82     }, false);
 83   };
 84   $scope.uploadPhoto = function (id,array) {
 85       for(var i=0;i<array.length;i++){
 86           var str=array[i].substring(0,4); 
 87           
 88           if(str!='http'){                                                //判斷是否已經上傳到伺服器，如果已經上傳，則不再重複上傳（伺服器獲取的以http開頭，從相簿選擇或者拍照的地址以file開頭）
 89                var url='http://www.xxx.com/uploadProcessFile';            //檔案上傳地址
 90                var options = new FileUploadOptions();
 91                   var params = {
 92                     id: id
 93                   };
 94                   options.params = params;
 95                   options.fileKey = "uploadFile";
 96                   options.fileName = array[i].substr(array[i].lastIndexOf('/') + 1);           //獲取檔名字，此處如果不寫，後臺處理預設當圖片，則造成選擇的是視訊，但是上傳到伺服器上則是無法開啟的圖片
 97 
 98                  $cordovaFileTransfer.upload(encodeURI(url),array[i], options)
 99                            .then(function (result) {
100                              console.log(JSON.stringify(result));
101                              console.log("success");
102                            }, function (err) {
103                              console.log(JSON.stringify(err));
104                              console.log("fail");
105                            }, function (progress) {                                            //上傳圖片進度條展示
106                               $timeout(function () {
107                                     var uploadProgress = (progress.loaded / progress.total) * 100;
108                                     $ionicLoading.show({
109                                         template: "已經上傳：" + Math.floor(uploadProgress) + "%"
110                                     });
111                                     if (uploadProgress > 99) {
112                                         $ionicLoading.hide();
113                                     }
114                                 })
115                  });
116           }
117       }
118     };
119  

 ionic也是在初步的學習當中，如果有好的實現方法，歡迎交流討論~