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和地理位置插件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM