phonegap+cordova+ionic调用原生API

  上一篇博客讲了phonegap+cordova+ionic的环境搭建,今天再来分享一篇cordova调用原生API的文章。从技术角度上来讲,这并不是很难,只是有些细节要是没有注意,或者某些步骤不知道的,那么在坑里一时半会很难爬出来。所以这两篇博客旨在帮助小伙伴们节省更多的时间去做其他有意义的事情。

1、新建工程

  新建工程和添加平台支持的操作已经在上一篇博客中讲到了, 这里不再赘述。

  

  

2、Bower的使用

  首先确认是否安装了bower,如果没有安装,打开cmd命名,输入npm install -g bower。

  打开cmd命令,输入bower install ngCordova,如果出现以下信息,则表示本机没有安装git,因为bower管理的包的源码都托管在github网站上。

  

  Git的安装,可以直接在搜索引擎中输入 git for windows 64,下载一个git安装文件,点击安装,并把git.exe添加到环境变量中;也可以直接下载github的客户端工具,gitshell。具体安装方式可以在网上自行搜索。

  在这里,顺便讲一下bower安装js库、删除js库,查看安装js库的方式(以下三个步骤不是必须的,只是作为小插曲讲解):

  输入bower install jquery命令,安装jquery库文件,如果出现以下信息,表示安装成功:

  

  输入bower list 查看安装的js库文件:

  

  输入bower uninstall jquery,可以删除刚刚安装的js库文件:

  

  再输入bower list命令,我们会发现,安装的jquery已经不在目录中了:

  

3、安装ngCordova

  切换到工程目录下,输入 bower install ngCordova,会出现以下信息:(图中还有部分信息省略掉了,只截图了头部和尾部信息)。

  

  想要详细了解,可参考:http://www.haomou.net/2015/01/05/2015_ionic_ngCordova/

4、添加摄像头插件

  切换到工程目录下,输入cordova plugin add cordova-plugin-camera命令,出现以下信息,表示安装成功:

  

  更多插件信息:http://ngcordova.com/docs/plugins/camera/

5、修改项目

  所有准备工作完成以后,用编辑器打开新建的项目工程(我这里用的是webStorm),

  第一步:在index.html中手动引入ng-cordova.js文件。

  

  第二步:在controllers中添加ngCordova依赖。

  

  第三步:在详情页面添加一个按钮,用来触发调用摄像头操作。

  

  第四步:在详情页对应的controller中添加getCamera方法。

  

  第五步:在cmd中,进入工程目录,输入ionic run android命令,在手机上运行。

6、效果图

时间: 2024-08-26 19:44:25

phonegap+cordova+ionic调用原生API的相关文章

ionic 调用restful API services时全局错误处理的实现 或自定义错误处理的实现

往往我们的ionic程序需要调用API Service. 比如天气,地图等等.当这些API Service 不稳定或者不可访问时,我们可以通过在注册一个自定义的ErrorHandler, 来处理此类错误. 1.   将自定义错误处理类作为provider,  也就是Service.   在终端使用命令: ionic g provider GlobalErrorHandler .  ionic generate 命令行定义可以参考此处 2.     实现GlobalErrorHandler, 完整

Cordova+Ionic之坑

命令:ionic platform add android 报错:Unable to start the daemon process…… 解决: 1)添加环境变量[_JAVA_OPTIONS],值:“-Xmx512m”(512m是分配的内存空间,还可以是1024m.2048m等)(*自己测通) 2)网上说在“C:\Users\[USERNAME]\.gradle”目录下(新建或)编辑“gradle.properties”文件,添加(或修改)内容:org.gradle.jvmargs=-Xmx5

ionic-native-transitions调用原生页面切换实现ionic路由切换

废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic的的页面切换插件,主要功能是可以让我们在不改变ionic路由的情况下,实现调用原生的页面切换,从而提升App性能.还可以让原生页面切换和ionic页面切换同时存在. ionic-native-transitions演示图片: ionic-native-transitions  github地址 :

Zookeeper系列三:Zookeeper客户端的使用(Zookeeper原生API如何进行调用、ZKClient、Curator)

一.Zookeeper原生API如何进行调用 准备工作: 首先在新建一个maven项目ZK-Demo,然后在pom.xml里面引入zk的依赖 <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookeeper</artifactId> <version>3.4.10</version> </dependency> 1. 连接zk并

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

[Android_HTML5]基于PhoneGap(Cordova)框架的HTML5开发

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的优势.因为它采用HTML5+JavaScript的模式来开发应用.PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等..这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了.Phone

看看国外的phonegap和ionic移动app开发框架有多火

在2010年左右的时候,在android内存还在512内存的时候,和多人对phonegap提出了很多的质疑,以及一些不正当竞争的国内公司,用自己的框架和jqueryMobile+phonegap组合来给phonegap泼凉水,懂得人一看就呵呵了. 在当今手机硬件发展光速的年代(夸张了),如果你还质疑它的速度以及未来的速度,我们就呵呵了. 下面给大家分享一下外的phonegap和ionic移动app开发框架到底有多火: 多的不说了先看图: phonegap网站的日访问量:  ip:555000 基

ionic调用相机

1- 首先至少要配置好ionic和cordova环境 这里提供一下Cordova的安装命令:npm install -g cordova ionic 更新是update ionic start myApp blank --type=ionic1 上面一句最后一个参数blank就是你要新建的项目的类型,还可以用sidemenu, tabs这些参数指定一个空白项目的类型. --type=ionic1制定项目版本 这个命令可能百分之八十跑不起来   可以自己在git上面存个常用的 2- cd到你的项目

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后