Ionic2跨平台项目(七)浏览器中使用Native包和插件

时间:2021-02-03 23:02:50

Ionic Native简介

Ionic Native是Cordova / PhoneGap插件的一个TypeScript包装器,可以给Ionic App轻松添加所需的任何本机功能。

安装

$ npm install @ionic-native/core --save

还好,最新版的Ionic2 App默认包含@ionic-native/core,较早的Ionic2 App默认包含不带@的native包。- -save参数放在包名之前之后都行。

在使用npm install或者ionic plugin add[rm]时,使用- -save参数后,项目会在执行下载安装的同时修改package.json文件,从而保存了当前node库和plugin或者platform的状态。在使用git多人协作时,即便在.gitignore文件中忽略了node_modules、plugins、platforms目录,成员也可以通过运行npm install和ionic state restore命令从package.json文件恢复项目的完整node库和plugin或者platform。

用法

  • 安装所需的插件(plugin)

为要添加的每个插件安装Ionic Native包。
比如说要添加Camera插件,则需要运行以下命令:

$ npm install @ionic-native/camera --save

然后使用Cordova或Ionic CLI安装插件。

$ ionic plugin add cordova-plugin-camera --save

所有包名称都记录在插件的文档中。建议按照每个插件文档的安装说明进行操作,因为某些插件需要额外的步骤来完全安装,而且ionic官网现在经常变,插件的用法也有所变化。

  • 把插件添加到app的模块

安装插件的包后,将其添加到AppModule里的NgModule。

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

@NgModule({
...
providers: [
...
Camera
]
})
export class AppModule { }

在浏览器中使用Ionic Native

在浏览器中使用native插件

Ionic Native拥有超过130种移动Native SDK插件,可以构建功能强大的Ionic应用程序。

在以前,在浏览器中测试native功能是一件不可能的事情,需要离子开发人员在真机或模拟器上进行测试,这是一个相当缓慢的过程。

Ionic Native 3.0现在允许开发人员通过简单的重写机制来仿制和使用浏览器中的native插件,从而可以方便地从传感器提供测试数据,或者访问纯native API(如HealthKit)。这意味着绝大多数的Ionic App现在可以完全在浏览器中构建,而无需部署到真机或模拟器。

仿制插件

要在浏览器和ionic serve会话中使用Ionic Native插件,只需要扩展原始的插件类,并重写想要仿制的方法。

写一个demo,通过仿制Camera插件来返回图像,用来替代在真机之外可能不可用的native插件Camera。

首先新建一个文件camera.mock.ts,在其中导入类Camera:

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

然后创建一个通过仿制扩展了Camera类的新类。

class CameraMock extends Camera {
getPicture(options) {
return new Promise((resolve, reject) => {
resolve(this.fakeImage);
})
}
}

在其中定义fakeImage的值,已略去大面积的base64:

fakeImage = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYF........

最后,在app.module.ts里导入自定义的mock文件
并在providers覆盖原始的Camera类:

import { CameraMock } from '../plugin-mocks/camera.mock';
providers: [
{ provide: Camera, useClass: CameraMock }
]

做完上述的工序,按照camera插件的调用方法试试,已经可以用浏览器使用camera插件了(之前是只能在真机),只不过拿到的是假数据而不是真的打开了相机。

仿制插件有啥用

上面关于Camera的示例代码展示了重写和仿制插件的方式。选择Ionic Native3.0或以上版本中任意一个可用的插件,导入它,然后提供一个经过自己重写的provider,它将会替代原来的本地实现而被调用。等到不用的时候,只要把app.module.ts中providers的那句代码删掉就可以了。
在自定义的provider里,可以提供自定义数据来做快速调试。比如说:

  • 使用HTTP.get方法,返回测试的json串,用来解析赋值给前端控件
  • 让BarcodeScanner.scan()返回测试的二维码数据
  • 用BluetoothSerial实现一个模拟链接和数据传输系统
  • 重写TouchID或者AndroidFingerprintAuth来实现iOS或者Android系统的指纹扫描识别
    Ionic2跨平台项目(七)浏览器中使用Native包和插件