icordova拍照_ionic2/3实战-添加拍照功能cordova-plugin-camera

效果演示

源代码已上传到github

由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准

ionic2.0插件的使用方式和ionic3.0已不一样

ionic2实战-添加拍照功能cordova-plugin-camera.gif

安装插件

安装cordova-plugin-camera插件,安装过程如下图

我在第一次执行ionic platfrom add android时抛出了一个异常,解决了,异常详情看这里

当执行ionic platfrom add android,没有问题时,说明我们的环境没有问题啦.然后在写代码.

安装cordova-plugin-camera

封装拍照插件

第一步我在src根目录新建一个providers文件夹,在这个文件夹新建一个NativeService.ts文件,叫NativeService是因为这个ts专门写app所有插件相关的代码,不止只有拍照插件

NativeService.ts完整代码如下

这里是ionic2.0插件的使用方式.ionic3.0使用方式看这里

/**

* Created by yanxiaojun617@163.com on 01-03.

*/

import {Injectable} from '@angular/core';

import {ToastController, LoadingController} from 'ionic-angular';

import {Camera} from 'ionic-native';

@Injectable()

export class NativeService {

private toast;

private loading;

constructor(private toastCtrl: ToastController, private loadingCtrl: LoadingController) {

}

/**

* 统一调用此方法显示提示信息

* @param message 信息内容

* @param duration 显示时长

*/

showToast = (message: string = '操作完成', duration: number = 2500) => {

this.toast = this.toastCtrl.create({

message: message,

duration: duration,

position: 'top',

showCloseButton: true,

closeButtonText: '关闭'

});

this.toast.present();

};

/**

* 关闭信息提示