Ionic之调用原生模块相机 | 前端进阶之旅

# 一、Ionic Native 的使用

Ionic 在 cordova 的基础上面又进行了封装，可以让我们更方便的在 ionic 中使用 cordova 插件

使用方法:

https://ionicframework.com/docs/native/device/

ionic cordova plugin add cordova-plugin-device 

npm install @ionic-native/device --save

@前端进阶之旅: 代码已经复制到剪贴板

注意: 安装 ionic 调用原生 api 的插件的时候在模块加上 --save

注意: ios 安装插件的时候命令签名加 sudo

import { Device } from '@ionic-native/device/ngx';

@前端进阶之旅: 代码已经复制到剪贴板

providers: [
    StatusBar,
    SplashScreen,
    Device,
    { 
        provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
    }
]

@前端进阶之旅: 代码已经复制到剪贴板

import { Device } from '@ionic-native/device/ngx'; 

constructor(private device: Device) { }
...
console.log('Device UUID is: ' + this.device.uuid);

@前端进阶之旅: 代码已经复制到剪贴板

Ionic 在 cordova 的基础上面又进行了封装，可以让我们更方便的在 ionic 中使用 cordova 插件

使用方法:

https://ionicframework.com/docs/native/device/

ionic cordova plugin add cordova-plugin-device 

npm install @ionic-native/device --save

@前端进阶之旅: 代码已经复制到剪贴板

注意: 安装 ionic 调用原生 api 的插件的时候在模块加上 --save

注意: ios 安装插件的时候命令签名加 sudo

import { Device } from '@ionic-native/device/ngx';

@前端进阶之旅: 代码已经复制到剪贴板

providers: [
    StatusBar,
    SplashScreen,
    Device,
    { 
        provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
    }
]

@前端进阶之旅: 代码已经复制到剪贴板

import { Device } from '@ionic-native/device/ngx'; 

constructor(private device: Device) { }
...
console.log('Device UUID is: ' + this.device.uuid);

@前端进阶之旅: 代码已经复制到剪贴板