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包和插件
标签：

相关文章