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

官方原文

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

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 {}