ionic cordova plugin 安装和使用

注意事项

  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();
                  }
              });
          }
      ]);
时间: 2024-10-10 04:30:05

ionic cordova plugin 安装和使用的相关文章

ionic cordova plugin for ios

源代码结构目录: payplugin: |_src |_android |_PayPlugin.java |_ios |_CDVPayPlugin.h |_CDVPayPlugin.m |_www |_payplugin.js plugin.xml --====================================== payplugin/www/payplugin.js var exec = require('cordova/exec');/*window.payplugin = f

cordova plugin 大全及安装命令

前言:用cordova开发hybrid app的过程中,由于是html5开发的app,在手机上很多权限受限制,这就导致了我们需要安装很多插件来弥补这一缺点.在网上搜了好久,感觉都不是很全,所以自己整理了一份cordova plugin清单. 1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plugin-network-information 3.获取G

安装nodejs+ionic+cordova环境心得

1.安装node-v0.10.38-x64.msi版本(从nodejs中下载最稳定版本,最后安装ionic安不上,然后又安装node-v0.10.38-x64.msi,再安装ionicok了.不知道是不版本的原因,最后再升级到新版本就ok了) 2.安装android sdk(installer_r24.1.2-windows.exe版本,必须在安装cordova之前安装android sdk,不然后面进行cordova 命令时,报错误....)注意更新sdk或者安装虚拟机时请用管理员身份启动,不

VS2017 Cordova 出现错误 @ionic/app-scripts 未安装

在安装vs2017 Cordova中遇到出现错误 @ionic/app-scripts 未安装 每次打开都会自动下载速度很慢,网上有很多帖子写到 进入windows的命令提示符. 输入: npm install @ionic/[email protected] --save-dev 如果顺利执行的话,再次进入VS2017就会发现@ionic/app-scripts已经更新好了. 3.6.2 然而,执行上面命令的时候出现了 Cannot download "https://github.com/s

在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova的优点就是插件多,ionic的优点是UI漂亮并且性能是目前hybird框架中最好的,本文涉及到的技术为作者所用,简述meteor+cordova+ionic的整合方法. 1,创建项目 meteor create projectName cd [projectName] meteor add urigo:angular meteor add

Android开发学习--Ionic+Cordova 环境搭建

我们看 Ionic 能给我们提供什么?  一个样式库,你可以使用它 来 装饰你的 HTML 网页 ,看起来 想 移动程序的 界面,什么 header .content.footer.grid.list.这貌似没什么 实质性的东西, sencha touch ,jq 都能提供 .一个用 AngularJS 写的 工具库,姑且叫它 组件库吧.Ionic的 grid 设计的比较合理,比 bootstrap的 更强大.当然它 还包含 了angular-animate.angular-resource.a

ionic3打包出错ionic cordova build android(系列一):could not find an installed version of gradle either in android studio

1.运行ionic cordova build android 时报错:could not find an installed version of gradle either in android studio. 2.问题原因:cordova在6.4.0(cordova-android在6.1.2)之后,会要求安装Gradle,基于Gradle来编译.打包android. 3.解决办法: 1)去Gradle官网:https://gradle.org/install 2)下载Gradle:htt

ionic cordova 热更新(引用自www.zyyapp.com/post/116.html)

上篇文章cordova 把html打包成安卓应用 http://www.zyyapp.com/post/115.html cordova 热更新是一个大坑,我看了一天一夜才明白.网上的教程都没说到重点,他们只说了在本地调试,没说发布到自己的服务器,只有一篇说了但是也不详细. 下边就是没有坑的教程,包你顺溜的走完流程. 打开命令提示符 进入工程目录,如果你只能在node.js command prompt 中运行cordova命令,那是因为你没有在系统变量path中添加node.js的路径. 添加

在ionic/cordova中使用极光推送插件(jpush)

Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容: Stpe3:创建极光项目 注册极光开发者账号,并新建项目并获取AppKey如下图: Stpe4:安装极光推送cordova插件(jpush-phonegap-plugin) 检查你的项目plugin目录中是否有[cordova-plugin-device]目录.若存在,建议先卸载他.卸载命令:ionic plugin