上一篇博客讲了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的更多相关文章

  1. Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能

    Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...

  2. 【转】NativeScript的工作原理:用JavaScript调用原生API实现跨平台

    原文:https://blog.csdn.net/qq_21298703/article/details/44982547 -------------------------------------- ...

  3. vue 开发系列(五) 调用原生API

    概要 我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持. http://www.html5plus.org/doc/ 实现 1.在hbuild ...

  4. phoneGap+cordova+ionic混合app开发环境搭建

    参考链接:http://www.w2  bc.com/article/177257 待补充

  5. IONIC调用原生的等待对话框

    ngCordova提供了progressIndicator插件,用以方便的显示等待对话框,但是目前版本仅支持安卓版本.为了让苹果版本也显示,可以到以下地址下载通用的插件,JS部分的代码无需改变: ht ...

  6. Cordova+Ionic之坑

    命令:ionic platform add android 报错:Unable to start the daemon process…… 解决: 1)添加环境变量[_JAVA_OPTIONS],值: ...

  7. cordov vue项目中调用手机原生api

    cordova不仅可以把vue项目打包成app,还可以让vue借助cordova调用手机原生的api 比如拍照 比如图片上传 比如定位 比如扫描二维码 比如支付等等 Vue Cordova教程-Vue ...

  8. 使用JavaScript调用手机平台上的原生API

    我之前曾经写过一篇文章使用Cordova将您的前端JavaScript应用打包成手机原生应用,介绍了如何使用Cordova框架将您的用JavaScript和HTML开发的前端应用打包成某个手机平台(比 ...

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

    废话不多说:ionic-native-transitions调用原生页面切换实现ionic路由切换,从而大大提升ionic应用的性能. ionic-native-transitions是一个ionic ...

随机推荐

  1. RQNOJ #204 特种部队 sol

    link 首先我们可以注意到一个非常无聊的性质.先一直向右边走,然后折返回来向左边走,本质上与先向右走,然后向左走,再向右走这样循环走完整个路程是一致的. 根据这个性质,我们可以将向左走与向右走两个东 ...

  2. Luogu P1349 广义斐波那契数列

    解题思路 既然广义斐波那契,而且数据范围这么大,那么我们使用矩阵快速幂来进行求解.大家都知道斐波那契的初始矩阵如下 $$\begin{bmatrix}1&1\\1&0\end{bmat ...

  3. ZOJ - 3992 - One-Dimensional Maze (思维)

    题意: 一条长度为n的直线,你一开始在位置m上 其中每个整点都有一个字符'L'或'R',如果是'L'那么你必须往左走一步,否则往右走一步 如果你到达位置1或位置n你任务就完成了 不过有可能你永远到不了 ...

  4. 洛谷 1894 [USACO4.2]完美的牛栏The Perfect Stall

    [题解] 其实是个二分图最大匹配的模板题,直接上匈牙利算法就好了. #include<cstdio> #include<algorithm> #define N 1010 #d ...

  5. 哈希表模板(Hash set)

    省选前最后的复(chui si)习(zheng zha). 上模板吧 namespace Hash_Table{ #define inf ~0U>>1 #define MaxN 10010 ...

  6. centos7 mysql安装与用户设置

    1.环境:Centos 7.0 64位2.mysql版本:5.73.安装:https://dev.mysql.com/doc/refman/5.7/en/installing.html3.1.创建my ...

  7. FLASH BACK

    overview of different flashback technologies flashback query(including flashback query, flashback ve ...

  8. docker run和nsenter

    docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...

  9. 《Linux Device Drivers》第八章 分配内存——note

    本章主要介绍Linux内核的内存管理. kmalloc函数的内幕 不正确所获取的内存空间清零 分配的区域在物理内存中也是连续的 flags參数 <linux/slab.h> <lin ...

  10. 自然语言处理中的Attention Model:是什么及为什么

    /* 版权声明:能够随意转载.转载时请标明文章原始出处和作者信息 .*/ author: 张俊林 要是关注深度学习在自然语言处理方面的研究进展,我相信你一定听说过Attention Model(后文有 ...