1. 程式人生 > >ionic cordova plugin 安裝和使用

ionic cordova plugin 安裝和使用

add 插件安裝 註意 如果 對象 有效 ade tco ngcordova

註意事項

  1. ionic1需要ng-cordova
  2. plugin的使用都需要放到deviceready事件的回調中, 設備準備好了才能設備交互
  3. plugin只有在真機上才有效果, 模擬器(部分)和browser中是無效的

插件安裝

官網Doc - http://cordova.apache.org/docs/en/latest/guide/cli/index.html#add-plugins

ionic cordova plugin add cordova-plugin-camera

插件的引入

ionic依賴ng-cordova
直接使用CDN引入也可以: http://www.bootcdn.cn/ng-cordova/

引入位置是cordova之前, angularjs之後

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="https://cdn.bootcss.com/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
  <script src="cordova.js"></script>

插件的使用

模塊中加入ngCordova依賴, 插件都需要設備ready之後才能正常工作, 在deviceready事件回調中使用, 如果瀏覽器調試的話還需要處理對象不存在的異常.

  angular.module('myApp', ['ngCordova'])

      .controller('LoginCtrl', ['$ionicPlatform', '$cordovaDevice', '$scope',

          function($ionicPlatform, $cordovaDevice,
$scope) { $ionicPlatform.ready(function() { // cordova plugin only work on real Device, not Broswer if (window.device) { // $scope.data.device = $cordovaDevice.getDevice(); // $scope.data.cordova = $cordovaDevice.getCordova(); $scope.data.devicetype = $cordovaDevice.getModel(); $scope.data.devicename = $cordovaDevice.getUUID(); $scope.data.platform = $cordovaDevice.getPlatform(); $scope.data.version = $cordovaDevice.getVersion(); } }); } ]);

ionic cordova plugin 安裝和使用