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、效果图

phonegap+cordova+ionic调用原生API的更多相关文章
- Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能
Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...
- 【转】NativeScript的工作原理:用JavaScript调用原生API实现跨平台
原文:https://blog.csdn.net/qq_21298703/article/details/44982547 -------------------------------------- ...
- vue 开发系列(五) 调用原生API
概要 我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持. http://www.html5plus.org/doc/ 实现 1.在hbuild ...
- phoneGap+cordova+ionic混合app开发环境搭建
参考链接:http://www.w2 bc.com/article/177257 待补充
- IONIC调用原生的等待对话框
ngCordova提供了progressIndicator插件,用以方便的显示等待对话框,但是目前版本仅支持安卓版本.为了让苹果版本也显示,可以到以下地址下载通用的插件,JS部分的代码无需改变: ht ...
- Cordova+Ionic之坑
命令:ionic platform add android 报错:Unable to start the daemon process…… 解决: 1)添加环境变量[_JAVA_OPTIONS],值: ...
- cordov vue项目中调用手机原生api
cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照 比如图片上传 比如定位 比如扫描二维码 比如支付等等 Vue Cordova教程-Vue ...
- 使用JavaScript调用手机平台上的原生API
我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...
- ionic-native-transitions调用原生页面切换实现ionic路由切换
废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...
随机推荐
- [模拟赛FJOI Easy Round #2][T1 sign] (模拟+求字符串重复字串)
[题目描述] 小Z在无意中发现了一个神奇的OJ,这个OJ有一个神奇的功能:每日签到,并且会通过某种玄学的算法计算出今日的运势.在多次试验之后,小Z发现自己的运势按照一定的周期循环,现在他找到了你,请通 ...
- springcloud(十一):熔断聚合监控Hystrix Turbine
springcloud(十一):熔断聚合监控Hystrix Turbine
- web项目的创建
1) 创建Mave的webapp项目 2) 在Pom文件中添加servlet-api的依赖 <dependency> <groupId>javax.servlet</gr ...
- ACM-ICPC国际大学生程序设计竞赛北京赛区(2015)网络赛 Scores
#1236 : Scores 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 Kyle is a student of Programming Monkey Element ...
- hdu 2224 双调欧几里得旅行商问题tsp
/* 题意:平面上n个点,确定一条连接各点的最短闭合旅程且每个点仅用一次.这个解的一般形式为NP的(在多项式时间内可以求出) 建议通过只考虑双调旅程(bitonictour)来简化问题,这种旅程即为从 ...
- [codeVS1404] 字符串匹配
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 给你两个串A,B,可以得到从A的任意位开始的子串和B匹配的长度. ...
- 5-46 新浪微博热门话题 (30分)——unfinished HASH
5-46 新浪微博热门话题 (30分) 新浪微博可以在发言中嵌入“话题”,即将发言中的话题文字写在一对“#”之间,就可以生成话题链接,点击链接可以看到有多少人在跟自己讨论相同或者相似的话题.新浪微 ...
- 定义SAP Portal Url别名
Defining URL Aliases Use A URL alias is the part of the portal URL after the section that specifies ...
- 国际维修联合会IMA年度大会在瑞士圆满结束
瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...
- iOS截取视频某一帧图片(关键帧,AVAssetImageGenerator)
获取第一帧图片 导入 AVFoundation.Framework.CoreMedia.Framework 实现代码例如以下: + (UIImage*) thumbnailImageForVideo: ...