ionic實戰系列(二):使用cordova插件

本章主要關注cordova的各類插件，利用好手機(移動設備)的原生功能。首先cordova是一個將web網頁內嵌到原生app的平臺(核心功能)，而後cordova擁有的插件系統擴展了核心功能。

Cordova插件即插即用。有一些由官方項目組提供支持，有很好的維護。有一些是社區提交併維護，也許維護不那麼及時，那麼在使用前最好確認一下插件是否能在當前cordova正常工做(cordova插件和cordova版本匹配)。

本章包含

2.1插件使用考慮的問題

2.2安裝cordova插件

2.3使用cordova插件

2.4

 

第一章  Cordova插件

1.1 插件使用考慮的問題

1.插件是否是必需的

  考慮瀏覽器是否已經集成了這項功能。由於在很早以前瀏覽器不具有這些功能，因而有了相應功能的插件，而隨着平臺更新，那麼已經被原生的集成到瀏覽器了。

2.部分插件須要請求用戶受權

   好比使用相機、地理位置有用戶受權的步驟

3.插件的質量

   插件的侷限性，也可能存在一些問題。請閱讀插件文檔。

4.插件最好隨着系統升級一塊兒升級

   系統持續的升級會修改它們本身提供的API接口，而cordova須要使用這些系統接口，固然但願插件隨着系統升級一塊兒升級咯。

1.2安裝插件

準備:、

 

ionic start using-cordova

cd using-cordova

 

 

ionic start命令會執行操做，Creating an Ionic app in XXXXXXX\using-cordova based on the tabs template.

 

Error: Current working directory is not a Cordova-based project.直接敲cordova的命令確定是不對的，首先保證cordova有被全局的安裝(npm install -g cordova)。

 step1:cordova plugin search notification

接下來會在瀏覽器中打開http://cordova.apache.org/plugins/?q=notification網頁，那麼返回不少跟notification(消息通知)的有關的插件。

                                                                                                                                                  

  step2:點開連接，那麼進入插件的npmjs官網，那裏有安裝命令。

     

 

   cordova plugin add org.apache.cordova.dialogs

 step3:命令拉dialogs插件的最新版並添加到插件文件夾中，固然cordova有默認的一些插件的，每一個項目中僅須要操做一次便可。

1.3以dialog插件爲例談談如何使用插件

 

話說是能夠直接在npmjs官網中搜索"cordova pdialog"的，而後咱們一塊兒來閱讀如下插件官網的介紹咯。目前網址是https://www.npmjs.com/package/cordova-plugin-pdialog 

首先它說是An Android Progress Dialog Plugin for Cordova，也就是這個插件是一個android的進度對話框插件。而後說版本要求是android4+和cordova3+。內容主要分爲安裝和使用兩個部分。

step1:插件初始化

插件初始化有兩種方式:

(1).原生的JS使用插件

   window.addEventListener("deviceready",function(){

       if(window.cordova && window.cordova.plugins.Keyboard){

        cordova.plugins.keyboard.hideKeyboardAccessoryBar(true); 

  }

});

 給window添加監聽器addEventListener，第一個參數是deviceready時間，第二個參數是回調函數。

(2).經過ionic方法來使用插件

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
  });
})

step2.XXXXXX如何使用？？？只能等之後才能搞定了。

step3.模擬器和真機測試

他們各有優缺點。使用夜神nox模擬器測試。模擬器能夠修改地理位置的座標，不須要真正的實地測試不一樣地點的狀況了。固然也有模擬器沒法模擬的時候，好比ios的模擬器目前尚未方法使用照相機插件。若是插件一直調用失敗，或許要查看插件文檔來確認它是否能運行在模擬器中，那麼這時使用真機測試能幫助避免這個問題。建議是儘量使用真機測試。

1.4 Angular和Cordova陷阱

digest loop。angularjs可以當digest loop中的事件觸發時追蹤值的變化。它是一個封閉系統,javascript能夠脫離digest loop獨立運行，只是angular不會觸發任何改變。angular外部的任何改變均可以正常工做，可是你也許想要angular執行代碼的時候不觸發任何更新。當事件發生時，digest loop會收到通知，不然angular沒辦法響應值得更改，並不會繼續運行digest loop。

因此咱們碰到的比較常見的問題是如何讓angular知曉digest loop外圍的代碼更新狀況。Angular提供了通知更改，並觸發新的digest loop來更新angular的機制。

第二章  使用ngCordova和相機相冊插件

2.1爲何要使用ngCordova而不是直接使用Cordova API？

     (1) angular風格的統一接口操做

     (2)文檔完善且有實例以及文檔應用說明

      (3)ionic社區已經挑選好了很棒的插件，不用費力的尋找了。

       (4)自動處理雙向綁定更新

2.2安裝ngCordova

     (1)直接下載，而後把ng-cordova.js用script標籤引入。

     (2)angular.module("App",["ionic","ngCordova"]);

2.3使用相機相冊插件

     第1步:配置初始項目ionic start camera-app

              ionic platform add android添加安卓平臺

     第2步:把ng-cordova.js引入ionic項目的index.html文件

            <script src="lib/ng-cordova.js"></script>

            angular.module('starter', ['ionic', 'ngCordova'])

     第3步:cordova plugin add cordova-plugin-camera

     npmjs官網能夠找到這個命令行，

      

 

裝好以後，因而plugins文件夾增長了一個camera的目錄

   第4步:建立相冊視圖

      使用ion-view爲photo.html照片建立一個新的視圖,而後經過card組件來顯示相片。視圖中有兩個按鈕，容許用戶可使用相機拍照或者從圖庫中導入已存在的相片。

       (1)html部分:   

<ion-view title="相冊">
  <ion-header-bar class="bar-subheader">
    <button class="button button-positive button-clear" ng-click="getPhoto('camera')">
      拍照片
    </button>
    <button class="button button-positive button-clear" ng-click="getPhoto('photolibrary')">
      從相冊
    </button>
  </ion-header-bar>
  <ion-content>
    <div class="card list" ng-repeat="photo in photos">
      <div class="item item-image">
        <img ng-src="{{photo}}"/>
      </div>
    </div>
  </ion-content>
</ion-view>

(2)js部分(記得引入index.html中哦)
 路由

$stateProvider
.state('photos', {
  url: '/photos',
  templateUrl: 'views/photos/photos.html',
  controller: 'PhotosCtrl'
});
控制器

.controller('PhotosCtrl', function($scope,$ionicPlatform,$cordovaCamera) {

  $scope.photos=[];
  $scope.getPhoto=function(type){
    $ionicPlatform.ready(function(){

      $cordovaCamera.getPicture({
        quality: 75,
        targetWidth: 320,
        targetHeight: 320,
        saveToPhotoAlbum: false
      }).then(function(photo){
        $scope.photos.unshift(photo);
      },function(err){
        console.log(err);
      });
    });
  }
});
第5步:
ionic build android 
ionic run android
那麼在模擬器和真機上測試是否成功。須要注意的是目前尚未實現任何圖片的存儲操做，因此當離開相冊視圖的時候，全部照片數據都會被清空，稍後進應用和剛進來的時候是同樣的 。
真實的場景中咱們更但願將照片上傳到服務器中或者存儲到設備中。同時若是用戶拒絕向app提供相機或者圖庫權限，app雖然不會崩潰可是並不會有任何響應。更好的方式是遇到錯誤的時候使用彈窗提示。
整個實現很是簡單。
最終效果圖

 

  

         

part3 使用ngCordova和地理位置插件