官方插件文档：https://ionicframework.com/docs/native
前面提到，ionic集成原生的方式有两种：capacitor和cordova，在官方文档里也分别介绍了各自的插件使用方法。今天就分别探索一下这两种集成方式是怎样使用原生插件的。文章以最常用的相机插件为例。
一、Capacitor的相机插件
在使用capacitor插件之前需要在项目里安装一个名为@capacitor/core的工具包：
npm install @capacitor/core --save
如果在创建项目的时候选择集成capacitor，这个工具包应该会自动安装。
使用方法
1、在页面的.ts文件引入资源并实例化对象
import { Camera } from '@capacitor/core';
const {Camera} = Plugins;
async getPhotos() {
const photos= await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Prompt,
quality: 100
});
this.imgSrc = photos.webPath;
}
注意，这里定义方法需要用async声明，并且Camera.getPhoto()方法前面要加await，这是为了处理异步操作。
详细的参数说明我们可以进入源文件中查询，这里简单介绍一下常用的两个参数：
resultType（返回的结果类型）
这个参数是必填的，有三种类型：CameraResultType.Uri（图片的web地址）、CameraResultType.Base64（base64字符串）、CameraResultType.dataUrl（加上’data:image/png;base64,’的base64字符串）。这三种返回结果类型对应的字段分别是：webPath、base64String、dataUrl。
source（资源类型）
CameraSource.Prompt（选择弹窗）、CameraSource.Camera（直接打开相机）、CameraSource.Photos（直接打开相册）
效果展示（source = CameraSource.Prompt）
1、在浏览器中
测试结果：直接打开本地资源
2、在安卓手机
测试结果：弹出操作表，可以选择相册或者拍照
3、在苹果手机上
效果和安卓类似
写到这里，我突然产生一个想法，在手机上访问ionic的web服务能不能使用capacitor的插件。
首先，我们先指定IP启动服务：
ionic server --host 你的IP地址（默认localhost） --port 你的端口（默认8100）
服务起来之后，我们在手机浏览器上访问该IP（如：192.168.13.68:8100)，手机必须和服务在同一网段，接下来就是调用插件的方法了
1、在安卓手机上
2、在苹果手机上
显然，在手机web网页也是可以借助capacitor调用手机硬件，这是cordova的插件无法做到的。
另外两种获取图片的方式（CameraSource.Camera（直接打开相机）、CameraSource.Photos（直接打开相册））就不介绍了，大家可以自己试一下。
二、cordova的相机插件
1、禁用capacitor
ionic integrations disable capacitor
2、添加平台
ionic cordova platform add android/ios
3、安装插件
ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera
4、使用插件
首先在app.module.ts全局引入服务
在ts文件中的部分代码
import {Camera} from '@ionic-native/camera/ngx';
constructor( private camera: Camera) {}
getPhotos() {
this.camera.getPicture({
sourceType: 1 // PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2
});
}
不过在打包的过程中报错了：
应该是Camera服务需要依赖 @ionic-native/core这个服务
那就安装一下咯
npm install @ionic-native/core
5、效果展示
在浏览器中无法使用：
但是在手机上是可以打开相机的
对比两种集成方式调用相机的方法，我们发现使用capacitor只需要安装和引用@capacitor/core这个服务就可以使用它提供的所有原生api，而集成cordova则需要安装用到的所有模块和cordova插件。显然，在集成capacitor而不安装cordova插件的情况下，是不能使用cordova的插件来调用手机硬件，但是我们在集成cordova并安装@capacitor/core之后可不可以使用capacitor调用手机硬件呢？
1、安装和引用@capacitor/core 上面已经介绍了，这里不做过多说明
import { Camera } from '@capacitor/core';
const {Camera} = Plugins;
2、调用相机
async getPhotos() {
const photos= await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Prompt,
quality: 100
});
this.imgSrc = photos.webPath;
}
结果展示
结论：在苹果手机上，使用CameraSource.Camera可以直接打开相机，使用另外两种方式都如图所示；而在安卓手机上，三种方式都是进入手机相册。这跟单独集成capacitor还是有区别的。
总结：
ionic6之前的版本，调用原生只有集成cordova一种方式。ionic6开始，又多了capacitor这种方式（capacitor应该算是cordova的升级版）。在使用方式上来看，capacitor更加方便，只需要安装一个服务模块就可以调用它提供的所有api。但是capacitor也有一个弊端，那就是它目前提供的api相对较少，基本都是些常用的功能，而cordova相对丰富一些。
那么在我们的实际开发当中，还是建议优先集成cordova，这样既能使用capacitor提供的原生功能，也可以使用cordova的插件。
本文只是对调用相机做了两种集成方式的比较，对于其他插件大家可以在用到的时候自行比较。
