ionic开发-浏览器环境下如何使用本地插件

Posted on | Edited on | Comments: | Views:

官方原文

浏览器环境下使用本地化插件

ionic native拥有130多个移动SDK插件，这点使得可能构建强大的ionic app。

由于历史原因，在浏览器环境下测试这些本地插件是很困难的，要求ionic开发者比如在物理设备或者虚拟机中进行测试，这是相当慢的一个过程。

ionic native3.0现在允许开发者能够伪装，在浏览器环境下通过重写类，是的能够提供测试数据，或者访问本地化API，比如HealthKit。

这意味着大量的ionic app能够不必部署到真机或者模拟器，就可以在浏览器环境下完全的构建了。一流的开发速度，闻所未闻。

伪装插件

为了在浏览器环境下去使用ionic本地化插件，你只需要拓展这些传统插件类和重写一些函数。

让我们伪装下Camera插件返回一张图片吧。

首先在根模块导入Camera类.

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

然后创建类，拓展Camera类，伪装一个实现。

1
2
3
providers: [
  { provide: Camera, useClass: CameraMock }
]

下面是完整的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 { 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: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    { provide: Camera, useClass: CameraMock }
  ]
})
export class AppModule {}