Using Native Plugins in the Browser(在浏览器中使用原生插件)
Ionic Native拥有超过130种移动Native Native SDK插件,可以构建功能强大的Ionic应用程序,充分利用iOS,Android及更高版本的Native Mobile SDK。
历史上,很难在浏览器中测试本机功能,要求Ionic开发人员在物理设备或仿真器上进行测试,这是一个相当缓慢的过程。
Ionic Native 3.0现在允许开发人员通过简单的覆盖机制来模拟和使用浏览器中的本机插件,从而可以方便地从传感器提供测试数据,或者访问仅Native Native API(如HealthKit)。
这意味着大部分的Ionic应用程序现在可以完全在浏览器中构建,而无需部署到设备或模拟器。 移动级别的发展速度闻所未闻。
Mocking Plugins(模拟插件)
要在浏览器和Ionic服务会话中使用Ionic Native插件,您只需要扩展原始的插件类,并覆盖您想要模拟的方法。
让我们试试模拟Camera插件来返回图像,而不是使用在设备上下文之外可能不可用的原生Camera。
首先在src/app/app.module.ts文件中导入Camera类:
import { Camera } from '@ionic-native/camera';
然后创建一个使用模拟实现扩展Camera类的新类:
class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve("BASE_64_ENCODED_DATA_GOES_HERE");
})
}
}
最后,覆盖我们的providers 中以前的Camera类:
providers: [
{ provide: Camera, useClass: CameraMock }
]
以下是整个例子:
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 {}
Where to go from here
上面的相机示例显示了覆盖和模拟插件的模式。 选择Ionic Native 3.0或更高版本中可用的任何插件,导入它,然后提供一个自定义的provider 覆盖即可使用,而不是真机实现。
在该provider中,可以提供自定义数据以进行快速测试。 一些想法包括从BarcodeScanner.scan()返回测试条形码数据,实现使用BluetoothSerial的设备的假连接和数据传输系统,或者通过覆盖TouchID和AndroidFingerprintAuth来实现iOS和Android的指纹扫描流程。