官方插件文檔：https://ionicframework.com/docs/native
前面提到幕袱，ionic集成原生的方式有兩種：capacitor和cordova呼奢，在官方文檔里也分別介紹了各自的插件使用方法鹃锈。今天就分別探索一下這兩種集成方式是怎樣使用原生插件的。文章以最常用的相機插件為例。
一、Capacitor的相機插件
在使用capacitor插件之前需要在項目里安裝一個名為@capacitor/core的工具包：
npm install?@capacitor/core --save
如果在創(chuàng)建項目的時候選擇集成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摊鸡，這是為了處理異步操作绽媒。
詳細的參數(shù)說明我們可以進入源文件中查詢蚕冬，這里簡單介紹一下常用的兩個參數(shù)：
resultType（返回的結果類型）
這個參數(shù)是必填的，有三種類型：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、在蘋果手機上
效果和安卓類似
寫到這里裸弦，我突然產(chǎn)生一個想法祟同，在手機上訪問ionic的web服務能不能使用capacitor的插件。
首先理疙，我們先指定IP啟動服務：
ionic server --host 你的IP地址（默認localhost） --port 你的端口（默認8100）
服務起來之后晕城，我們在手機瀏覽器上訪問該IP（如：192.168.13.68:8100)，手機必須和服務在同一網(wǎng)段窖贤，接下來就是調用插件的方法了
1砖顷、在安卓手機上
2、在蘋果手機上
顯然赃梧，在手機web網(wǎng)頁也是可以借助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、效果展示
在瀏覽器中無法使用：
但是在手機上是可以打開相機的? ? ? ? ??
對比兩種集成方式調用相機的方法盔几，我們發(fā)現(xiàn)使用capacitor只需要安裝和引用@capacitor/core這個服務就可以使用它提供的所有原生api晴弃，而集成cordova則需要安裝用到的所有模塊和cordova插件。顯然，在集成capacitor而不安裝cordova插件的情況下上鞠，是不能使用cordova的插件來調用手機硬件际邻，但是我們在集成cordova并安裝@capacitor/core之后可不可以使用capacitor調用手機硬件呢？
1芍阎、安裝和引用@capacitor/core 上面已經(jīng)介紹了世曾，這里不做過多說明
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還是有區(qū)別的。
總結：
????ionic6之前的版本珊随，調用原生只有集成cordova一種方式藻茂。ionic6開始，又多了capacitor這種方式（capacitor應該算是cordova的升級版）玫恳。在使用方式上來看辨赐，capacitor更加方便，只需要安裝一個服務模塊就可以調用它提供的所有api京办。但是capacitor也有一個弊端掀序，那就是它目前提供的api相對較少，基本都是些常用的功能惭婿，而cordova相對豐富一些不恭。
? ? 那么在我們的實際開發(fā)當中，還是建議優(yōu)先集成cordova财饥，這樣既能使用capacitor提供的原生功能换吧，也可以使用cordova的插件。
? ? 本文只是對調用相機做了兩種集成方式的比較钥星，對于其他插件大家可以在用到的時候自行比較沾瓦。
