ionic 自定义native插件

ionic-native git地址: https://github.com/ionic-team/ionic-native
具体说明在 DEVELOPER.md 文件中
步骤如下:
1. 安装 glup

npm install gulp

2.创建插件文件夹

gulp plugin:create -n PluginName

输入该命令,并且替换掉你所需要的插件名称,确保你的插件名首字母大写,或者使用驼峰命名法
通过添加 -m 命令来获取一个最小化的插件模板
如

gulp plugin:create -m -n PluginName

执行完该命令后,在目录 src/@ionic-native/plugins/plugin-name/ 下会创建一个index.ts的文件,该文件是所有的插件的定义文件
可以参考下Geolocation 插件

插件类

第一步,创建插件类,创建一个类代表我们的插件

@Injectable()
class Geolocation {

}

类元数据

第二步,创建类元数据,我们需要指定一些关于插件的一些信息,如@Plugin装饰器来添加一些插件的信息

@Plugin({
  plugin: 'cordova-plugin-geolocation',
  pluginRef: 'navigator.geolocation'
})
@Injectable()
export class Geolocation {

}

在这,plugin 就是我们再npm上添加插件时用到的插件名:比如cordova plugin add cordova-plugin-geolocation
pluginRef 表示 cordova 插件暴露出来的一些调用方法,例如Geolocation插件,通常调用时调用的方法,如:
window.navigator.geolocation.getCurrentPosition({}, success, error),所以pluginRef在这里就是:navigator.geolocation

类方法

第三步,创建类方法,如getCurrentPosition方法

@Cordova()
getCurrentPosition(options?: GeolocationOptions): Promise<Geoposition> { return }

在这里,return 关键字仅仅只是为了保证TypeScript的类型检查能够通过,因为我们已经制定了getCurrentPosition的返回类型是返回一个Promise

通常情况下,@Cordova 装饰器包含了插件的回调函数,其中success回调指向Promise的resolve方法,而fail回调指向reject方法,并且它保证了能够获取到Cordova以及其下的插件都是可获取的,并且如果她们不存在,能能够打印出错误信息.

getCurrentPosition 是一个静态函数,因为插件类仅仅试试一个调用Cordova插件方法的一个类,它并不是一个实例并且没有状态.

接下来我们来看下watchPosition 方法

@Cordova({
    callbackOrder: 'reverse',
    observable: true,
    clearFunction: 'clearWatch'
  })
  watchPosition(options?: GeolocationOptions): Observable<Geoposition> { return }

@Cordova装饰器有如下几个属性

observable 表明这个方法可以多次调用它的回调方法,所以在这里使用Observable 方法而不使用Promise
clearFunction 和 observable 这个选项一起使用,并且 指明当 Observable 进行处理时调用的方法

测试插件类

插件类开发完成后,即可进行测试

在这个ionic-native插件工程下,执行npm run build,当然最好是添加sudo,如果只编译指定的插件,则输入sudo npm run build plugin-name即可,命令执行成功后,就会创建一个dist.这个dist目录下包含一个二级@ionic-native目录,这个目录中包含了编译后的内容.把这个包(如果编译多个包,则将多个包)拷贝到你的app工程下的node_modules 下的@ionic-native目录下面,并且在工程的package.json中,dependencies节点下增加插件相关信息