Ionic项目中如何使用Native Camera

本文介绍如何在ionic项目中使用设备的camera。

Ionic版本：v3.2.0 / 2017-05-10 / MIT Licensed / Release Notes

=============================================================================

1）第一步是安装ionic-native/core。所有用到Native的功能，这一步不能省。npm install @ionic-native/core --save

ps：关于第一步，官方的说明是ionic-native/core是默认就包含在每一个Ionic应用里面的，注意下图中的红色矩形文字。

言外之意如果开发环境都是最新版本，期间也没有经历Ionic版本的升级，是可以忽略这一步的，不需要开发者手动安装。

但是，在实际开发过程中，很多时候可能会遇到下面这样的问题：

原因无非还是因为升级。。。升级。。。升级。我的项目创建是基于Ionic v2.2.2版本。但是期间经历过Ionic官方升级到v3.2.0版本。

所以解决的办法就是：

2）其次是给自己的项目添加cordova插件。ionic cordova plugin add cordova-plugin-camera

3）安装相应的node_moudles。npm install --save @ionic-native/camera

4）找到代码src->app下的app.moudle.ts文件， Add this plugin to your app's module。这一步可以放到最后做，但是一定不要忘。

5）其他就是添加你如何使用Camera的代码。

6）编码工作完成后，就是使用Chrome测试cordova插件了。

ionic cordova platform add browser

ionic cordova run browser

不是直接ionic serve的原因参见：http://www.cnblogs.com/crazyprogrammer/p/6878981.html

注意Chrome阻止网页使用摄像头的时候，记得修改为允许。

参考：

　　Ionic官网：http://ionicframework.com/docs/native/camera/

转载于:https://www.cnblogs.com/tomkart/p/6898783.html

Ionic项目中如何使用Native Camera相关推荐

在 ionic 项目中使用（迁移） capacitor
目录 1. 在已有项目中使用 capacitor 1.1 可以使用 capacitor 的项目要求 1.2 安装和初始化 capacitor 2. 在 ionic 项目中使用 capacitor 2. ...
Ionic项目中使用极光推送
附上我的真言(尽信书不如无书),别人的始终是别人的不一定适合你,你只有走出自己的路,才能达到武道巅峰( bb一下) ,你百度ioni极光推送会出现一大群,但是你按照他的来,一定会出现这样那样的bug, ...
ionic 项目中添加modal的步骤流程
1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...
ionic+vue+capacitor系列笔记--02项目中集成Capacitor，添加android，ios平台，真机运行项目
Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...
在ionic/cordova中使用百度地图插件
在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...
ReactNative 在丁香医生项目中引入的踩坑日记
ReactNative 在丁香医生项目中引入的踩坑日记 this没绑定到函数导致空指针参考 React-Native 踩坑第二弹-undefined is not a function(evalua ...
4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...
在原有Android项目中快速集成React Native
前言对于现有的大多数项目来说都不是从头构建的,而要在原有项目的基础上引入React Native则肯定和用react-native init xxx创建工程不同.因此下面就来说下具体操作.不过在真正 ...
rn项目假如cocoapods_React Native 如何集成到原生IOS项目中？
想了很久,要先介绍各种组件的实际应用好,还是先介绍怎么把React Native集成到原生项目好. 因为想起,一旦开始写各种组件的应用,就会花很长很长的篇幅,会把这个挺重要的内容抛到好远,而集成到原生 ...
ionic入门教程第五课-举例子说明异步回调$q及$q在项目中的用法
继上一节中我们使用到$q来辅助完成了按需加载文件. 这节课我先简要的介绍一下$q 先从功能上做简要介绍的话: 我想通过一个故事来简要的介绍$q,就那最近比较普遍的叫餐服务举例吧今天我想吃牛肉炒饭,所 ...

Ionic项目中如何使用Native Camera

Ionic项目中如何使用Native Camera相关推荐

最新文章

热门文章