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 ...
随机推荐
- attack on titans(动态规划递推,限制条件,至少转至多方法,进击的巨人)
题目意思: 给n个士兵排队,每个士兵三种G.R.P可选,求至少有m个连续G士兵,最多有k个连续R士兵的排列的种数. 原题 Attack on Titans Time Limit: 2 Seconds ...
- 迷宫自动生成以及基于DFS的自动寻路算法
直接贴代码 #include<ctime> #include<conio.h> #include<iostream> #include<windows.h&g ...
- Ztree加载完成后显示勾选节点
①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
- 调用OpenSSL实现RSA加解密和签名操作
调用OpenSSL实现RSA加解密和签名操作 RSA公钥可以从证书和公钥文件,RSA私钥可以从私钥文件中提取.OpenSSL使用了一种BIO抽象IO机制读写所用文件,可以打开文件相关联的BIO,通过B ...
- Python学习笔记之生成器、迭代器和装饰器
这篇文章主要介绍 Python 中几个常用的高级特性,用好这几个特性可以让自己的代码更加 Pythonnic 哦 1.生成器 什么是生成器呢?简单来说,在 Python 中一边循环一边计算的机制称为 ...
- 洛谷 1472 奶牛家谱 Cow Pedigrees
[题解] DP题,我们用f[i][j]表示有n个节点.高度小于等于j的二叉树的个数.f[i][j]=sigma(f[t][j-1]*f[i-t-1][j-1]) t是1~i-1范围内的奇数. #inc ...
- saltstack(三) grains、pillar的使用
一,grains grains: 这个跟puppet的facter功能一样.主要负责采集客户端一些基本信息, 这个也完全可以自定义,可以在客户端自定义,然后自动汇报上来:也可以从服务器端定义然后推下去 ...
- 调试pcb板子的步骤
在从外边焊回来的板子中查找问题的时候,如果只是简单的 一通乱调,很有可能一下子就调好了,但是大多数的时候是调了半天,不知道接下来该如何进行,因此,严格的按照步骤走,是个不错的想法: 1.拿到板子的第一 ...
- 【Codeforces 584D】Dima and Lisa
[链接] 我是链接,点我呀:) [题意] 让你把一个奇数n分成最多个质数的和 [题解] 10的9次方以内,任意两个质数之间的差距最大为300 因此可以这样,我们先从i=n-2开始一直递减直到i变成最大 ...
- vue项目使用static目录存放图片解决方案
我个人喜欢把所有引用文件全部放在打包文件src的同级文件static文件内部,方便整合. 提醒:vue项目中正常情况下图片是由 url-loader 处理,加入了hash值,如果放到static里面w ...