前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Ionic之调用原生模块相机

首页
2019-10-07 14:10:24
Front-End
IonicAngular

# 一、Ionic Native 的使用

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

使用方法:

  1. 找到对应的Api:

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

  1. 安装相关的设备插件
ionic cordova plugin add cordova-plugin-device 

npm install @ionic-native/device --save
@前端进阶之旅: 代码已经复制到剪贴板
  • 注意: 安装 ionic 调用原生 api 的插件的时候在模块加上 --save
  • 注意: ios 安装插件的时候命令签名加 sudo
  1. 在app.module.ts中引入注册相应模块
import { Device } from '@ionic-native/device/ngx';
@前端进阶之旅: 代码已经复制到剪贴板
providers: [
    StatusBar,
    SplashScreen,
    Device,
    { 
        provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
    }
]
@前端进阶之旅: 代码已经复制到剪贴板
  1. 在用到的页面引入看文档使用
import { Device } from '@ionic-native/device/ngx'; 

constructor(private device: Device) { }
...
console.log('Device UUID is: ' + this.device.uuid);
@前端进阶之旅: 代码已经复制到剪贴板

fe
  • 一、Ionic Native 的使用
  • 二、Cordova 常用命令以及插件的使用

← 初探Cordova结合VueIonic之iOS打包流程 →