Ionic插件使用

首先知道cordova,Ionic Native的關系

我們在Cordova plugin上面可以看到，Cordova所編寫的插件前端都是js代碼，而目前的ionic使用的是ts代碼，所以勒就使用了ionic native咯。Ionic Native是Cordova / PhoneGap插件的一個TypeScript包裝器，可以給Ionic App輕松添加所需的任何本機功能。
如下圖是Cordova Camera插件，里面詳細介紹了API，使用方法等等。

cordova.png

但是很遺憾：在ionic3中并不能直接只是安裝該插件就可以使用。

但是別擔心，Ionic Native就可以輕松的搞定它了。

插件安裝,移除，查詢插件

添加插件
cordova plugin add 插件名稱

移除插件
cordova plugin remove 插件名稱

查詢當前項目有哪些插件
ionic plugin list

安裝ionic native

npm install @ionic-native/對應插件名稱 --save
例如：carema插件
cordova plugin add cordova-plugin-carema
 npm install @ionic-native/carema --save
--save作用：會將該native插件的內容寫入package.json文件中，在多人協同開發的時候別人就可以直接npm install 就可以直接安裝了。
還值得注意的是：
  如果單純的使用cordova plugin add ...安裝了插件的話是不能引用到的，因為ts不能引用到js哦。
解決方式是：添加一個xx.d.ts文件即可。
還需要注意：
  cordove plugin add ... 安裝的文件會在項目的plugins文件夾下
  npm install @ionic-native/xx --save會在node_module目錄中的@ionic-native目錄下

使用

經過了如上的安裝Carema插件就已經是可以使用了，根據ionic Native的API介紹，我們需要將插件引入app.module.ts文件的providers中。

image.png

1.app.module.ts文件

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {Camera} from "@ionic-native/camera";

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    // 添加插件
    Camera,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2. home.ts使用文件

import {Component} from "@angular/core";
import {IonicPage, NavController} from "ionic-angular";
import {Camera, CameraOptions} from "@ionic-native/camera";

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private camera: Camera) {

  }


  /**
   * 使用Carema插件
   */
  getPic() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      console.log(base64Image)
    }, (err) => {
      // Handle error
    });
  }

}

演示過程

調用該相機的插件之后會有警告，原因為需要真機調試，不能再瀏覽器調試。

image.png

ionic3帶來的調試福音

在以前，在瀏覽器中測試native功能是一件不可能的事情，需要ionic 混合開發開發人員在真機或模擬器上進行調試，搞過開發的人都知道這是一個要逼瘋人的過程，哈哈。
但是：
Ionic Native 3.0現在允許開發人員通過簡單的重寫機制來仿制和使用瀏覽器中的native插件，從而可以方便地從傳感器提供測試數據，或者訪問純native API（如HealthKit）。這意味著絕大多數的Ionic App現在可以完全在瀏覽器中構建，而無需部署到真機或模擬器。

下面就試試：

1. 寫一個自定義類，繼承Camera，并且重寫getPicture方法

import {Camera} from "@ionic-native/camera";
import {Option} from "ionic-angular";
/**
 * Created by 雷洪飛 on 2017/9/26.
 * @function: 仿制Carema插件，在瀏覽器上調試
 */

export class CameraMock extends Camera{
  // base64圖片編碼,后面部分被省略了的，因為太TM多了。
  fakeImage:string = 'data:image/png;base64,iVBOu';

  /**
   * 重寫了getPicture方法
   * @param options 參數
   * @returns {Promise<T>} 返回值
   */
  getPicture(options:Option){
    return new Promise((resolve, reject) => {
      resolve(this.fakeImage);
    })
  }
}

2. 在app.module.ts中的providers中，使用userClass來覆蓋Camera的provider

import {ErrorHandler, NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {IonicApp, IonicErrorHandler, IonicModule} from "ionic-angular";
import {MyApp} from "./app.component";


import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";
import {Camera} from "@ionic-native/camera";
import {CameraMock} from "../pages/home/camera.mock";


@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    {
      // 這里覆蓋了Camera
      provide: Camera, useClass: CameraMock
    },
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {
}

3.基本完事，這就干,直接上調試圖片，然后再解釋一遍思路，肯定有基礎的小伙伴都是明白了的。

沒有仿制插件時的截圖

image.png

仿制了的圖片截圖

image.png

明顯就看到了拿到了base64編碼哦，這樣說明調試成功了，都不要去真機上調試了。開心吧。在真機上使用也是拿到這個數據而已。
還需要解釋的是圖片上為什么多了一個base64的頭：是因為我們在調用的時候自己多加了一個頭而已。

  /**
   * 使用Carema插件
   */
  getPic() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {
      // imageData is either a base64 encoded string or a file URI
      // If it's base64:
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      console.log(base64Image)
    }, (err) => {
      // Handle error
    });
  }

將bas64拿去轉圖片是完全成功的哦。

思路解釋：

仿制插件的原因不在多說，就是方便調試
仿制為什么成功：
利用了繼承的思想，別問我什么是繼承，什么是重寫。這是Java的思想，現在被TypeScript也使用哦。很多高級語言都有了，如C++呀這些的。

那么重寫了getPicture方法之后勒，使用getPicture的時候就會被調用到這里。但是要注意的是我們使用的是Camera，并不是自己寫的類啊，這就要歸功于Angular了，因為在app.module.ts中我們改了providers的哦，使用了useClass來引用了我們自己寫的類。

在自定義的provider里，可以提供自定義數據來做快速調試。比如說：
使用HTTP.get方法，返回測試的json串，用來解析賦值給前端控件
讓BarcodeScanner.scan()返回測試的二維碼數據
用BluetoothSerial實現一個模擬鏈接和數據傳輸系統
重寫TouchID或者AndroidFingerprintAuth來實現iOS或者Android系統的指紋掃描識別

等到不用的時候，只要把app.module.ts中providers的那句代碼刪掉就可以了。

// 代碼如下：
  providers: [
    StatusBar,
    {
      // 這里覆蓋了Camera
      provide: Camera, useClass: CameraMock
    },
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
這樣使用Camera就是在使用CameraMock

使用第三方插件

使用第三方插件的話，是沒有ionic Native這個東西的，但是它一般都會提供一個xx.d.ts文件，這樣就可以是ts結合使用了。

結束

到此插件的簡單講解就結束了哦。
算了還是把代碼放到git吧
https://github.com/leihfei/ionic3-plugin.git