本章主要關注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和地理位置插件