Ionic Native 浏览器的使用

在浏览器中使用原生插件

Ionic Native拥有超过130个移动端原生SDK插件。这就可以让你在ios和android上创建一个拥有和原生app一样的应用能力。

从历史角度来说，在浏览器中测试原生功能是非常困难的，这往往需要ionic开发者在真实设备或者模拟器上进行测试，而这又卡的要死。

到了Ionic Native 3.0时代，就非常容易从传感器中测试数据，接入一个原生api（如：HealthKit）.而这些开发者只需要在浏览器中使用模拟原生插件即可。

那么如何模拟插件呢？

让我们一起模拟一个相机Camera插件，并返回一张照片而不是用原生相机哦。

在我们的src/app/app.module.ts文件中，import Camera Class.

import { Camera } from '@ionic-native/camera';

然后我们再来创建一个新class，通过使用一模拟工具来扩展Camera这个类：

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

最后，在你NgModule的providers数组中复写你之前的Camera

providers: [
  { provide: Camera, useClass: CameraMock }
]

下面的例子对着抄就好了：

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Camera } from '@ionic-native/camera';

class CameraMock extends Camera {
  getPicture(options) {
    return new Promise((resolve, reject) => {
      resolve("BASE_64_ENCODED_DATA_GOES_HERE");
    })
  }
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: Camera, useClass: CameraMock }
  ]
})
export class AppModule {}